u

src/components/settings/SettingsDialog.jsx

@@ -8,6 +8,8 @@ import Tabs from '@mui/material/Tabs';
 import NumbersIcon from '@mui/icons-material/Numbers';
 import PrintOutlinedIcon from '@mui/icons-material/PrintOutlined';
 import TuneIcon from '@mui/icons-material/Tune';
+import CloseIcon from '@mui/icons-material/Close';
+import IconButton from '@mui/material/IconButton';
 import NumberSettingsPanel from './NumberSettingsPanel';
 import PrinterSettingsPanel from './PrinterSettingsPanel';
 import SettingsKeysPanel from './SettingsKeysPanel';
@@ -46,9 +48,42 @@ export default class SettingsDialog extends Component {
     const { open, onClose } = this.props;
     const { tab } = this.state;
 
+    const paperSx = {
+      height: '85vh',
+      minHeight: '85vh',
+      maxHeight: '85vh',
+      display: 'flex',
+      flexDirection: 'column',
+    };
+
     return (
-      <AppDialog open={open} onClose={onClose} maxWidth="md" fullWidth>
+      <AppDialog
-        <DialogTitle>Einstellungen</DialogTitle>
+        open={open}
+        onClose={onClose}
+        maxWidth="md"
+        fullWidth
+        slotProps={{ paper: { sx: paperSx } }}
+        PaperProps={{ sx: paperSx }}
+      >
+        <DialogTitle
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            py: 1.5,
+            px: 3,
+          }}
+        >
+          Einstellungen
+          <IconButton
+            size="small"
+            aria-label="Schließen"
+            onClick={onClose}
+            sx={{ color: 'text.secondary' }}
+          >
+            <CloseIcon fontSize="small" />
+          </IconButton>
+        </DialogTitle>
         <Tabs
           value={tab}
           onChange={this.handleTabChange}
@@ -59,14 +94,14 @@ export default class SettingsDialog extends Component {
             <Tab key={t.id} icon={t.icon} iconPosition="start" label={t.label} value={t.id} />
           ))}
         </Tabs>
-        <DialogContent dividers>
+        <DialogContent dividers sx={{ flex: 1, minHeight: 0 }}>
           <Box sx={{ display: 'grid' }}>
             {TABS.map((t) => (
               <Box
                 key={t.id}
                 sx={{
                   gridArea: '1 / 1',
-                  visibility: t.id === tab ? undefined : 'hidden',
+                  display: t.id === tab ? 'block' : 'none',
                 }}
               >
                 <t.Panel />

src/components/settings/SettingsKeysPanel.jsx

@@ -28,6 +28,9 @@ const SETTABLE_KEYS = [
   'keys.tavily',
   'keys.openrouter',
   'keys.serper',
+  'default-model',
+  'systemprompt-prefix',
+  'systemprompt-suffix',
 ];
 
 const KEY_LABELS = {
@@ -35,8 +38,21 @@ const KEY_LABELS = {
   'keys.tavily': 'Tavily API-Key',
   'keys.openrouter': 'OpenRouter API-Key',
   'keys.serper': 'Serper API-Key',
+  'default-model': 'Modellslug',
+  'systemprompt-prefix': 'Prä Prompt',
+  'systemprompt-suffix': 'Post Prompt',
 };
 
+const MULTILINE_KEYS = new Set([
+  'systemprompt-prefix',
+  'systemprompt-suffix',
+]);
+
+const EXCLUDED_KEYS = new Set([
+  'labelprinter.addr',
+  'labelprinter.type',
+]);
+
 function keyLabel(key) {
   return KEY_LABELS[key] ?? key;
 }
@@ -177,25 +193,43 @@ export default class SettingsKeysPanel extends Component {
       <TableContainer>
         <Table size="small">
           <TableBody>
-            {SETTABLE_KEYS.map((key) => {
+            {SETTABLE_KEYS.filter((k) => !EXCLUDED_KEYS.has(k)).map((key) => {
               const row = settings.find((s) => s.key === key);
               const draft = row ? drafts[row.key] : null;
               if (!row || !draft) return null;
+              const isMultiline = MULTILINE_KEYS.has(row.key);
               return (
                 <TableRow key={row.key} hover>
-                  <TableCell>
+                  <TableCell
+                    sx={{
+                      width: 180,
+                      verticalAlign: 'top',
+                      pt: 1.5,
+                      whiteSpace: 'nowrap',
+                    }}
+                  >
                     <Typography variant="body2">{keyLabel(row.key)}</Typography>
                   </TableCell>
-                  <TableCell>
+                  <TableCell sx={{ verticalAlign: 'top' }}>
                     <TextField
                       size="small"
+                      fullWidth
+                      multiline={isMultiline}
+                      minRows={isMultiline ? 2 : undefined}
+                      maxRows={isMultiline ? 6 : undefined}
                       value={draft.value}
                       disabled={draft.busy}
                       onChange={(e) => this.handleChange(row.key, 'value', e.target.value)}
+                      onKeyDown={(e) => {
+                        if (!isMultiline && e.key === 'Enter') {
+                          e.preventDefault();
+                          void this.handleSave(row.key);
+                        }
+                      }}
                       autoComplete="off"
                     />
                   </TableCell>
-                  <TableCell align="right">
+                  <TableCell align="right" sx={{ verticalAlign: 'top', pt: 1, width: 60 }}>
                     <Stack
                       direction="row"
                       spacing={0}