u

src/components/chat/ChatDrawer.jsx

@@ -797,11 +797,11 @@ export default class ChatDrawer extends PureComponent {
           )}
 
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, ml: 1, flexShrink: 0 }}>
-            <Tooltip title={isVfsOpen ? 'VFS-Dateisystem schließen' : 'VFS-Dateisystem parallel öffnen'}>
+            <Tooltip title={isVfsOpen ? 'Dateien schließen' : 'Dateien parallel öffnen'}>
               <IconButton
                 size="small"
                 onClick={() => vfsAutomat.actions.toggleVfs()}
-                aria-label="VFS Dateisystem"
+                aria-label="Dateien"
                 sx={{
                   p: 0.5,
                   color: isVfsOpen ? 'primary.main' : 'text.secondary',
@@ -1322,36 +1322,54 @@ export default class ChatDrawer extends PureComponent {
             </Box>
           )}
 
-          {/* Vertical Split Resizer between VFS and Chat */}
+          {/* Vertical Split Resizer between VFS and Chat (0px width so no layout shift or grey bar) */}
           {isVfsOpen && (
             <Box
               onPointerDown={this.handleVfsResizerStart}
               onMouseDown={this.handleVfsResizerStart}
-              title="Ziehen zum Anpassen der Spaltenbreiten"
               sx={{
-                width: 8,
-                cursor: 'col-resize',
-                bgcolor: 'divider',
+                width: 0,
+                position: 'relative',
                 flexShrink: 0,
+                zIndex: 10,
                 display: { xs: 'none', sm: 'flex' },
                 alignItems: 'center',
                 justifyContent: 'center',
+                cursor: 'col-resize',
                 touchAction: 'none',
                 userSelect: 'none',
-                transition: 'background-color 0.15s, box-shadow 0.15s',
-                '&:hover, &:active': {
+                '&:hover .vfs-resizer-line, &:active .vfs-resizer-line': {
                   bgcolor: 'primary.main',
+                  opacity: 1,
+                  height: 48,
+                  width: 4,
                   boxShadow: `0 0 8px ${BLUE_GLOW}`,
                 },
               }}
             >
+              {/* Invisible wide hit area (16px wide, centered on the 1px border) */}
               <Box
                 sx={{
+                  position: 'absolute',
+                  top: 0,
+                  bottom: 0,
+                  left: -8,
+                  width: 16,
+                  cursor: 'col-resize',
+                }}
+              />
+              {/* Visual handle indicator on hover / active */}
+              <Box
+                className="vfs-resizer-line"
+                sx={{
+                  position: 'absolute',
                   width: 2,
-                  height: 36,
+                  height: 32,
                   borderRadius: 1,
-                  bgcolor: (theme) =>
-                    theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.35)' : 'rgba(0,0,0,0.25)',
+                  bgcolor: 'divider',
+                  opacity: 0.5,
+                  transition: 'background-color 0.15s, height 0.15s, width 0.15s, opacity 0.15s, box-shadow 0.15s',
+                  pointerEvents: 'none',
                 }}
               />
             </Box>