fix: drawer top edge anchor

Signed-off-by: Innei <i@innei.in>

apps/renderer/src/components/ui/modal/stacked/modal.tsx

@@ -263,7 +263,6 @@ 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,
                   )}

apps/renderer/src/modules/profile/hooks.ts

@@ -64,7 +64,7 @@ export const usePresentUserProfileModal = (variant: Variant = "dialog") => {
         overlay: finalVariant === "dialog",
         autoFocus: false,
         modalContainerClassName:
-          finalVariant === "drawer" ? "right-4 left-[auto] top-4 bottom-4" : "",
+          finalVariant === "drawer" ? tw`right-4 left-[auto] safe-inset-top-4 bottom-4` : "",
       })
     },
     [present, variant],

apps/renderer/src/styles/tailwind-extend.css

@@ -379,9 +379,3 @@
     }
   }
 }
-
-@layer utilities {
-  .safe-inset-top {
-    top: var(--fo-window-padding-top, 0);
-  }
-}

tailwind.config.ts

@@ -23,6 +23,9 @@ export default resolveConfig({
     },
 
     extend: {
+      spacing: {
+        "safe-inset-top": "var(--fo-window-padding-top, 0)",
+      },
       fontFamily: {
         theme: "var(--fo-font-family)",
         default: "SN pro, sans-serif, system-ui",
@@ -140,6 +143,31 @@ export default resolveConfig({
       addVariant("group-motion-reduce", ':merge(.group)[data-motion-reduce="true"] &')
       addVariant("peer-motion-reduce", ':merge(.peer)[data-motion-reduce="true"] ~ &')
     }),
+    plugin(({ addUtilities, matchUtilities, theme }) => {
+      addUtilities({
+        ".safe-inset-top": {
+          top: "var(--fo-window-padding-top, 0)",
+        },
+      })
+
+      const safeInsetTopVariants = {}
+      for (let i = 1; i <= 16; i++) {
+        safeInsetTopVariants[`.safe-inset-top-${i}`] = {
+          top: `calc(var(--fo-window-padding-top, 0px) + ${theme(`spacing.${i}`)})`,
+        }
+      }
+      addUtilities(safeInsetTopVariants)
+
+      // Add arbitrary value support
+      matchUtilities(
+        {
+          "safe-inset-top": (value) => ({
+            top: `calc(var(--fo-window-padding-top, 0px) + ${value})`,
+          }),
+        },
+        { values: theme("spacing") },
+      )
+    }),
   ],
 })