Feat/platform max width

.cursor/mcp.json

@@ -6,16 +6,15 @@
     },
     "playwright": {
       "command": "npx",
-      "args": [
-        "@playwright/mcp@latest"
-      ]
+      "args": ["@playwright/mcp@latest"]
+    },
+    "figma": {
+      "url": "https://mcp.figma.com/mcp",
+      "type": "http"
     },
     "sequential-thinking": {
       "command": "npx",
-      "args": [
-        "-y",
-        "@modelcontextprotocol/server-sequential-thinking"
-      ]
+      "args": ["-y", "@modelcontextprotocol/server-sequential-thinking"]
     }
   }
 }

apps/dashboard/app/[daoId]/(main)/attack-profitability/page.tsx

@@ -73,20 +73,22 @@ export default async function AttackProfitabilityPage({
   }
 
   return (
-    <TheSectionLayout
-      title={PAGES_CONSTANTS.attackProfitability.title}
-      icon={<Crosshair2Icon className="section-layout-icon" />}
-      description={PAGES_CONSTANTS.attackProfitability.description}
-      riskLevel={
-        <RiskLevelCard status={daoConstants.attackProfitability?.riskLevel} />
-      }
-    >
-      <SubSectionsContainer>
-        <AttackProfitabilitySection
-          daoId={daoIdEnum}
-          attackProfitability={daoConstants.attackProfitability}
-        />
-      </SubSectionsContainer>
-    </TheSectionLayout>
+    <div>
+      <TheSectionLayout
+        title={PAGES_CONSTANTS.attackProfitability.title}
+        icon={<Crosshair2Icon className="section-layout-icon" />}
+        description={PAGES_CONSTANTS.attackProfitability.description}
+        riskLevel={
+          <RiskLevelCard status={daoConstants.attackProfitability?.riskLevel} />
+        }
+      >
+        <SubSectionsContainer>
+          <AttackProfitabilitySection
+            daoId={daoIdEnum}
+            attackProfitability={daoConstants.attackProfitability}
+          />
+        </SubSectionsContainer>
+      </TheSectionLayout>
+    </div>
   );
 }

apps/dashboard/app/[daoId]/(main)/layout.tsx

@@ -1,10 +1,10 @@
 import { ReactNode } from "react";
 import { ALL_DAOS, DaoIdEnum } from "@/shared/types/daos";
 import NotFound from "@/app/not-found";
-import { BaseHeaderLayoutSidebar } from "@/shared/components/";
 import { HeaderMobile } from "@/widgets/HeaderMobile";
 import { HeaderDAOSidebar, HeaderSidebar, StickyPageHeader } from "@/widgets";
 import { Footer } from "@/shared/components/design-system/footer/Footer";
+// import { BaseHeaderLayoutSidebar } from "@/shared/components";
 
 type DaoParams = {
   daoId: string;
@@ -26,17 +26,21 @@ export default async function DaoLayout({ children, params }: DaoLayoutProps) {
 
   // For FULL, IN_ANALYSIS and ELECTION stages, render the layout with appropriate providers
   return (
-    <div className="bg-surface-background dark flex h-screen overflow-hidden">
-      <BaseHeaderLayoutSidebar>
-        <HeaderSidebar />
-        <HeaderDAOSidebar />
-      </BaseHeaderLayoutSidebar>
-      <main className="relative flex-1 overflow-auto lg:ml-[330px]">
-        <div className="md:hidden">
-          <StickyPageHeader />
+    <div className="bg-surface-background dark relative mx-auto flex h-screen max-w-screen-2xl">
+      <div className="active relative hidden h-screen lg:flex">
+        <div className="h-full w-[68px] shrink-0 overflow-y-auto">
+          <HeaderSidebar />
+        </div>
+        <div className="h-full shrink-0">
+          <HeaderDAOSidebar />
+        </div>
+      </div>
+      <main className="h-screen flex-1 overflow-auto">
+        <div className="lg:hidden">
           <HeaderMobile />
+          <StickyPageHeader />
         </div>
-        <div className="flex min-h-screen w-full flex-col items-center">
+        <div className="flex w-full flex-col items-center overflow-y-scroll lg:h-screen">
           <div className="w-full flex-1">{children}</div>
           <Footer />
         </div>

apps/dashboard/app/[daoId]/(main)/risk-analysis/page.tsx

@@ -99,31 +99,33 @@ export default async function RiskAnalysisPage({
   };
 
   return (
-    <TheSectionLayout
-      title={PAGES_CONSTANTS.riskAnalysis.title}
-      icon={<Gauge className="section-layout-icon" />}
-      description={PAGES_CONSTANTS.riskAnalysis.description}
-      riskLevel={<RiskLevelCard status={getHighestRiskLevel()} />}
-    >
-      <SubSectionsContainer>
-        <SubSection
-          subsectionTitle={PAGES_CONSTANTS.riskAnalysis.subTitle}
-          subsectionDescription={PAGES_CONSTANTS.riskAnalysis.subDescription}
-          dateRange=""
-        >
-          <RiskAnalysisSection daoId={daoIdEnum} />
-        </SubSection>
-        <DividerDefault isHorizontal />
-        <SubSection
-          subsectionTitle={PAGES_CONSTANTS.governanceImplementation.subTitle}
-          subsectionDescription={
-            PAGES_CONSTANTS.governanceImplementation.subDescription
-          }
-          dateRange=""
-        >
-          <GovernanceImplementationSection daoId={daoIdEnum} />
-        </SubSection>
-      </SubSectionsContainer>
-    </TheSectionLayout>
+    <div>
+      <TheSectionLayout
+        title={PAGES_CONSTANTS.riskAnalysis.title}
+        icon={<Gauge className="section-layout-icon" />}
+        description={PAGES_CONSTANTS.riskAnalysis.description}
+        riskLevel={<RiskLevelCard status={getHighestRiskLevel()} />}
+      >
+        <SubSectionsContainer>
+          <SubSection
+            subsectionTitle={PAGES_CONSTANTS.riskAnalysis.subTitle}
+            subsectionDescription={PAGES_CONSTANTS.riskAnalysis.subDescription}
+            dateRange=""
+          >
+            <RiskAnalysisSection daoId={daoIdEnum} />
+          </SubSection>
+          <DividerDefault isHorizontal />
+          <SubSection
+            subsectionTitle={PAGES_CONSTANTS.governanceImplementation.subTitle}
+            subsectionDescription={
+              PAGES_CONSTANTS.governanceImplementation.subDescription
+            }
+            dateRange=""
+          >
+            <GovernanceImplementationSection daoId={daoIdEnum} />
+          </SubSection>
+        </SubSectionsContainer>
+      </TheSectionLayout>
+    </div>
   );
 }

apps/dashboard/app/[daoId]/(main)/token-distribution/page.tsx

@@ -73,14 +73,16 @@ export default async function TokenDistributionPage({
   }
 
   return (
-    <TheSectionLayout
-      title={PAGES_CONSTANTS.tokenDistribution.title}
-      icon={<ArrowRightLeft className="section-layout-icon" />}
-      description={PAGES_CONSTANTS.tokenDistribution.description}
-    >
-      <SubSectionsContainer>
-        <TokenDistributionSection daoId={daoIdEnum} />
-      </SubSectionsContainer>
-    </TheSectionLayout>
+    <div>
+      <TheSectionLayout
+        title={PAGES_CONSTANTS.tokenDistribution.title}
+        icon={<ArrowRightLeft className="section-layout-icon" />}
+        description={PAGES_CONSTANTS.tokenDistribution.description}
+      >
+        <SubSectionsContainer>
+          <TokenDistributionSection daoId={daoIdEnum} />
+        </SubSectionsContainer>
+      </TheSectionLayout>
+    </div>
   );
 }

apps/dashboard/app/[daoId]/(secondary)/governance/page.tsx

@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
 import { DaoIdEnum } from "@/shared/types/daos";
-import { BaseHeaderLayoutSidebar } from "@/shared/components/";
 
 import { HeaderMobile } from "@/widgets/HeaderMobile";
 import { HeaderDAOSidebar, HeaderSidebar, StickyPageHeader } from "@/widgets";
@@ -65,14 +64,18 @@ export async function generateMetadata(props: Props): Promise<Metadata> {
 export default function DaoPage() {
   return (
     <div className="bg-surface-background dark flex h-screen overflow-hidden">
-      <BaseHeaderLayoutSidebar>
-        <HeaderSidebar />
-        <HeaderDAOSidebar />
-      </BaseHeaderLayoutSidebar>
-      <main className="relative flex-1 overflow-auto lg:ml-[330px]">
-        <div className="sm:hidden">
-          <StickyPageHeader />
+      <div className="active relative hidden h-screen lg:flex">
+        <div className="h-full w-[68px] shrink-0 overflow-y-auto">
+          <HeaderSidebar />
+        </div>
+        <div className="h-full shrink-0">
+          <HeaderDAOSidebar />
+        </div>
+      </div>
+      <main className="relative flex-1 overflow-auto">
+        <div className="lg:hidden">
           <HeaderMobile />
+          <StickyPageHeader />
         </div>
         <div className="flex min-h-screen w-full flex-col items-center">
           <div className="xl4k:max-w-7xl w-full flex-1">

apps/dashboard/app/[daoId]/(secondary)/governance/proposal/[proposalId]/loading.tsx

@@ -3,9 +3,9 @@ import { ProposalSectionSkeleton } from "@/features/governance/components/propos
 export default function Loading() {
   return (
     <div className="bg-surface-background dark flex h-screen overflow-hidden">
-      <main className="relative flex-1 overflow-auto pt-[57px] sm:ml-[70px] sm:pt-0">
+      <main className="relative flex-1 overflow-auto pt-[57px] lg:pt-0">
         <div className="flex min-h-screen w-full flex-col items-center">
-          <div className="xl4k:max-w-7xl w-full flex-1">
+          <div className="border-light-dark w-full max-w-screen-2xl flex-1 border">
             <ProposalSectionSkeleton />
           </div>
         </div>

apps/dashboard/app/[daoId]/(secondary)/governance/proposal/[proposalId]/page.tsx

@@ -61,12 +61,12 @@ export async function generateMetadata(props: Props): Promise<Metadata> {
 
 export default function ProposalPage() {
   return (
-    <div className="bg-surface-background dark flex h-screen overflow-hidden">
+    <div className="bg-surface-background border-light-dark dark flex h-screen max-w-screen-2xl overflow-hidden border">
       <BaseHeaderLayoutSidebar>
         <HeaderSidebar />
       </BaseHeaderLayoutSidebar>
-      <main className="relative flex-1 overflow-auto pt-[57px] sm:ml-[70px] sm:pt-0">
-        <div className="sm:hidden">
+      <main className="relative flex-1 overflow-auto pt-[57px] lg:pt-0">
+        <div className="lg:hidden">
           <HeaderMobile />
         </div>
         <div className="flex min-h-screen w-full flex-col items-center">

apps/dashboard/app/alerts/page.tsx

@@ -7,8 +7,8 @@ export default function DonatePage() {
   return (
     <div className="bg-surface-background dark flex h-screen overflow-hidden">
       <HeaderSidebar />
-      <main className="flex-1 overflow-auto sm:ml-[72px]">
-        <div className="sm:hidden">
+      <main className="flex-1 overflow-auto">
+        <div className="lg:hidden">
           <HeaderMobile overlayClassName="top-[57px]" />
         </div>
         <div className="flex min-h-screen w-full flex-col items-center">

apps/dashboard/app/contact/page.tsx

@@ -74,9 +74,9 @@ export default function ContactPage() {
   return (
     <div className="bg-surface-background dark flex h-screen">
       <HeaderSidebar />
-      <main className="flex-1 overflow-auto sm:ml-[72px]">
-        <div className="sm:hidden">
-          <div className="h-[57px] w-full sm:hidden" />
+      <main className="flex-1 overflow-auto">
+        <div className="lg:hidden">
+          <div className="h-[57px] w-full lg:hidden" />
           <HeaderMobile overlayClassName="top-[57px]" />
         </div>
         <div className="flex min-h-screen w-full flex-col items-center">

apps/dashboard/app/donate/page.tsx

@@ -7,8 +7,8 @@ export default function DonatePage() {
   return (
     <div className="bg-surface-background dark flex h-screen overflow-hidden">
       <HeaderSidebar />
-      <main className="flex-1 overflow-auto sm:ml-[72px]">
-        <div className="sm:hidden">
+      <main className="flex-1 overflow-auto">
+        <div className="lg:hidden">
           <HeaderMobile overlayClassName="top-[57px]" />
         </div>
         <div className="flex min-h-screen w-full flex-col items-center">

apps/dashboard/app/faq/page.tsx

@@ -7,9 +7,9 @@ export default function FAQPage() {
   return (
     <div className="bg-surface-background dark flex h-screen">
       <HeaderSidebar />
-      <main className="flex-1 overflow-auto sm:ml-[72px]">
-        <div className="sm:hidden">
-          <div className="h-[57px] w-full sm:hidden" />
+      <main className="flex-1 overflow-auto">
+        <div className="lg:hidden">
+          <div className="h-[57px] w-full lg:hidden" />
           <HeaderMobile overlayClassName="top-[57px]" />
         </div>
         <div className="flex min-h-screen w-full flex-col items-center">

apps/dashboard/app/glossary/page.tsx

@@ -39,9 +39,9 @@ export default function GlossaryPage() {
     <div className="bg-surface-background dark flex h-screen">
       <HeaderSidebar />
 
-      <main className="flex-1 overflow-auto sm:ml-[72px]">
-        <div className="sm:hidden">
-          <div className="h-[57px] w-full sm:hidden" />
+      <main className="flex-1 overflow-auto">
+        <div className="lg:hidden">
+          <div className="h-[57px] w-full lg:hidden" />
           <HeaderMobile overlayClassName="top-[57px]" />
         </div>
 
@@ -51,7 +51,7 @@ export default function GlossaryPage() {
               title={PAGES_CONSTANTS.glossary.title}
               icon={<BookOpen className="section-layout-icon" />}
               description={PAGES_CONSTANTS.glossary.description}
-              className="bg-surface-background! sm:mt-0! gap-4! lg:gap-6!"
+              className="bg-surface-background! lg:mt-0! gap-4! lg:gap-6!"
             >
               <div className="border-light-dark flex flex-col gap-2 border-t border-dashed py-5 lg:flex-row lg:gap-10 lg:border-none">
                 {/* Sticky Sidebar - Left Side */}

apps/dashboard/app/layout.tsx

@@ -67,7 +67,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
         />
       </head>
       <body
-        className={`${inter.className} ${roboto.variable} overflow-x-hidden xl:overflow-hidden`}
+        className={`${inter.className} ${roboto.variable} bg-surface-background border-light-dark mx-auto max-w-screen-2xl overflow-x-hidden border xl:overflow-hidden`}
       >
         <GlobalProviders>
           {children}

apps/dashboard/app/not-found.tsx

@@ -15,8 +15,8 @@ const NotFound = () => {
   return (
     <div className="bg-surface-background dark flex h-screen overflow-hidden">
       <HeaderSidebar />
-      <main className="flex-1 overflow-auto sm:ml-[72px]">
-        <div className="sm:hidden">
+      <main className="flex-1 overflow-auto">
+        <div className="lg:hidden">
           <HeaderMobile />
         </div>
         <div className="flex min-h-screen w-full flex-col items-center">
@@ -42,19 +42,19 @@ const NotFound = () => {
                 </p>
               </div>
 
-              <div className="mt-4 flex w-full flex-col items-center justify-center gap-2 md:flex-row">
+              <div className="mt-4 flex w-full flex-col items-center justify-center gap-2 lg:flex-row">
                 <Button
                   asChild
                   variant="primary"
-                  className="w-full md:w-auto"
+                  className="w-full lg:w-auto"
                   size="md"
                 >
                   <Link href="/">Go to Dashboard</Link>
                 </Button>
                 <Button
                   asChild
                   variant="outline"
-                  className="w-full md:w-auto"
+                  className="w-full lg:w-auto"
                   size="md"
                 >
                   <Link

apps/dashboard/app/page.tsx

@@ -7,9 +7,9 @@ export default function Home() {
   return (
     <div className="bg-surface-background dark flex h-screen overflow-hidden">
       <HeaderSidebar />
-      <main className="flex-1 overflow-auto sm:ml-[72px]">
-        <div className="sm:hidden">
-          <HeaderMobile />
+      <main className="flex-1 overflow-auto">
+        <div className="lg:hidden">
+          <HeaderMobile className="fixed! top-0" />
         </div>
         <div className="flex min-h-screen w-full flex-col items-center">
           <div className="w-full flex-1">

apps/dashboard/app/terms-of-service/page.tsx

@@ -7,8 +7,8 @@ export default function TermsPage() {
   return (
     <div className="bg-surface-background dark flex h-screen overflow-hidden">
       <HeaderSidebar />
-      <main className="flex-1 overflow-auto sm:ml-[72px]">
-        <div className="sm:hidden">
+      <main className="flex-1 overflow-auto">
+        <div className="lg:hidden">
           <HeaderMobile overlayClassName="top-[57px]" />
         </div>
         <div className="flex min-h-screen w-full flex-col items-center">