layout issues

frontend/src/components/chat/ChatPanel.tsx

@@ -30,7 +30,7 @@ const ChatPanelInner: React.FC = () => {
         sx={{
           width: COLLAPSED_WIDTH,
           height: '100%',
-          display: 'flex',
+          display: { xs: 'none', sm: 'flex' },
           flexDirection: 'column',
           alignItems: 'center',
           pt: 1,
@@ -89,7 +89,12 @@ const ChatPanelInner: React.FC = () => {
     <Paper
       elevation={2}
       sx={{
-        width: EXPANDED_WIDTH,
+        width: { xs: '100vw', sm: EXPANDED_WIDTH },
+        position: { xs: 'fixed', sm: 'relative' },
+        top: { xs: 0, sm: 'auto' },
+        right: { xs: 0, sm: 'auto' },
+        bottom: { xs: 0, sm: 'auto' },
+        zIndex: { xs: (theme) => theme.zIndex.drawer + 2, sm: 'auto' },
         height: '100%',
         display: 'flex',
         flexDirection: 'column',