diff --git a/src/components/dashboard/dashboard-shell.tsx b/src/components/dashboard/dashboard-shell.tsx
index b467c5a..87de43c 100644
--- a/src/components/dashboard/dashboard-shell.tsx
+++ b/src/components/dashboard/dashboard-shell.tsx
@@ -1959,49 +1959,84 @@ export function DashboardShell({
         </Card>
       ) : null}
 
-      <Stack
-        direction={isCompactLayout ? "column" : "row"}
-        gap={2}
-        sx={{
-          width: "100%",
-          minWidth: 0,
-          maxWidth: "100%",
-          overflowX: isCompactLayout ? "visible" : "auto",
-          overflowY: "hidden",
-          pb: isCompactLayout ? 0 : 2,
-          alignItems: "stretch",
-          scrollSnapType: isCompactLayout ? "none" : "x proximity",
-          scrollbarGutter: isCompactLayout ? "auto" : "stable both-edges",
-          overscrollBehaviorX: "contain"
-        }}
-      >
-        {(isCompactLayout ? (mobileSelectedGroup ? [mobileSelectedGroup] : []) : 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>
+      {isCompactLayout ? (
+        <Stack direction="column" gap={2} sx={{ width: "100%", minWidth: 0 }}>
+          {(mobileSelectedGroup ? [mobileSelectedGroup] : []).map((group) => (
+            <Box key={group.id} sx={{ width: "100%", minWidth: 0 }}>
+              <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
+          sx={{
+            width: "100%",
+            minWidth: 0,
+            maxWidth: "100%",
+            overflowX: "auto",
+            overflowY: "hidden",
+            pb: 2,
+            scrollbarGutter: "stable both-edges",
+            overscrollBehaviorX: "contain"
+          }}
+        >
+          <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">