Enhance layout responsiveness by centering main content and adjusting sidebar behavior; update BottomNav styles for better alignment on larger screens.

client/src/App.tsx

@@ -49,7 +49,12 @@ function App() {
           <TooltipProvider>
             <Toaster />
             <Router base="/x8/v2/public">
-              <AppRouter />
+              {/* Desktop: narrow shell centered in the browser with side gutters */}
+              <div className="min-h-dvh bg-[#0d1117]">
+                <div className="mx-auto min-h-dvh w-full max-w-full lg:max-w-[min(1180px,calc(100vw-3rem))]">
+                  <AppRouter />
+                </div>
+              </div>
             </Router>
           </TooltipProvider>
         </DeviceProvider>

client/src/components/BottomNav.tsx

@@ -35,7 +35,7 @@ export default function BottomNav() {
 
   return (
     <nav
-      className="fixed bottom-0 left-0 right-0 z-50"
+      className="fixed bottom-0 left-0 right-0 z-50 lg:left-1/2 lg:right-auto lg:w-[min(1180px,calc(100vw-3rem))] lg:-translate-x-1/2"
       style={{
         background: "rgba(10, 10, 12, 0.96)",
         backdropFilter: "blur(40px) saturate(200%)",

client/src/components/Layout.tsx

@@ -24,13 +24,13 @@ export default function Layout({ children, title, subtitle }: LayoutProps) {
       <StatusBar />
 
       <div className="flex min-w-0 flex-1">
-        {/* Desktop sidebar — hidden on mobile */}
+        {/* Desktop sidebar — hidden on mobile (in flow so it stays inside centered shell) */}
-        <div className="hidden lg:block">
+        <div className="hidden shrink-0 lg:flex">
           <Sidebar />
         </div>
 
         {/* Main content area */}
-        <div className="flex min-h-screen min-w-0 flex-1 flex-col max-lg:overflow-x-hidden lg:ml-[220px]">
+        <div className="flex min-h-screen min-w-0 flex-1 flex-col max-lg:overflow-x-hidden">
           <TopBar title={title} subtitle={subtitle} />
         <main
           className="min-w-0 flex-1 overflow-y-auto p-4 md:p-6 max-lg:overflow-x-hidden"

client/src/components/Sidebar.tsx

@@ -40,7 +40,7 @@ export default function Sidebar() {
   const { deviceState, isConnected, isDemoMode } = useDevice();
 
   return (
-    <aside className="glass-sidebar fixed left-0 top-0 h-full w-[220px] z-40 flex flex-col">
+    <aside className="glass-sidebar sticky top-0 z-40 flex h-screen w-[220px] shrink-0 flex-col self-start lg:border-r lg:border-white/[0.06]">
       {/* Logo */}
       <div className="px-5 pt-6 pb-4">
         <div className="flex items-center gap-3">