fix(chat): reduce user message padding and hide top scroll shadow on mobile (#496)

* fix(chat): reduce user message padding on mobile

* fix(mobile): limit drawer swipe gesture to status bar only

* fix(chat): hide top scroll shadow on mobile

* fix: add mobile edge-swipe drawer fallback and normalize comments

- Adds narrow left/right mobile edge swipe zones for drawer gestures
- Keeps drawer swipe access even when the mobile status bar is hidden
- Replaces remaining non-English comments in touched chat/layout files

* fix: remove edge swipe settings and tighten mobile chat spacing

---------

Co-authored-by: Jovines <jovines@qq.com>
Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>

packages/ui/src/components/chat/ChatContainer.tsx

@@ -523,6 +523,7 @@ export const ChatContainer: React.FC = () => {
                         className="absolute inset-0 overflow-y-auto overflow-x-hidden z-0 chat-scroll overlay-scrollbar-target"
                         ref={scrollRef}
                         observeMutations={false}
+                        hideTopShadow={isMobile}
                         data-scroll-shadow="true"
                         data-scrollbar="chat"
                     >

packages/ui/src/components/chat/ChatInput.tsx

@@ -2319,7 +2319,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                         )}
                     </div>
 
-                    {/* Mobile Session Status Bar - 在输入框上方 */}
+                    {/* Mobile Session Status Bar - above input */}
                     {isMobile && <MobileSessionStatusBar cornerRadius={cornerRadius} />}
                 </div>
             </div>

packages/ui/src/components/chat/ChatMessage.tsx

@@ -909,7 +909,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
             <div
                 className={cn(
                     'group w-full',
-                    shouldShowHeader ? (isMobile ? 'pt-10' : 'pt-6') : 'pt-0',
+                    isUser ? (isMobile ? 'pt-2' : 'pt-6') : (shouldShowHeader ? (isMobile ? 'pt-10' : 'pt-6') : 'pt-0'),
                     isUser ? 'pb-0' : isFollowedByAssistant ? 'pb-0' : 'pb-8'
                 )}
                 data-message-id={message.info.id}

packages/ui/src/components/chat/MessageList.tsx

@@ -12,6 +12,7 @@ import { filterSyntheticParts } from '@/lib/messages/synthetic';
 import { detectTurns, type Turn } from './hooks/useTurnGrouping';
 import { TurnGroupingProvider, useMessageNeighbors, useTurnGroupingContextForMessage, useTurnGroupingContextStatic, useLastTurnMessageIds } from './contexts/TurnGroupingContext';
 import { useSessionStore } from '@/stores/useSessionStore';
+import { useDeviceInfo } from '@/lib/device';
 
 interface ChatMessageEntry {
     info: Message;
@@ -421,6 +422,7 @@ const MessageList: React.FC<MessageListProps> = ({
     onRenderEarlier,
     scrollToBottom,
 }) => {
+    const { isMobile } = useDeviceInfo();
     React.useEffect(() => {
         if (permissions.length === 0 && questions.length === 0) {
             return;
@@ -641,8 +643,8 @@ const MessageList: React.FC<MessageListProps> = ({
                     </div>
                 )}
 
-                {/* Bottom spacer - always 10% of viewport height */}
+                {/* Bottom spacer */}
-                <div className="flex-shrink-0" style={{ height: '10vh' }} aria-hidden="true" />
+                <div className="flex-shrink-0" style={{ height: isMobile ? '8px' : '10vh' }} aria-hidden="true" />
             </div>
         </TurnGroupingProvider>
     );

packages/ui/src/components/layout/MainLayout.tsx

@@ -21,12 +21,11 @@ import { useUIStore } from '@/stores/useUIStore';
 import { useUpdateStore } from '@/stores/useUpdateStore';
 import { useDeviceInfo } from '@/lib/device';
 import { useEffectiveDirectory } from '@/hooks/useEffectiveDirectory';
-import { useDrawerSwipe } from '@/hooks/useDrawerSwipe';
 import { cn } from '@/lib/utils';
 
 import { ChatView, PlanView, GitView, DiffView, TerminalView, FilesView, SettingsView, SettingsWindow } from '@/components/views';
 
-// 移动端抽屉宽度（占屏幕比例）
+// Mobile drawer width as screen percentage
 const MOBILE_DRAWER_WIDTH_PERCENT = 85;
 
 const normalizeDirectoryKey = (value: string): string => {
@@ -48,26 +47,6 @@ const normalizeDirectoryKey = (value: string): string => {
     return normalized;
 };
 
-const MobileDrawerGestureSurface: React.FC<{
-    className?: string;
-    style?: React.CSSProperties;
-    children: React.ReactNode;
-}> = ({ className, style, children }) => {
-    const { handleTouchStart, handleTouchMove, handleTouchEnd } = useDrawerSwipe();
-
-    return (
-        <div
-            className={className}
-            style={style}
-            onTouchStart={handleTouchStart}
-            onTouchMove={handleTouchMove}
-            onTouchEnd={handleTouchEnd}
-        >
-            {children}
-        </div>
-    );
-};
-
 export const MainLayout: React.FC = () => {
     const RIGHT_SIDEBAR_AUTO_CLOSE_WIDTH = 1140;
     const RIGHT_SIDEBAR_AUTO_OPEN_WIDTH = 1220;
@@ -104,19 +83,19 @@ export const MainLayout: React.FC = () => {
     const bottomTerminalAutoClosedRef = React.useRef(false);
     const leftSidebarAutoClosedByContextRef = React.useRef(false);
 
-    // 移动端抽屉状态
+    // Mobile drawer state
     const [mobileLeftDrawerOpen, setMobileLeftDrawerOpen] = React.useState(false);
     const mobileRightDrawerOpenRef = React.useRef(false);
 
-    // 左抽屉 motion value
+    // Left drawer motion value
     const leftDrawerX = useMotionValue(0);
     const leftDrawerWidth = useRef(0);
 
-    // 右抽屉 motion value
+    // Right drawer motion value
     const rightDrawerX = useMotionValue(0);
     const rightDrawerWidth = useRef(0);
 
-    // 计算抽屉宽度
+    // Compute drawer width
     useEffect(() => {
         if (isMobile) {
             leftDrawerWidth.current = window.innerWidth * (MOBILE_DRAWER_WIDTH_PERCENT / 100);
@@ -124,7 +103,7 @@ export const MainLayout: React.FC = () => {
         }
     }, [isMobile]);
 
-    // 同步左抽屉 state 和 motion value
+    // Sync left drawer state and motion value
     useEffect(() => {
         if (!isMobile) return;
         const targetX = mobileLeftDrawerOpen ? 0 : -leftDrawerWidth.current;
@@ -136,7 +115,7 @@ export const MainLayout: React.FC = () => {
         });
     }, [mobileLeftDrawerOpen, isMobile, leftDrawerX]);
 
-    // 同步右抽屉 state 和 motion value
+    // Sync right drawer state and motion value
     useEffect(() => {
         if (!isMobile) return;
         mobileRightDrawerOpenRef.current = isRightSidebarOpen;
@@ -149,14 +128,14 @@ export const MainLayout: React.FC = () => {
         });
     }, [isMobile, isRightSidebarOpen, rightDrawerX]);
 
-    // 同步 session switcher 状态到左抽屉 (单向同步，避免循环)
+    // Sync session switcher state to left drawer (one-way)
     useEffect(() => {
         if (isMobile) {
             setMobileLeftDrawerOpen(isSessionSwitcherOpen);
         }
     }, [isSessionSwitcherOpen, isMobile]);
 
-    // 同步右抽屉和 git sidebar 状态
+    // Sync right drawer and git sidebar state
     useEffect(() => {
         if (isMobile) {
             mobileRightDrawerOpenRef.current = isRightSidebarOpen;
@@ -607,7 +586,7 @@ export const MainLayout: React.FC = () => {
                     setMobileLeftDrawerOpen,
                     setRightSidebarOpen,
                 }}>
-                    {/* Mobile: Header + Drawer 模式 */}
+                    {/* Mobile: header + drawer mode */}
                     {!(isSettingsDialogOpen || isMultiRunLauncherOpen) && <Header 
                         onToggleLeftDrawer={() => {
                             if (isRightSidebarOpen) {
@@ -625,7 +604,7 @@ export const MainLayout: React.FC = () => {
                         rightDrawerOpen={isRightSidebarOpen}
                     />}
                     
-                    {/* 遮罩层 */}
+                    {/* Backdrop */}
                     <motion.button
                         type="button"
                         initial={false}
@@ -641,7 +620,7 @@ export const MainLayout: React.FC = () => {
                         aria-label="Close drawer"
                     />
                     
-                    {/* 左抽屉（Session） */}
+                    {/* Left drawer (Session) */}
                     <motion.aside
                         drag="x"
                         dragElastic={0.08}
@@ -702,7 +681,7 @@ export const MainLayout: React.FC = () => {
                         </div>
                     </motion.aside>
                     
-                    {/* 右抽屉（Git） */}
+                    {/* Right drawer (Git) */}
                     <motion.aside
                         drag="x"
                         dragElastic={0.08}
@@ -748,8 +727,8 @@ export const MainLayout: React.FC = () => {
                         </div>
                     </motion.aside>
                     
-                    {/* 主内容区（固定） */}
+                    {/* Main content area (fixed) */}
-                    <MobileDrawerGestureSurface
+                    <div
                         className={cn(
                             'flex flex-1 overflow-hidden relative',
                             (isSettingsDialogOpen || isMultiRunLauncherOpen) && 'hidden'
@@ -766,7 +745,7 @@ export const MainLayout: React.FC = () => {
                                 </div>
                             )}
                         </main>
-                    </MobileDrawerGestureSurface>
+                    </div>
 
                     {/* Mobile multi-run launcher: full screen */}
                     {isMultiRunLauncherOpen && (

packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx

@@ -134,7 +134,6 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
     } = useThemeSystem();
 
     const [themesReloading, setThemesReloading] = React.useState(false);
-
     const lightThemes = React.useMemo(
         () => availableThemes
             .filter((theme) => theme.metadata.variant === 'light')

packages/ui/src/components/ui/ScrollShadow.tsx

@@ -5,6 +5,7 @@ export type ScrollShadowProps = React.HTMLAttributes<HTMLDivElement> & {
   offset?: number;
   size?: number;
   isEnabled?: boolean;
+  hideTopShadow?: boolean;
   hideBottomShadow?: boolean;
   observeMutations?: boolean;
   onVisibilityChange?: (state: "both" | "none" | "top" | "bottom" | "left" | "right") => void;
@@ -29,6 +30,7 @@ export const ScrollShadow = React.forwardRef<HTMLDivElement, ScrollShadowProps>(
         offset = 0,
         size = 48,
         isEnabled = true,
+        hideTopShadow = false,
         hideBottomShadow = false,
         observeMutations = true,
         onVisibilityChange,
@@ -91,18 +93,20 @@ export const ScrollShadow = React.forwardRef<HTMLDivElement, ScrollShadowProps>(
           ? el.scrollTop + el.clientHeight + offset < el.scrollHeight
           : el.scrollLeft + el.clientWidth + offset < el.scrollWidth;
 
+      const effectiveHasBefore = hideTopShadow && orientation === "vertical" ? false : hasBefore;
+
       if (hideBottomShadow && orientation === "vertical") {
         hasAfter = false;
       }
 
-      setAttributes(el, hasBefore, hasAfter, orientation === "vertical" ? "top" : "left", orientation === "vertical" ? "bottom" : "right");
+      setAttributes(el, effectiveHasBefore, hasAfter, orientation === "vertical" ? "top" : "left", orientation === "vertical" ? "bottom" : "right");
 
-      const next = hasBefore && hasAfter ? "both" : hasBefore ? (orientation === "vertical" ? "top" : "left") : hasAfter ? (orientation === "vertical" ? "bottom" : "right") : "none";
+      const next = effectiveHasBefore && hasAfter ? "both" : effectiveHasBefore ? (orientation === "vertical" ? "top" : "left") : hasAfter ? (orientation === "vertical" ? "bottom" : "right") : "none";
       if (next !== visibleRef.current) {
         visibleRef.current = next;
         onVisibilityChange?.(next);
       }
-    }, [clearAttributes, hideBottomShadow, isEnabled, offset, onVisibilityChange, orientation, setAttributes]);
+    }, [clearAttributes, hideTopShadow, hideBottomShadow, isEnabled, offset, onVisibilityChange, orientation, setAttributes]);
 
     React.useEffect(() => {
       const el = internalRef.current;

packages/ui/src/hooks/useDrawerSwipe.ts

@@ -2,8 +2,23 @@ import React from 'react';
 import { animate } from 'motion/react';
 import { useDrawer } from '@/contexts/DrawerContext';
 
-export function useDrawerSwipe() {
+type DrawerSwipeOptions = {
+  edgeSide?: 'left' | 'right';
+  strictHorizontalIntent?: boolean;
+  horizontalIntentRatio?: number;
+  activationDistance?: number;
+  onlyWhenClosed?: boolean;
+};
+
+export function useDrawerSwipe(options: DrawerSwipeOptions = {}) {
   const drawer = useDrawer();
+  const {
+    edgeSide,
+    strictHorizontalIntent = false,
+    horizontalIntentRatio = 1.35,
+    activationDistance = 30,
+    onlyWhenClosed = false,
+  } = options;
   const touchStartXRef = React.useRef(0);
   const touchStartYRef = React.useRef(0);
   const isHorizontalSwipeRef = React.useRef<boolean | null>(null);
@@ -24,30 +39,50 @@ export function useDrawerSwipe() {
 
     if (isHorizontalSwipeRef.current === null) {
       if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
-        isHorizontalSwipeRef.current = Math.abs(deltaX) > Math.abs(deltaY);
+        if (strictHorizontalIntent) {
+          isHorizontalSwipeRef.current = Math.abs(deltaX) > Math.abs(deltaY) * horizontalIntentRatio;
+        } else {
+          isHorizontalSwipeRef.current = Math.abs(deltaX) > Math.abs(deltaY);
+        }
       }
     }
 
     if (isHorizontalSwipeRef.current === true) {
-      e.preventDefault();
+      if (onlyWhenClosed && (drawer.leftDrawerOpen || drawer.rightDrawerOpen)) {
+        return;
+      }
 
       const leftDrawerWidthPx = drawer.leftDrawerWidth.current || window.innerWidth * 0.85;
       const rightDrawerWidthPx = drawer.rightDrawerWidth.current || window.innerWidth * 0.85;
 
       if (isDraggingDrawerRef.current === null) {
-        if (drawer.leftDrawerOpen && deltaX > 10) {
+        if (!edgeSide && drawer.leftDrawerOpen && deltaX > 10) {
           isDraggingDrawerRef.current = 'left';
-        } else if (drawer.rightDrawerOpen && deltaX < -10) {
+        } else if (!edgeSide && drawer.rightDrawerOpen && deltaX < -10) {
           isDraggingDrawerRef.current = 'right';
         } else if (!drawer.leftDrawerOpen && !drawer.rightDrawerOpen) {
-          if (deltaX > 30) {
+          if (edgeSide === 'left') {
+            if (deltaX > activationDistance) {
+              isDraggingDrawerRef.current = 'left';
+            }
+          } else if (edgeSide === 'right') {
+            if (deltaX < -activationDistance) {
+              isDraggingDrawerRef.current = 'right';
+            }
+          } else if (deltaX > activationDistance) {
             isDraggingDrawerRef.current = 'left';
-          } else if (deltaX < -30) {
+          } else if (deltaX < -activationDistance) {
             isDraggingDrawerRef.current = 'right';
           }
         }
       }
 
+      if (!isDraggingDrawerRef.current) {
+        return;
+      }
+
+      e.preventDefault();
+
       if (isDraggingDrawerRef.current === 'left') {
         if (drawer.leftDrawerOpen) {
           const progress = Math.max(0, Math.min(1, deltaX / leftDrawerWidthPx));
@@ -68,7 +103,7 @@ export function useDrawerSwipe() {
         }
       }
     }
-  }, [drawer]);
+  }, [activationDistance, drawer, edgeSide, horizontalIntentRatio, onlyWhenClosed, strictHorizontalIntent]);
 
   const handleTouchEnd = React.useCallback((e: React.TouchEvent) => {
     if (isHorizontalSwipeRef.current !== true) return;