Dashboardbreite und mobile Spendenauswahl verbessern

src/components/dashboard/dashboard-shell.tsx

@@ -225,6 +225,7 @@ type MobileAction =
 type FinanceViewMode = "monthly" | "yearly" | "cutoff";
 type FinancePresentation = "charts" | "table";
 type DesktopSection = "overview" | "finance" | "budgetGroups" | "periods" | "users" | "logs";
+const GENERAL_DONATIONS_MOBILE_ID = "__general_donations__";
 type CutoffSelectionOption = {
   value: string;
   cutoffId: string;
@@ -657,6 +658,10 @@ export function DashboardShell({
   }, [router, searchParams, visibleGroups]);
 
   useEffect(() => {
+    if (selectedMobileGroupId === GENERAL_DONATIONS_MOBILE_ID) {
+      return;
+    }
+
     if (!visibleGroups.some((group) => group.id === selectedMobileGroupId)) {
       setSelectedMobileGroupId(visibleGroups[0]?.id ?? "");
     }
@@ -3402,8 +3407,10 @@ export function DashboardShell({
     </Card>
   ) : null;
 
-  const selectedMobileGroup = visibleGroups.find((group) => group.id === selectedMobileGroupId) ?? visibleGroups[0] ?? null;
-  const overviewGroups = isCompactLayout && selectedMobileGroup ? [selectedMobileGroup] : visibleGroups;
+  const isMobileGeneralDonationsSelected = isCompactLayout && selectedMobileGroupId === GENERAL_DONATIONS_MOBILE_ID;
+  const selectedMobileGroup =
+    isMobileGeneralDonationsSelected ? null : visibleGroups.find((group) => group.id === selectedMobileGroupId) ?? visibleGroups[0] ?? null;
+  const overviewGroups = isCompactLayout ? (selectedMobileGroup ? [selectedMobileGroup] : []) : visibleGroups;
   const generalDonations = donations.filter((donation) => !donation.expenseId);
 
   function renderDonationEditor(donation: DashboardDonation) {
@@ -3573,11 +3580,11 @@ export function DashboardShell({
 
   const overviewContent = (
     <Stack spacing={2.5}>
-      {isCompactLayout && visibleGroups.length > 1 ? (
+      {isCompactLayout ? (
         <TextField
           select
           label="AG auswählen"
-          value={selectedMobileGroup?.id ?? ""}
+          value={isMobileGeneralDonationsSelected ? GENERAL_DONATIONS_MOBILE_ID : selectedMobileGroup?.id ?? ""}
           onChange={(event) => {
             setSelectedMobileGroupId(event.target.value);
             setFocusedBudgetId(null);
@@ -3590,6 +3597,7 @@ export function DashboardShell({
               {group.name}
             </MenuItem>
           ))}
+          <MenuItem value={GENERAL_DONATIONS_MOBILE_ID}>Spenden</MenuItem>
         </TextField>
       ) : null}
       {isCompactLayout ? (
@@ -3633,7 +3641,7 @@ export function DashboardShell({
                 />
               </Box>
             ))}
-            {generalDonationsColumn}
+            {isMobileGeneralDonationsSelected ? generalDonationsColumn : null}
           </Stack>
         </Box>
       ) : (
@@ -3953,7 +3961,7 @@ export function DashboardShell({
   return (
     <Box sx={{ pb: 8 }}>
       <Box sx={{ px: 2, py: { xs: 3, md: 5 } }}>
-        <Container maxWidth={false} sx={{ maxWidth: 1640 }}>
+        <Container maxWidth={false} sx={{ width: "100%", maxWidth: "none" }}>
           <Card
             sx={{
               background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, isDark ? 0.78 : 0.96)} 0%, ${alpha(isDark ? "#080D19" : "#17203A", 0.96)} 72%)`,
@@ -4163,7 +4171,7 @@ export function DashboardShell({
 	        </DialogActions>
 	      </Dialog>
 
-	      <Container maxWidth={false} sx={{ maxWidth: 1640 }}>
+	      <Container maxWidth={false} sx={{ width: "100%", maxWidth: "none" }}>
         <Stack spacing={3} px={2}>
           {message ? <Alert severity={message.type} sx={{ whiteSpace: "pre-line" }}>{message.text}</Alert> : null}
           {periodOverviewCard}