fix mobile

calvo-jp · Feb 29, 2024 · daa4f07 · daa4f07
1 parent f9ca15c
commit daa4f07
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git a/website/postcss.config.js b/website/postcss.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   plugins: {
+    'tailwindcss/nesting': {},
     tailwindcss: {},
     autoprefixer: {},
   },

diff --git a/website/src/app/(index)/gallery.tsx b/website/src/app/(index)/gallery.tsx
@@ -21,7 +21,7 @@ function GalleryItem({data}: {data: Icon}) {
   const context = usePageContext();
 
   return (
-    <Tooltip.Root lazyMount>
+    <Tooltip.Root lazyMount unmountOnExit>
       <Tooltip.Trigger
         type="button"
         onClick={() => context.inspect(data)}
@@ -33,7 +33,7 @@ function GalleryItem({data}: {data: Icon}) {
       />
 
       <Tooltip.Positioner>
-        <Tooltip.Content className="data-open:animate-scalefade-in data-closed:animate-scalefade-out rounded-md bg-gray-true-900 px-2.5 py-2 font-mono text-sm text-white dark:bg-gray-true-50 dark:text-gray-true-800">
+        <Tooltip.Content className="rounded-md bg-gray-true-900 px-2.5 py-2 font-mono text-sm text-white data-open:animate-scalefade-in data-closed:animate-scalefade-out dark:bg-gray-true-50 dark:text-gray-true-800">
           <Tooltip.Arrow
             className={twMerge(
               '[--arrow-size:theme(spacing.2)]',

diff --git a/website/src/app/(index)/icon-details.tsx b/website/src/app/(index)/icon-details.tsx
@@ -74,10 +74,11 @@ export function IconDetails() {
         }
       }}
       lazyMount
+      unmountOnExit
     >
       <Dialog.Backdrop className="fixed inset-0 z-overlay bg-white/25 backdrop-blur-sm data-open:animate-fade-in data-closed:animate-fade-out dark:bg-gray-true-950/50" />
       <Dialog.Positioner>
-        <Dialog.Content className="fixed bottom-0 right-0 z-modal w-full border-t bg-white p-8 data-open:animate-slide-up data-closed:animate-slide-down dark:bg-gray-true-950">
+        <Dialog.Content className="fixed bottom-0 right-0 z-modal w-full border-t bg-white p-4 data-open:animate-slide-up data-closed:animate-slide-down md:p-6 lg:p-8 dark:bg-gray-true-950">
           <div>
             <div
               className="w-fit rounded border p-3"

diff --git a/website/src/app/navbar.tsx b/website/src/app/navbar.tsx
@@ -5,11 +5,12 @@ export function Navbar() {
     <header className="sticky top-0 z-sticky flex h-[4.5rem] items-center gap-2 border-b bg-white/75 p-4 backdrop-blur-sm dark:bg-gray-true-900/80">
       <div className="flex items-center gap-3 rounded-sm bg-gray-true-100 px-3 py-2.5 dark:bg-gray-true-700/10">
         <code className="flex items-center gap-1.5 text-xs">
-          <span className="text-warning-700 dark:text-warning-500">pnpm</span>
-          <span className="text-gray-600 dark:text-gray-true-400">install</span>
-          <span className="text-brand-700 dark:text-brand-500">
+          <span className="hidden text-warning-700 md:block dark:text-warning-500">pnpm</span>
+          <span className="text-gray-600 hidden md:block dark:text-gray-true-400">install</span>
+          <span className="hidden text-brand-700 lg:block dark:text-brand-500">
             {'@untitled-theme/icons-{react|svelte}'}
           </span>
+          <span className="text-brand-700 lg:hidden dark:text-brand-500">{'@untitled-theme'}</span>
         </code>
       </div>