From 3352e8c292e810bb9a333e2a3c5e23adbae2a57a Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Sat, 28 Sep 2024 18:31:58 +0800
Subject: [PATCH] fix: add safe inset-top for Windows, fixed #576

Signed-off-by: Innei <i@innei.in>
---
 .../src/components/ui/modal/stacked/modal.tsx |  1 +
 .../modules/profile/user-profile-modal.tsx    |  2 +-
 apps/renderer/src/pages/(main)/layout.tsx     |  2 +-
 apps/renderer/src/styles/tailwind-extend.css  | 26 +++++++++++++------
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/apps/renderer/src/components/ui/modal/stacked/modal.tsx b/apps/renderer/src/components/ui/modal/stacked/modal.tsx
index 5d3961ea92..e67ec4350d 100644
--- 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
index aca92a8df7..636707528b 100644
--- 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
index 495c69ffed..500379994e 100644
--- 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
index 65be9b3921..7501cea098 100644
--- 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);
+  }
+}