From c7459fb0975c981f32021da542097b80ec8540f6 Mon Sep 17 00:00:00 2001
From: yangy <eafonyang@gamilc.com>
Date: Wed, 29 Apr 2026 10:14:25 +0800
Subject: [PATCH] Enhance layout responsiveness by centering main content and
 adjusting sidebar behavior; update BottomNav styles for better alignment on
 larger screens.

---
 client/src/App.tsx                  | 7 ++++++-
 client/src/components/BottomNav.tsx | 2 +-
 client/src/components/Layout.tsx    | 6 +++---
 client/src/components/Sidebar.tsx   | 2 +-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 45bf58c..a007891 100644
--- a/client/src/App.tsx
+++ b/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>
diff --git a/client/src/components/BottomNav.tsx b/client/src/components/BottomNav.tsx
index 615ed31..c3bf0bc 100644
--- a/client/src/components/BottomNav.tsx
+++ b/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%)",
diff --git a/client/src/components/Layout.tsx b/client/src/components/Layout.tsx
index 6a8043a..91989c1 100644
--- a/client/src/components/Layout.tsx
+++ b/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 */}
-        <div className="hidden lg:block">
+        {/* Desktop sidebar — hidden on mobile (in flow so it stays inside centered shell) */}
+        <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"
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index 9c07ee6..132aec7 100644
--- a/client/src/components/Sidebar.tsx
+++ b/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">