Fix layout and scroll issues (#530)

Author: ameer2468

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>
+    </>
   );
 }
 

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>

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>
   );
 }

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}

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]">

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]">

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 {