From ac48cece8ab483e51cd7d00e4065cef1401bef60 Mon Sep 17 00:00:00 2001
From: whekin <stanislavkalishin@gmail.com>
Date: Wed, 11 Mar 2026 19:58:09 +0400
Subject: [PATCH] refactor(miniapp): tighten overview screen density

---
 apps/miniapp/src/index.css                   | 12 ++--
 apps/miniapp/src/screens/balances-screen.tsx |  2 +-
 apps/miniapp/src/screens/home-screen.tsx     | 74 +++++++++++---------
 3 files changed, 47 insertions(+), 41 deletions(-)

diff --git a/apps/miniapp/src/index.css b/apps/miniapp/src/index.css
index 95cb684..9d4cad5 100644
--- a/apps/miniapp/src/index.css
+++ b/apps/miniapp/src/index.css
@@ -284,6 +284,12 @@ button {
   gap: 12px;
 }
 
+.summary-card-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
 .panel {
   border-radius: 24px;
   padding: 18px;
@@ -904,11 +910,7 @@ button {
     padding: 32px 24px 40px;
   }
 
-  .home-grid {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
-  .home-grid--summary {
+  .summary-card-grid {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 
diff --git a/apps/miniapp/src/screens/balances-screen.tsx b/apps/miniapp/src/screens/balances-screen.tsx
index 6f8048e..2a72ff0 100644
--- a/apps/miniapp/src/screens/balances-screen.tsx
+++ b/apps/miniapp/src/screens/balances-screen.tsx
@@ -94,7 +94,7 @@ export function BalancesScreen(props: Props) {
           </article>
         )}
       </Show>
-      <div class="home-grid home-grid--summary">
+      <div class="summary-card-grid">
         <FinanceSummaryCards
           dashboard={props.dashboard}
           utilityTotalMajor={props.utilityTotalMajor}
diff --git a/apps/miniapp/src/screens/home-screen.tsx b/apps/miniapp/src/screens/home-screen.tsx
index 6072dec..900ae72 100644
--- a/apps/miniapp/src/screens/home-screen.tsx
+++ b/apps/miniapp/src/screens/home-screen.tsx
@@ -46,46 +46,50 @@ type Props = {
 export function HomeScreen(props: Props) {
   if (!props.dashboard) {
     return (
-      <div class="home-grid home-grid--summary">
-        <article class="stat-card">
-          <span>{props.copy.remainingLabel ?? ''}</span>
-          <strong>—</strong>
-        </article>
-        <article class="stat-card">
-          <span>{props.copy.shareRent ?? ''}</span>
-          <strong>—</strong>
-        </article>
-        <article class="stat-card">
-          <span>{props.copy.shareUtilities ?? ''}</span>
-          <strong>—</strong>
-        </article>
-        <article class="stat-card">
-          <span>{props.copy.purchasesTitle ?? ''}</span>
-          <strong>—</strong>
-        </article>
+      <div class="home-grid">
+        <div class="summary-card-grid">
+          <article class="stat-card">
+            <span>{props.copy.remainingLabel ?? ''}</span>
+            <strong>—</strong>
+          </article>
+          <article class="stat-card">
+            <span>{props.copy.shareRent ?? ''}</span>
+            <strong>—</strong>
+          </article>
+          <article class="stat-card">
+            <span>{props.copy.shareUtilities ?? ''}</span>
+            <strong>—</strong>
+          </article>
+          <article class="stat-card">
+            <span>{props.copy.purchasesTitle ?? ''}</span>
+            <strong>—</strong>
+          </article>
+        </div>
       </div>
     )
   }
 
   return (
-    <div class="home-grid home-grid--summary">
-      <FinanceSummaryCards
-        dashboard={props.dashboard}
-        utilityTotalMajor={props.utilityTotalMajor}
-        purchaseTotalMajor={props.purchaseTotalMajor}
-        labels={{
-          remaining: props.copy.remainingLabel ?? '',
-          rent: props.copy.shareRent ?? '',
-          utilities: props.copy.shareUtilities ?? '',
-          purchases: props.copy.purchasesTitle ?? ''
-        }}
-      />
-      <Show when={props.readyIsAdmin}>
-        <article class="stat-card">
-          <span>{props.copy.pendingRequests ?? ''}</span>
-          <strong>{String(props.pendingMembersCount)}</strong>
-        </article>
-      </Show>
+    <div class="home-grid">
+      <div class="summary-card-grid">
+        <FinanceSummaryCards
+          dashboard={props.dashboard}
+          utilityTotalMajor={props.utilityTotalMajor}
+          purchaseTotalMajor={props.purchaseTotalMajor}
+          labels={{
+            remaining: props.copy.remainingLabel ?? '',
+            rent: props.copy.shareRent ?? '',
+            utilities: props.copy.shareUtilities ?? '',
+            purchases: props.copy.purchasesTitle ?? ''
+          }}
+        />
+        <Show when={props.readyIsAdmin}>
+          <article class="stat-card">
+            <span>{props.copy.pendingRequests ?? ''}</span>
+            <strong>{String(props.pendingMembersCount)}</strong>
+          </article>
+        </Show>
+      </div>
 
       <Show
         when={props.currentMemberLine}