rework from modal to page

frontend/src/pages/IssueNeu.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import {
   Box, Typography, Paper, Button, TextField, MenuItem, Select, FormControl,
-  InputLabel, IconButton,
+  InputLabel, IconButton, Grid, Collapse,
 } from '@mui/material';
-import { ArrowBack } from '@mui/icons-material';
+import { ArrowBack, Add as AddIcon } from '@mui/icons-material';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import DashboardLayout from '../components/dashboard/DashboardLayout';
@@ -17,6 +17,7 @@ export default function IssueNeu() {
   const { showSuccess, showError } = useNotification();
 
   const [form, setForm] = useState<CreateIssuePayload>({ titel: '', prioritaet: '' });
+  const [showDescription, setShowDescription] = useState(false);
 
   const { data: types = [] } = useQuery({
     queryKey: ['issue-types'],
@@ -51,25 +52,26 @@ export default function IssueNeu() {
 
   return (
     <DashboardLayout>
-      <Box sx={{ p: 3 }}>
-        {/* Header */}
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 3 }}>
-          <IconButton onClick={() => navigate('/issues')}>
-            <ArrowBack />
-          </IconButton>
-          <Typography variant="h5">Neues Issue</Typography>
-        </Box>
+      {/* Header */}
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 3 }}>
+        <IconButton onClick={() => navigate('/issues')}>
+          <ArrowBack />
+        </IconButton>
+        <Typography variant="h5">Neues Issue</Typography>
+      </Box>
 
-        <Paper variant="outlined" sx={{ p: 3, maxWidth: 600 }}>
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-            <TextField
-              label="Titel"
-              required
-              fullWidth
-              value={form.titel}
-              onChange={(e) => setForm({ ...form, titel: e.target.value })}
-              autoFocus
-            />
+      <Paper sx={{ p: 3 }}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+          <TextField
+            label="Titel"
+            required
+            fullWidth
+            value={form.titel}
+            onChange={(e) => setForm({ ...form, titel: e.target.value })}
+            autoFocus
+          />
+
+          <Collapse in={showDescription} unmountOnExit>
             <TextField
               label="Beschreibung"
               multiline
@@ -78,43 +80,61 @@ export default function IssueNeu() {
               value={form.beschreibung || ''}
               onChange={(e) => setForm({ ...form, beschreibung: e.target.value })}
             />
-            <FormControl fullWidth>
-              <InputLabel>Typ</InputLabel>
-              <Select
-                value={form.typ_id ?? defaultTypId ?? ''}
-                label="Typ"
-                onChange={(e) => setForm({ ...form, typ_id: Number(e.target.value) })}
-              >
-                {types.filter(t => t.aktiv).map(t => (
-                  <MenuItem key={t.id} value={t.id}>{t.name}</MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-            <FormControl fullWidth>
-              <InputLabel>Priorität</InputLabel>
-              <Select
-                value={form.prioritaet || defaultPriority}
-                label="Priorität"
-                onChange={(e) => setForm({ ...form, prioritaet: e.target.value })}
-              >
-                {priorities.filter(p => p.aktiv).map(p => (
-                  <MenuItem key={p.schluessel} value={p.schluessel}>{p.bezeichnung}</MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-            <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 1 }}>
-              <Button onClick={() => navigate('/issues')}>Abbrechen</Button>
-              <Button
-                variant="contained"
-                disabled={!form.titel.trim() || createMut.isPending}
-                onClick={handleSubmit}
-              >
-                Erstellen
-              </Button>
-            </Box>
+          </Collapse>
+          {!showDescription && (
+            <Button
+              size="small"
+              startIcon={<AddIcon />}
+              onClick={() => setShowDescription(true)}
+              sx={{ alignSelf: 'flex-start' }}
+            >
+              Beschreibung hinzufuegen
+            </Button>
+          )}
+
+          <Grid container spacing={2}>
+            <Grid item xs={12} sm={6}>
+              <FormControl fullWidth>
+                <InputLabel>Typ</InputLabel>
+                <Select
+                  value={form.typ_id ?? defaultTypId ?? ''}
+                  label="Typ"
+                  onChange={(e) => setForm({ ...form, typ_id: Number(e.target.value) })}
+                >
+                  {types.filter(t => t.aktiv).map(t => (
+                    <MenuItem key={t.id} value={t.id}>{t.name}</MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <FormControl fullWidth>
+                <InputLabel>Prioritaet</InputLabel>
+                <Select
+                  value={form.prioritaet || defaultPriority}
+                  label="Prioritaet"
+                  onChange={(e) => setForm({ ...form, prioritaet: e.target.value })}
+                >
+                  {priorities.filter(p => p.aktiv).map(p => (
+                    <MenuItem key={p.schluessel} value={p.schluessel}>{p.bezeichnung}</MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            </Grid>
+          </Grid>
+
+          <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 1 }}>
+            <Button onClick={() => navigate('/issues')}>Abbrechen</Button>
+            <Button
+              variant="contained"
+              disabled={!form.titel.trim() || createMut.isPending}
+              onClick={handleSubmit}
+            >
+              Erstellen
+            </Button>
           </Box>
-        </Paper>
-      </Box>
+        </Box>
+      </Paper>
     </DashboardLayout>
   );
 }