From f8f26586539ad0c1a5463418527bdd28e2d157e4 Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Sun, 5 Oct 2025 22:21:03 +0200
Subject: [PATCH] chat windows full screen in mobileVertical

---
 src/components/ChatAssistant.js | 118 +++++++++++++++++---------------
 1 file changed, 61 insertions(+), 57 deletions(-)

diff --git a/src/components/ChatAssistant.js b/src/components/ChatAssistant.js
index b9076f4..93b7c69 100644
--- a/src/components/ChatAssistant.js
+++ b/src/components/ChatAssistant.js
@@ -461,20 +461,20 @@ class ChatAssistant extends Component {
     const inputsDisabled = isGuest && !privacyConfirmed;
 
     return (
-      <Paper 
-        elevation={4} 
+      <Paper
+        elevation={4}
         sx={{
           position: 'fixed',
-          bottom: { xs: 16, sm: 80 },
-          right: { xs: 16, sm: 16 },
-          left: { xs: 16, sm: 'auto' },
-          top: { xs: 16, sm: 'auto' },
-          width: { xs: 'calc(100vw - 32px)', sm: 450, md: 600, lg: 750 },
-          height: { xs: 'calc(100vh - 32px)', sm: 600, md: 650, lg: 700 },
+          bottom: { xs: 0, sm: 80 },
+          right: { xs: 0, sm: 16 },
+          left: { xs: 0, sm: 'auto' },
+          top: { xs: 0, sm: 'auto' },
+          width: { xs: '100vw', sm: 450, md: 600, lg: 750 },
+          height: { xs: '100vh', sm: 600, md: 650, lg: 700 },
           maxWidth: { xs: 'none', sm: 450, md: 600, lg: 750 },
-          maxHeight: { xs: 'calc(100vh - 72px)', sm: 600, md: 650, lg: 700 },
+          maxHeight: { xs: '100vh', sm: 600, md: 650, lg: 700 },
           bgcolor: 'background.paper',
-          borderRadius: 2,
+          borderRadius: { xs: 0, sm: 2 },
           display: 'flex',
           flexDirection: 'column',
           zIndex: 1300,
@@ -563,11 +563,13 @@ class ChatAssistant extends Component {
           )}
           <div ref={this.messagesEndRef} />
         </Box>
-        <Box 
-          sx={{ 
-            display: 'flex', 
-            p: 1, 
-            borderTop: 1, 
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: { xs: 'column', sm: 'row' },
+            gap: { xs: 1, sm: 0 },
+            p: 1,
+            borderTop: 1,
             borderColor: 'divider',
             flexShrink: 0,
           }}
@@ -579,22 +581,22 @@ class ChatAssistant extends Component {
             onChange={this.handleFileChange}
             style={{ display: 'none' }}
           />
-          <TextField 
-            fullWidth 
-            variant="outlined" 
+          <TextField
+            fullWidth
+            variant="outlined"
             size="small"
             autoComplete="off"
             autoFocus
             autoCapitalize="off"
             autoCorrect="off"
-            placeholder={isRecording ? "Aufnahme läuft..." : "Du kannst mich nach Cannabissorten fragen..."} 
+            placeholder={isRecording ? "Aufnahme läuft..." : "Du kannst mich nach Cannabissorten fragen..."}
             value={inputValue}
             onChange={this.handleInputChange}
             onKeyDown={this.handleKeyDown}
             disabled={isRecording || inputsDisabled}
             slotProps={{
-              input: { 
-                maxLength: 300, 
+              input: {
+                maxLength: 300,
                 endAdornment: isRecording && (
                   <Typography variant="caption" color="primary" sx={{ mr: 1 }}>
                     {this.formatTime(recordingTime)}
@@ -604,45 +606,47 @@ class ChatAssistant extends Component {
             }}
           />
           
-          {isRecording ? (
-            <IconButton 
-              color="error"
-              onClick={this.stopRecording}
-              aria-label="Aufnahme stoppen"
-              sx={{ ml: 1 }}
-            >
-              <StopIcon />
-            </IconButton>
-          ) : (
-            <IconButton 
+          <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
+            {isRecording ? (
+              <IconButton
+                color="error"
+                onClick={this.stopRecording}
+                aria-label="Aufnahme stoppen"
+                sx={{ ml: { xs: 0, sm: 1 } }}
+              >
+                <StopIcon />
+              </IconButton>
+            ) : (
+              <IconButton
+                color="primary"
+                onClick={this.startRecording}
+                aria-label="Sprachaufnahme starten"
+                sx={{ ml: { xs: 0, sm: 1 } }}
+                disabled={isTyping || inputsDisabled}
+              >
+                <MicIcon />
+              </IconButton>
+            )}
+            
+            <IconButton
               color="primary"
-              onClick={this.startRecording}
-              aria-label="Sprachaufnahme starten"
-              sx={{ ml: 1 }}
-              disabled={isTyping || inputsDisabled}
+              onClick={this.handleImageUpload}
+              aria-label="Bild hochladen"
+              sx={{ ml: { xs: 0, sm: 1 } }}
+              disabled={isTyping || isRecording || inputsDisabled}
             >
-              <MicIcon />
+              <PhotoCameraIcon />
             </IconButton>
-          )}
-          
-          <IconButton 
-            color="primary"
-            onClick={this.handleImageUpload}
-            aria-label="Bild hochladen"
-            sx={{ ml: 1 }}
-            disabled={isTyping || isRecording || inputsDisabled}
-          >
-            <PhotoCameraIcon />
-          </IconButton>
-          
-          <Button 
-            variant="contained" 
-            sx={{ ml: 1 }} 
-            onClick={this.handleSendMessage}
-            disabled={isTyping || isRecording || inputsDisabled}
-          >
-            Senden
-          </Button>
+            
+            <Button
+              variant="contained"
+              sx={{ ml: { xs: 0, sm: 1 } }}
+              onClick={this.handleSendMessage}
+              disabled={isTyping || isRecording || inputsDisabled}
+            >
+              Senden
+            </Button>
+          </Box>
         </Box>
       </Paper>
     );