From 90dd09c17cf36f2b6acc354548de3ec4198b19cd Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Fri, 9 May 2025 14:30:31 +0300
Subject: [PATCH] Fix layout and scroll issues

---
 .../dashboard/_components/DashboardInner.tsx  | 19 ++++++++++---------
 .../_components/DynamicSharedLayout.tsx       |  2 +-
 apps/web/app/dashboard/layout.tsx             |  4 +---
 .../settings/organization/Organization.tsx    |  2 +-
 .../components/CustomDomainIconCard.tsx       |  4 ++--
 .../components/OrganizationIcon.tsx           |  2 +-
 apps/web/app/globals.css                      |  7 +++----
 7 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/apps/web/app/dashboard/_components/DashboardInner.tsx b/apps/web/app/dashboard/_components/DashboardInner.tsx
index cd7088382..cddd99724 100644
--- a/apps/web/app/dashboard/_components/DashboardInner.tsx
+++ b/apps/web/app/dashboard/_components/DashboardInner.tsx
@@ -46,14 +46,16 @@ export default function DashboardInner({
   const title = titles[pathname] || "";
   const { theme, setThemeHandler } = useTheme();
   return (
-    <div className="flex flex-col w-full h-full">
+    <>
       {/* Top Bar - Fixed at top with proper z-index */}
       <header
         className={clsx(
-          "flex sticky z-50 justify-between items-center px-5 mt-10 w-full h-16 border-b bg-gray-1 lg:bg-transparent border-gray-3 lg:border-b-0 lg:pl-0 lg:pr-5 lg:top-0 lg:relative top-[64px] lg:mt-5 lg:h-8"
+          "flex sticky z-50 justify-between items-center px-5 mt-10 w-full border-b min-h-16 md:min-h-10 bg-gray-1 lg:bg-transparent border-gray-3 lg:border-b-0 lg:pl-0 lg:pr-5 lg:top-0 lg:relative top-[64px] lg:mt-5 lg:h-8"
         )}
       >
-        <p className="relative text-xl truncate text-gray-12 lg:text-2xl w-fit max-w-[150px]">{title}</p>
+        <p className="relative text-xl truncate md:max-w-full text-gray-12 lg:text-2xl w-fit max-w-[150px]">
+          {title}
+        </p>
         <div className="flex gap-4 items-center">
           <div
             onClick={() => {
@@ -71,14 +73,13 @@ export default function DashboardInner({
       </header>
       {/* Content Area - Scrollable content with proper spacing */}
       <main
-        className={clsx(
-          "flex overflow-y-auto flex-col flex-1 p-5 pb-5 border border-b-0 bg-gray-1 border-gray-3 lg:rounded-tl-2xl lg:p-8",
-          "mt-5 min-h-screen"
-        )}
+        className={
+          "flex flex-col flex-1 p-5 pb-5 mt-5 border border-b-0 min-h-fit bg-gray-1 border-gray-3 lg:rounded-tl-2xl lg:p-8"
+        }
       >
-        <div className="flex flex-col gap-4">{children}</div>
+        <div className="flex flex-col flex-1 gap-4">{children}</div>
       </main>
-    </div>
+    </>
   );
 }
 
diff --git a/apps/web/app/dashboard/_components/DynamicSharedLayout.tsx b/apps/web/app/dashboard/_components/DynamicSharedLayout.tsx
index 3ace6bc82..6a196004d 100644
--- a/apps/web/app/dashboard/_components/DynamicSharedLayout.tsx
+++ b/apps/web/app/dashboard/_components/DynamicSharedLayout.tsx
@@ -99,7 +99,7 @@ export default function DynamicSharedLayout({
           </aside>
           {/* Header/topbar is now expected to be rendered by children if needed */}
           {/* Main content area */}
-          <div className="overflow-y-auto col-span-1 row-span-2 custom-scroll focus:outline-none">
+          <div className="flex col-span-1 row-span-2 h-full custom-scroll focus:outline-none">
             <AdminMobileNav />
             {children}
           </div>
diff --git a/apps/web/app/dashboard/layout.tsx b/apps/web/app/dashboard/layout.tsx
index 4511ca69e..44ab07cf9 100644
--- a/apps/web/app/dashboard/layout.tsx
+++ b/apps/web/app/dashboard/layout.tsx
@@ -168,9 +168,7 @@ export default async function DashboardLayout({
       initialTheme={theme as "light" | "dark"}
       initialSidebarCollapsed={sidebar === "true"}
     >
-      <div className="full-layout">
-        <DashboardTemplate>{children}</DashboardTemplate>
-      </div>
+      <DashboardTemplate>{children}</DashboardTemplate>
     </DynamicSharedLayout>
   );
 }
diff --git a/apps/web/app/dashboard/settings/organization/Organization.tsx b/apps/web/app/dashboard/settings/organization/Organization.tsx
index 2f41bea21..fb027fde0 100644
--- a/apps/web/app/dashboard/settings/organization/Organization.tsx
+++ b/apps/web/app/dashboard/settings/organization/Organization.tsx
@@ -96,7 +96,7 @@ export const Organization = () => {
 
       <SeatsInfoCards />
 
-      <div className="flex flex-col flex-1 gap-6 justify-center items-stretch xl:flex-row">
+      <div className="flex flex-col gap-6 justify-center items-stretch xl:flex-row">
         <OrganizationDetailsCard
           isOwner={isOwner}
           saveLoading={saveLoading}
diff --git a/apps/web/app/dashboard/settings/organization/components/CustomDomainIconCard.tsx b/apps/web/app/dashboard/settings/organization/components/CustomDomainIconCard.tsx
index 5558edd46..0cdffafd3 100644
--- a/apps/web/app/dashboard/settings/organization/components/CustomDomainIconCard.tsx
+++ b/apps/web/app/dashboard/settings/organization/components/CustomDomainIconCard.tsx
@@ -15,10 +15,10 @@ export const CustomDomainIconCard = ({
 }: CustomDomainCardProps) => {
   return (
     <Card className="flex flex-col flex-1 gap-6 w-full lg:flex-row">
-      <div className="flex-1 order-first lg:order-last">
+      <div className="order-first lg:order-last">
         <OrganizationIcon isOwner={isOwner} showOwnerToast={showOwnerToast} />
       </div>
-      <div className="flex-1 order-last lg:order-first">
+      <div className="order-last lg:order-first">
         <div className="space-y-1">
           <Label htmlFor="customDomain">Custom Domain</Label>
           <CardDescription className="w-full max-w-[400px]">
diff --git a/apps/web/app/dashboard/settings/organization/components/OrganizationIcon.tsx b/apps/web/app/dashboard/settings/organization/components/OrganizationIcon.tsx
index cfcd47d73..7a3d85eb6 100644
--- a/apps/web/app/dashboard/settings/organization/components/OrganizationIcon.tsx
+++ b/apps/web/app/dashboard/settings/organization/components/OrganizationIcon.tsx
@@ -67,7 +67,7 @@ export const OrganizationIcon = ({
   };
 
   return (
-    <div className="relative flex-1">
+    <div className="flex-1">
       <div className="space-y-1">
         <Label htmlFor="icon">Organization Icon</Label>
         <CardDescription className="w-full max-w-[400px]">
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
index 859c632f0..e251330e9 100644
--- a/apps/web/app/globals.css
+++ b/apps/web/app/globals.css
@@ -446,7 +446,7 @@ ul {
 } */
 
 .dashboard-page {
-  @apply flex flex-col;
+  @apply flex overflow-auto flex-col flex-1 items-stretch custom-scroll;
 }
 
 .dashboard-header {
@@ -476,17 +476,16 @@ slot:not(.dashboard-layout slot) {
 
 /* Custom scrollbar */
 .custom-scroll {
-  margin-right: 3px; /* Add margin to create space between scrollbar and window edge */
   overflow-y: scroll;
 }
 
 .custom-scroll::-webkit-scrollbar {
-  width: 7px;
+  width: 3px;
   background-color: transparent;
 }
 
 .custom-scroll::-webkit-scrollbar-thumb {
-  @apply bg-gray-7 w-[7px] rounded-full;
+  @apply bg-gray-7 w-[3px] rounded-full;
 }
 
 #scrolling-section slot {