src/pages/BalancePage.tsx

@@ -173,26 +173,32 @@ export default function BalancePage() {
         </div>
       )}
 
-      <div className="space-y-6">
+      {/* Issue #178 — empty-state guard. We probe accountsLatest for ANY
+          snapshot date so the guard is independent of the active period
+          filter (state.period). When empty, we render only the onboarding
+          card — period selector, chart and accounts table would all show
+          empty states stacked under it (S2 from #187). */}
       {(() => {
-          // Issue #178 — show a 2-step onboarding card while the user has no
-          // accounts or no snapshots yet. We probe accountsLatest for ANY
-          // snapshot date so the empty-state guard is independent of the
-          // active period filter (state.period).
         const accountsCount = state.accountsLatest.length;
         const hasAnySnapshot = state.accountsLatest.some(
           (a) => a.latest_snapshot_date != null
         );
-          if (accountsCount === 0 || !hasAnySnapshot) {
+        const isEmpty = accountsCount === 0 || !hasAnySnapshot;
+
+        if (isEmpty) {
           return (
+            <div className="space-y-6">
               <BalanceOnboardingCard
                 accountsCount={accountsCount}
                 snapshotsCount={hasAnySnapshot ? 1 : 0}
               />
+            </div>
           );
         }
-          return <BalanceOverviewCard totals={state.evolutionTotals} />;
+
-        })()}
+        return (
+          <div className="space-y-6">
+            <BalanceOverviewCard totals={state.evolutionTotals} />
 
             <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
               {/* Period selector */}
@@ -263,6 +269,8 @@ export default function BalancePage() {
               />
             </div>
           </div>
+        );
+      })()}
 
       <StarterAccountsModal
         isOpen={showStarterModal}