fix: horizontal overflow on small devices

yacineahmaich · Sep 18, 2023 · feec9bd · feec9bd
1 parent 66d83a3
commit feec9bd
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -7,9 +7,6 @@
     <title>Pocket Wide | Take Control of Your Expenses with Pocket Wide</title>
   </head>
   <style>
-    body {
-      overflow: hidden;
-    }
     .loader {
       position: fixed;
       top: 0;

diff --git a/src/index.css b/src/index.css
@@ -1,3 +1,11 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  html,
+  body {
+    overflow-x: hidden;
+    width: 100%;
+  }
+}
diff --git a/src/ui/header/MobileNavigation.tsx b/src/ui/header/MobileNavigation.tsx
@@ -31,7 +31,7 @@ function MobileNavigation() {
       <Dialog.Portal className="sm:hidden">
         <Dialog.Overlay className="fixed inset-0 z-[9999] bg-black/20 animate-in duration-300 data-[state=open]:fade-in-0 sm:hidden" />
         <Dialog.Content className="fixed inset-y-0 right-0 top-0 z-[9999] flex w-[280px] max-w-full flex-col bg-white animate-in data-[state=open]:slide-in-from-right sm:hidden">
-          <Dialog.Close className="absolute right-full top-2 mr-2">
+          <Dialog.Close className="absolute right-full top-2 mr-2" asChild>
             <button className="rounded-full bg-white shadow-lg active:scale-95">
               <Icon icon={HiXMark} color="gray" />
             </button>