From 9535f49f23e65e4b72eb27da6624f3c3146bfdf2 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Wed, 3 Jun 2026 11:28:10 +0800
Subject: [PATCH] fix(web): improve mobile AwoooP shell width

---
 apps/web/src/app/[locale]/awooop/layout.tsx          | 6 +++---
 apps/web/src/app/[locale]/awooop/work-items/page.tsx | 2 +-
 apps/web/src/components/layout/app-layout.tsx        | 5 +++--
 apps/web/src/components/layout/sidebar.tsx           | 5 ++++-
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/app/[locale]/awooop/layout.tsx b/apps/web/src/app/[locale]/awooop/layout.tsx
index 0cfa20ff..4fcf24bf 100644
--- a/apps/web/src/app/[locale]/awooop/layout.tsx
+++ b/apps/web/src/app/[locale]/awooop/layout.tsx
@@ -58,8 +58,8 @@ export default function AwoooPLayout({
 
   return (
     <AppLayout locale={params.locale} showBackground={false}>
-      <div className="min-h-[calc(100vh-116px)] w-[calc(100vw-48px)] max-w-full overflow-x-hidden border border-[#e0ddd4] bg-[#f7f5ee] md:w-full">
-        <div className="border-b border-[#e0ddd4] bg-[#faf9f3] px-5 py-4">
+      <div className="min-h-[calc(100vh-116px)] w-full max-w-full overflow-x-hidden border border-[#e0ddd4] bg-[#f7f5ee]">
+        <div className="border-b border-[#e0ddd4] bg-[#faf9f3] px-3 py-4 sm:px-5">
           <div className="flex flex-wrap items-center justify-between gap-3">
             <div className="flex items-center gap-3">
               <span className="flex h-9 w-9 items-center justify-center border border-[#d8d3c7] bg-white text-[#141413]">
@@ -113,7 +113,7 @@ export default function AwoooPLayout({
           </nav>
         </div>
 
-        <main className="px-5 py-5">{children}</main>
+        <main className="px-3 py-4 sm:px-5 sm:py-5">{children}</main>
       </div>
     </AppLayout>
   );
diff --git a/apps/web/src/app/[locale]/awooop/work-items/page.tsx b/apps/web/src/app/[locale]/awooop/work-items/page.tsx
index e0e90a7e..5097d5b6 100644
--- a/apps/web/src/app/[locale]/awooop/work-items/page.tsx
+++ b/apps/web/src/app/[locale]/awooop/work-items/page.tsx
@@ -4418,7 +4418,7 @@ function KnowledgeGovernancePanel({
             </span>
           </div>
         </div>
-        <div className="mb-3 border border-[#e0ddd4] bg-white px-3 py-3 text-xs text-[#5f5b52]">
+        <div id="owner-review-rail" className="mb-3 scroll-mt-24 border border-[#e0ddd4] bg-white px-3 py-3 text-xs text-[#5f5b52]">
           <div className="flex flex-wrap items-start justify-between gap-3">
             <div className="min-w-0">
               <div className="flex items-center gap-2">
diff --git a/apps/web/src/components/layout/app-layout.tsx b/apps/web/src/components/layout/app-layout.tsx
index 69a63fda..85ed4410 100644
--- a/apps/web/src/components/layout/app-layout.tsx
+++ b/apps/web/src/components/layout/app-layout.tsx
@@ -120,6 +120,7 @@ export function AppLayout({
       <Sidebar
         locale={locale}
         collapsed={shellCollapsed}
+        compact={mobileShell}
         onToggle={handleToggle}
       />
 
@@ -136,14 +137,14 @@ export function AppLayout({
           'relative z-10',
           'pt-[68px]',
           'transition-all duration-300 ease-out',
-          shellCollapsed ? 'ml-16' : 'ml-[224px]'
+          mobileShell ? 'ml-[48px]' : shellCollapsed ? 'ml-[64px]' : 'ml-[224px]'
         )}
       >
         {fullBleed ? (
           // fullBleed: 無 p-6，children 自行控制佈局（主頁用）
           children
         ) : (
-          <div className="p-6">
+          <div className="p-3 sm:p-4 lg:p-6">
             {children}
           </div>
         )}
diff --git a/apps/web/src/components/layout/sidebar.tsx b/apps/web/src/components/layout/sidebar.tsx
index 5e0cb3b5..6db347c9 100644
--- a/apps/web/src/components/layout/sidebar.tsx
+++ b/apps/web/src/components/layout/sidebar.tsx
@@ -45,6 +45,7 @@ import { useApprovalStore } from '@/stores/approval.store'
 interface SidebarProps {
   locale: string
   collapsed?: boolean
+  compact?: boolean
   onToggle?: () => void
   className?: string
 }
@@ -113,6 +114,7 @@ const BOTTOM_NAV_ITEMS: NavItemConfig[] = [
 export function Sidebar({
   locale,
   collapsed = false,
+  compact = false,
   onToggle,
   className,
 }: SidebarProps) {
@@ -143,6 +145,7 @@ export function Sidebar({
   const isActive = (item: NavItemConfig) => (
     isRouteActive(item.href) || item.aliases?.some(alias => isRouteActive(alias)) === true
   )
+  const sidebarWidth = compact && collapsed ? 48 : collapsed ? 64 : 224
 
   return (
     <aside
@@ -156,7 +159,7 @@ export function Sidebar({
         zIndex: Z_INDEX.SIDEBAR,
         background: '#faf9f3',
         borderRight: '0.5px solid #e0ddd4',
-        width: collapsed ? 64 : 224,
+        width: sidebarWidth,
         transition: 'width 0.3s ease',
       }}
     >