feat: adjust margins on smaller displays

thraizz · Aug 8, 2024 · 1d33195 · 1d33195
1 parent 67d6d1f
commit 1d33195
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/src/components/base/BasePageLayout.tsx b/src/components/base/BasePageLayout.tsx
@@ -1,5 +1,5 @@
 export const BasePageLayout = ({ children }: { children: React.ReactNode }) => (
-  <div className="mx-6 flex flex-grow flex-col items-center justify-center gap-8">
+  <div className="mx-4 flex flex-grow flex-col items-center justify-center gap-8 lg:mx-6">
     <div className="flex w-full flex-col gap-4 rounded-md bg-gray-100 p-4 shadow-md">
       {children}
     </div>

diff --git a/src/components/panels/SettingsForm.tsx b/src/components/panels/SettingsForm.tsx
@@ -21,7 +21,7 @@ export const SettingsForm = () => {
   };
 
   return (
-    <div className="mt-4 flex flex-row gap-4">
+    <div className="mt-4 flex flex-col gap-2 lg:flex-row lg:gap-4">
       <label className="block">
         <input
           type="checkbox"

diff --git a/src/views/NewLayout.tsx b/src/views/NewLayout.tsx
@@ -302,8 +302,8 @@ export const NewLayout = ({ children }: PropsWithChildren) => {
             <UserMenu />
           </div>
 
-          <main className="py-10">
-            <div className="px-4 sm:px-6 lg:px-8">{children}</div>
+          <main className="py-4 lg:py-10">
+            <div className="px-0 sm:px-4 lg:px-8">{children}</div>
           </main>
         </div>
       </div>