1

video-gen-app/src/components/Layout/AppLayout.tsx

@@ -917,13 +917,14 @@ const AppLayout: React.FC = () => {
       minHeight: '100vh',
     }}>
       <ActivityBanner onVisibilityChange={(v) => setBannerVisible(v)} />
+      <div style={{ display: 'flex', position: 'relative', padding: '16px 16px 16px 16px' }}>
       <div className="desktop-sidebar" style={{
-        width: sidebarW, position: 'fixed', left: 16, top: bannerVisible ? 44 : 16, bottom: 16, zIndex: 100,
+        width: sidebarW, position: 'absolute', left: 16, top: 16, bottom: 16, zIndex: 100,
         background: 'linear-gradient(180deg, #ffffff 0%, #f8fafc 100%)',
         borderRadius: '20px',
         boxShadow: '0 4px 32px rgba(0, 0, 0, 0.06), 0 1px 8px rgba(0, 0, 0, 0.04)',
         display: 'flex', flexDirection: 'column',
-        transition: 'top 0.2s ease, width 0.25s ease, left 0.25s ease',
+        transition: 'width 0.25s ease',
         overflow: 'hidden',
         border: '1px solid rgba(0, 0, 0, 0.06)',
       }}>
@@ -1137,15 +1138,11 @@ const AppLayout: React.FC = () => {
       </div>
 
       <div className="desktop-content" style={{
-        marginLeft: sidebarW + 28,
-        marginRight: 12,
-        marginTop: 8,
-        marginBottom: 16,
+        marginLeft: sidebarW + 12,
         flex: 1,
         minHeight: 'calc(100vh - 32px)',
         background: 'transparent',
         padding: 0,
-        transition: 'margin-left 0.25s ease',
       }}>
         <div style={{
           boxSizing: 'border-box',
@@ -1160,6 +1157,7 @@ const AppLayout: React.FC = () => {
           {!isMobile && <Outlet />}
         </div>
       </div>
+      </div>
 
       <div className="mobile-header">
         <div className="mobile-header-content">