Ich habe den Desktop-Overflow jetzt an der eigentlichen Ursache angefasst in dashboard-shell.tsx. Die Übersicht ist nicht mehr gleichzeitig Flex-Layout und Scroll-Container, sondern hat jetzt einen sauberen äußeren Scroll-Wrapper plus inneren max-content-Track. Zusätzlich schrumpft die rechte Desktop-Spalte jetzt korrekt mit flex: 1 1 0%, damit sie keinen zweiten Seiten-Overflow mehr erzeugt

src/components/dashboard/dashboard-shell.tsx

@@ -1959,49 +1959,84 @@ export function DashboardShell({
         </Card>
       ) : null}
 
-      <Stack
+      {isCompactLayout ? (
-        direction={isCompactLayout ? "column" : "row"}
+        <Stack direction="column" gap={2} sx={{ width: "100%", minWidth: 0 }}>
-        gap={2}
+          {(mobileSelectedGroup ? [mobileSelectedGroup] : []).map((group) => (
-        sx={{
+            <Box key={group.id} sx={{ width: "100%", minWidth: 0 }}>
-          width: "100%",
+              <BudgetColumn
-          minWidth: 0,
+                group={group}
-          maxWidth: "100%",
+                viewer={viewer}
-          overflowX: isCompactLayout ? "visible" : "auto",
+                busy={busy}
-          overflowY: "hidden",
+                approvalThreshold={approvalThreshold}
-          pb: isCompactLayout ? 0 : 2,
+                onApprove={handleApprove}
-          alignItems: "stretch",
+                onMarkPaid={handleMarkPaid}
-          scrollSnapType: isCompactLayout ? "none" : "x proximity",
+                onDocument={handleDocument}
-          scrollbarGutter: isCompactLayout ? "auto" : "stable both-edges",
+                onSaveWorkingGroup={handleSaveWorkingGroup}
-          overscrollBehaviorX: "contain"
+                onDeleteWorkingGroup={handleDeleteWorkingGroup}
-        }}
+                onSaveBudget={handleSaveBudget}
-      >
+                onDeleteBudget={handleDeleteBudget}
-        {(isCompactLayout ? (mobileSelectedGroup ? [mobileSelectedGroup] : []) : visibleGroups).map((group) => (
+                onDeleteExpense={handleDeleteExpense}
-          <Box key={group.id} sx={{ flex: "0 0 auto", scrollSnapAlign: "start" }}>
+              />
-            <BudgetColumn
+            </Box>
-              group={group}
+          ))}
-              viewer={viewer}
+        </Stack>
-              busy={busy}
+      ) : (
-              approvalThreshold={approvalThreshold}
+        <Box
-              onApprove={handleApprove}
+          sx={{
-              onMarkPaid={handleMarkPaid}
+            width: "100%",
-              onDocument={handleDocument}
+            minWidth: 0,
-              onSaveWorkingGroup={handleSaveWorkingGroup}
+            maxWidth: "100%",
-              onDeleteWorkingGroup={handleDeleteWorkingGroup}
+            overflowX: "auto",
-              onSaveBudget={handleSaveBudget}
+            overflowY: "hidden",
-              onDeleteBudget={handleDeleteBudget}
+            pb: 2,
-              onDeleteExpense={handleDeleteExpense}
+            scrollbarGutter: "stable both-edges",
-            />
+            overscrollBehaviorX: "contain"
-          </Box>
+          }}
-        ))}
+        >
-      </Stack>
+          <Stack
+            direction="row"
+            gap={2}
+            sx={{
+              width: "max-content",
+              minWidth: "100%",
+              alignItems: "stretch",
+              pr: 0.5
+            }}
+          >
+            {visibleGroups.map((group) => (
+              <Box key={group.id} sx={{ flex: "0 0 auto", scrollSnapAlign: "start" }}>
+                <BudgetColumn
+                  group={group}
+                  viewer={viewer}
+                  busy={busy}
+                  approvalThreshold={approvalThreshold}
+                  onApprove={handleApprove}
+                  onMarkPaid={handleMarkPaid}
+                  onDocument={handleDocument}
+                  onSaveWorkingGroup={handleSaveWorkingGroup}
+                  onDeleteWorkingGroup={handleDeleteWorkingGroup}
+                  onSaveBudget={handleSaveBudget}
+                  onDeleteBudget={handleDeleteBudget}
+                  onDeleteExpense={handleDeleteExpense}
+                />
+              </Box>
+            ))}
+          </Stack>
+        </Box>
+      )}
     </Stack>
   );
 
   const desktopSectionContent =
     desktopSection === "overview" ? (
-      <Stack direction={{ xs: "column", xl: "row" }} gap={3} alignItems="flex-start" sx={{ minWidth: 0 }}>
+      <Stack
+        direction={{ xs: "column", xl: "row" }}
+        gap={3}
+        alignItems="flex-start"
+        sx={{ width: "100%", minWidth: 0, overflowX: "hidden" }}
+      >
         <Box sx={{ width: { xs: "100%", xl: 380 }, flexShrink: 0 }}>{actionCards}</Box>
-        <Box sx={{ flex: 1, minWidth: 0, maxWidth: "100%", overflowX: "hidden" }}>{overviewContent}</Box>
+        <Box sx={{ flex: "1 1 0%", minWidth: 0, maxWidth: "100%", overflowX: "hidden" }}>{overviewContent}</Box>
       </Stack>
     ) : desktopSection === "periods" ? (
       <Stack direction={{ xs: "column", xl: "row" }} gap={3} alignItems="flex-start">