update HubLayout component to center main content area with max width (#814)

* update HubLayout component to center main content area with max width

* fix: adjust padding in Sidebar and Dashboard

* chore: resolve feedback

---------

Co-authored-by: nonuwa-oss <[email protected]>
Co-authored-by: iamonuwa <[email protected]>

Author: nonuwa-oss

.changeset/nasty-hairs-knock.md

@@ -0,0 +1,5 @@
+---
+'hub': patch
+---
+
+set a max layout width for hub layout

apps/hub/src/app/_components/hub-layout.tsx

@@ -20,7 +20,7 @@ export function HubLayout({ children }: HubLayoutProps) {
 
       {/* Main Content Area */}
       <div className="relative w-full overflow-hidden rounded-20 bg-white-100">
-        <div className="flex h-[calc(100vh-64px-123px)] w-full flex-row overflow-hidden lg:h-[calc(100vh-64px-50px)]">
+        <div className="mx-auto flex h-[calc(100vh-64px-123px)] w-full max-w-[1504px] flex-row overflow-hidden lg:h-[calc(100vh-64px-50px)]">
           {/* Sidebar */}
           <Sidebar isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
 

apps/hub/src/app/_components/sidebar.tsx

@@ -104,7 +104,7 @@ const Sidebar = (props: Props) => {
       >
         <div className="flex h-full flex-col overflow-auto py-8">
           {/* Main Navigation */}
-          <nav className="flex-1 px-4">
+          <nav className="flex-1 px-6">
             <ul className="space-y-1">
               {NAV_LINKS.map(item => {
                 return <LinkItem key={item.id} {...item} />

apps/hub/src/app/dashboard/page.tsx

@@ -15,7 +15,7 @@ const REWARDS = ['karma', 'linea', 'snt']
 export default function DashboardPage() {
   return (
     <HubLayout>
-      <div className="flex flex-col p-8">
+      <div className="flex flex-col px-6 py-8">
         {/* Hero Section */}
         <Hero />