Merge pull request #1331 from abdulmalikyusuf/fix/dashboard-layout

Fix: dashboard homepage moble layout responsiveness.
hngprojects · Aug 24, 2024 · 67ddeea · 67ddeea
2 parents 33aad3d + a8efe15
commit 67ddeea
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/src/app/dashboard/(user-dashboard)/(user-metrics)/layout.tsx b/src/app/dashboard/(user-dashboard)/(user-metrics)/layout.tsx
@@ -21,7 +21,7 @@ const links = [
 
 export default function UserMetricsLayout({ children }: PropsWithChildren) {
   return (
-    <div className="flex h-full flex-col gap-[37px] bg-background">
+    <div className="flex h-full flex-col gap-[37px] bg-background p-4">
       <div className="flex flex-wrap items-center justify-between gap-x-6 gap-y-2 pt-6">
         <div className="space-y-6">
           <h1 className="text-2xl font-semibold lg:text-[30px]">Dashboard</h1>

diff --git a/src/app/dashboard/(user-dashboard)/(user-metrics)/page.tsx b/src/app/dashboard/(user-dashboard)/(user-metrics)/page.tsx
@@ -9,7 +9,7 @@ export default function DashboardOverview() {
         <OverviewRevenue />
       </div>
       <div className="flex flex-wrap gap-4">
-        <OverviewChart className="flex-grow basis-full md:basis-1/2 lg:max-w-[787px]" />
+        <OverviewChart className="w-full basis-full md:basis-1/2 lg:max-w-[787px]" />
         <div className="flex-1 flex-grow md:min-w-[400px]">
           <OverviewSales />
         </div>

diff --git a/src/app/dashboard/(user-dashboard)/layout.tsx b/src/app/dashboard/(user-dashboard)/layout.tsx
@@ -15,8 +15,10 @@ export default function AdminLayout({
       <UserNavbar />
       <div className="relative mx-auto w-full bg-white max-lg:overflow-hidden xl:px-4">
         <div className="flex">
-          <SettingsSidebar />
-          <div className="w-full p-4">
+          <div className="shrink-0">
+            <SettingsSidebar />
+          </div>
+          <div className="w-[calc(100%_-_50px)] flex-1">
             <Suspense>{children}</Suspense>
           </div>
         </div>{" "}