From 81174c2498ae176089e2fa728f0a83a53a2b8bd6 Mon Sep 17 00:00:00 2001
From: Matthias Hochmeister <matthias.hochmeister@apple.com>
Date: Thu, 12 Mar 2026 14:23:57 +0100
Subject: [PATCH] layout issues

---
 frontend/src/components/chat/ChatPanel.tsx           |  9 +++++++--
 .../src/components/dashboard/DashboardLayout.tsx     |  1 +
 frontend/src/components/shared/Header.tsx            | 12 ++++++++++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/chat/ChatPanel.tsx b/frontend/src/components/chat/ChatPanel.tsx
index a72daa0..f4aff06 100644
--- a/frontend/src/components/chat/ChatPanel.tsx
+++ b/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',
diff --git a/frontend/src/components/dashboard/DashboardLayout.tsx b/frontend/src/components/dashboard/DashboardLayout.tsx
index 5a159f0..f983ca2 100644
--- a/frontend/src/components/dashboard/DashboardLayout.tsx
+++ b/frontend/src/components/dashboard/DashboardLayout.tsx
@@ -41,6 +41,7 @@ function DashboardLayoutInner({ children }: DashboardLayoutProps) {
           minHeight: '100vh',
           backgroundColor: 'background.default',
           transition: 'width 225ms cubic-bezier(0.4, 0, 0.6, 1)',
+          minWidth: 0,
         }}
       >
         <Toolbar />
diff --git a/frontend/src/components/shared/Header.tsx b/frontend/src/components/shared/Header.tsx
index e6cd8a7..7593597 100644
--- a/frontend/src/components/shared/Header.tsx
+++ b/frontend/src/components/shared/Header.tsx
@@ -139,9 +139,21 @@ function Header({ onMenuClick }: HeaderProps) {
                     aria-label="FF Rems Tools"
                     aria-controls="tools-menu"
                     aria-haspopup="true"
+                    sx={{ display: { xs: 'none', sm: 'inline-flex' } }}
                   >
                     FF Rems Tools
                   </Button>
+                <Tooltip title="FF Rems Tools">
+                  <IconButton
+                    color="inherit"
+                    onClick={handleToolsOpen}
+                    size="small"
+                    aria-label="FF Rems Tools"
+                    sx={{ display: { xs: 'inline-flex', sm: 'none' } }}
+                  >
+                    <Launch />
+                  </IconButton>
+                </Tooltip>
 
                 <Menu
                   id="tools-menu"