fix: add safe inset-top for Windows, fixed #576

Signed-off-by: Innei <i@innei.in>
RSSNext · Sep 28, 2024 · 3352e8c · 3352e8c
1 parent 3dd705f
commit 3352e8c
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 10 deletions.
diff --git a/apps/renderer/src/components/ui/modal/stacked/modal.tsx b/apps/renderer/src/components/ui/modal/stacked/modal.tsx
@@ -263,6 +263,7 @@ export const ModalInternal = memo(
                   className={cn(
                     "no-drag-region fixed z-20",
                     modal ? "inset-0 overflow-auto" : "left-0 top-0",
+                    "safe-inset-top",
                     currentIsClosing ? "!pointer-events-none" : "!pointer-events-auto",
                     modalContainerClassName,
                   )}

diff --git a/apps/renderer/src/modules/profile/user-profile-modal.tsx b/apps/renderer/src/modules/profile/user-profile-modal.tsx
@@ -190,7 +190,7 @@ export const UserProfileModalContent: FC<{
         className={cn(
           "relative flex flex-col items-center overflow-hidden rounded-xl border bg-theme-background p-8 pb-0",
           variant === "drawer"
-            ? "shadow-drawer-left h-full w-[60ch] max-w-full"
+            ? "shadow-drawer-to-left h-full w-[60ch] max-w-full"
             : "h-[80vh] w-[800px] max-w-full shadow lg:max-h-[calc(100vh-10rem)]",
         )}
       >

diff --git a/apps/renderer/src/pages/(main)/layout.tsx b/apps/renderer/src/pages/(main)/layout.tsx
@@ -234,7 +234,7 @@ const FeedResponsiveResizerContainer = ({
         className={cn(
           "shrink-0 overflow-hidden",
           "absolute inset-y-0 z-[2]",
-          feedColumnTempShow && !feedColumnShow && "shadow-drawer-right z-[12] border-r",
+          feedColumnTempShow && !feedColumnShow && "shadow-drawer-to-right z-[12] border-r",
           !feedColumnShow && !feedColumnTempShow ? "-translate-x-full delay-200" : "",
           !isDragging ? "duration-200" : "",
         )}

diff --git a/apps/renderer/src/styles/tailwind-extend.css b/apps/renderer/src/styles/tailwind-extend.css
@@ -280,17 +280,21 @@
 }
 
 @layer components {
-  .shadow-drawer-left {
-    box-shadow: -12px 0px 20px -6px rgba(41, 41, 41, 0.1);
+  .shadow-drawer-to-left {
+    box-shadow:
+      -12px 0 20px -6px rgba(41, 41, 41, 0.1),
+      24px 0 20px -6px rgba(41, 41, 41, 0.1);
   }
-  [data-theme="dark"] .shadow-drawer-left {
-    box-shadow: -12px 0px 20px -6px rgba(0, 0, 0, 0.653);
+  [data-theme="dark"] .shadow-drawer-to-left {
+    box-shadow:
+      -12px 0px 20px -6px rgba(0, 0, 0, 0.653),
+      24px 0 20px -6px rgba(0, 0, 0, 0.653);
   }
 
-  .shadow-drawer-right {
+  .shadow-drawer-to-right {
     box-shadow: 12px 0px 20px -6px rgba(41, 41, 41, 0.1);
   }
-  [data-theme="dark"] .shadow-drawer-right {
+  [data-theme="dark"] .shadow-drawer-to-right {
     box-shadow: 12px 0px 20px -6px rgba(0, 0, 0, 0.653);
   }
 }
@@ -313,12 +317,12 @@
 
 @layer components {
   .shadow-tooltip-bottom {
-    --bg: theme(colors.accent.DEFAULT/0.3);
+    --bg: theme(colors.accent/0.3);
     box-shadow: 0px 5px 20px -11px var(--bg);
   }
 
   .shadow-tooltip-top {
-    --bg: theme(colors.accent.DEFAULT/0.3);
+    --bg: theme(colors.accent/0.3);
     box-shadow: 0px -5px 20px -11px var(--bg);
   }
 }
@@ -375,3 +379,9 @@
     }
   }
 }
+
+@layer utilities {
+  .safe-inset-top {
+    top: var(--fo-window-padding-top, 0);
+  }
+}