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 */}
-                <div className="flex-shrink-0" style={{ height: '10vh' }} aria-hidden="true" />
+                {/* Bottom spacer */}
+                <div className="flex-shrink-0" style={{ height: isMobile ? '8px' : '10vh' }} aria-hidden="true" />
             </div>
         </TurnGroupingProvider>
     );