From 1c496435f5735758b6e02ff01344e884edc0c35e Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Wed, 18 Mar 2026 10:37:52 +0100
Subject: [PATCH] refactor: reduce UI spacing and dimensions throughout desktop
 client for more compact layout

Reduce padding, gaps, and font sizes across all components. Change html/body/root from min-height to fixed height with overflow hidden. Decrease app-frame padding from 18px to 12px and add grid-template-rows with overflow handling. Reduce brand lockup logo from 54px to 44px and adjust gaps throughout. Decrease button padding, surface padding, and card padding. Reduce body-grid sidebar from 290px to 250px.
---
 desktop-client/src/App.tsx    |  1 -
 desktop-client/src/styles.css | 90 ++++++++++++++++++++++-------------
 2 files changed, 56 insertions(+), 35 deletions(-)

diff --git a/desktop-client/src/App.tsx b/desktop-client/src/App.tsx
index 8684925..9e7f31e 100644
--- a/desktop-client/src/App.tsx
+++ b/desktop-client/src/App.tsx
@@ -299,7 +299,6 @@ export function App() {
                 <h4>Resources</h4>
               </div>
             </div>
-            <p className="access-hint">Press <strong>Sync</strong> after policy changes.</p>
             <ul className="resource-stack">
               {(state?.resources ?? ["No resources assigned yet"]).map((resource) => (
                 <li key={resource}>{resource}</li>
diff --git a/desktop-client/src/styles.css b/desktop-client/src/styles.css
index 957afc3..79f7fa1 100644
--- a/desktop-client/src/styles.css
+++ b/desktop-client/src/styles.css
@@ -14,11 +14,12 @@
 html,
 body,
 #root {
-  min-height: 100vh;
+  height: 100vh;
 }
 
 body {
   margin: 0;
+  overflow: hidden;
 }
 
 button,
@@ -27,40 +28,44 @@ input {
 }
 
 .client-shell {
-  min-height: 100vh;
-  padding: 18px;
+  height: 100vh;
+  padding: 12px;
+  overflow: hidden;
 }
 
 .app-frame {
   width: min(920px, 100%);
+  height: calc(100vh - 24px);
   margin: 0 auto;
   display: grid;
-  gap: 14px;
+  grid-template-rows: auto 1fr;
+  gap: 10px;
+  overflow: hidden;
 }
 
 .top-strip {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
+  gap: 12px;
 }
 
 .brand-lockup {
   display: flex;
   align-items: center;
-  gap: 14px;
+  gap: 10px;
 }
 
 .brand-lockup img {
-  width: 54px;
-  height: 54px;
-  border-radius: 16px;
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
   box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
 }
 
 .brand-copy {
   display: grid;
-  gap: 4px;
+  gap: 2px;
 }
 
 .eyebrow {
@@ -68,12 +73,21 @@ input {
   color: #75e3ba;
   letter-spacing: 0.18em;
   text-transform: uppercase;
-  font-size: 0.74rem;
+  font-size: 0.68rem;
 }
 
 .brand-copy h1,
 .status-panel h3 {
   margin: 0;
+  line-height: 1.1;
+}
+
+.brand-copy h1 {
+  font-size: 2rem;
+}
+
+.brand-copy p {
+  font-size: 0.98rem;
 }
 
 .brand-copy p,
@@ -96,7 +110,7 @@ input {
 .shell-button-secondary {
   border: 0;
   border-radius: 999px;
-  padding: 10px 16px;
+  padding: 9px 15px;
   font-weight: 700;
   cursor: pointer;
   transition: 160ms ease;
@@ -130,16 +144,20 @@ input {
 
 .body-grid {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 290px;
-  gap: 16px;
+  grid-template-columns: minmax(0, 1fr) 250px;
+  gap: 12px;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .login-panel,
 .status-panel {
   border-radius: 28px;
-  padding: 18px;
+  padding: 14px;
   display: grid;
-  gap: 14px;
+  gap: 10px;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .status-panel > p {
@@ -152,14 +170,14 @@ input {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
+  gap: 10px;
 }
 
 .status-state {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  padding: 8px 12px;
+  padding: 6px 10px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.04);
   color: #c8d6ee;
@@ -178,9 +196,9 @@ input {
 
 .surface {
   border-radius: 24px;
-  padding: 14px;
+  padding: 12px;
   display: grid;
-  gap: 12px;
+  gap: 10px;
 }
 
 .surface-header {
@@ -192,54 +210,57 @@ input {
 
 .surface-header h4 {
   margin: 0;
-  font-size: 1rem;
+  font-size: 0.95rem;
 }
 
 .status-grid,
 .profile-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
+  gap: 8px;
 }
 
 .detail-card,
 .profile-card {
-  padding: 12px;
+  padding: 10px 12px;
   border-radius: 16px;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(177, 197, 229, 0.1);
   display: grid;
-  gap: 5px;
+  gap: 4px;
+  min-height: 72px;
 }
 
 .detail-card strong,
 .profile-card strong {
-  font-size: 0.98rem;
+  font-size: 0.92rem;
   word-break: break-word;
 }
 
+.detail-card span {
+  font-size: 0.9rem;
+}
+
 .resource-stack {
   margin: 0;
   padding: 0;
   list-style: none;
   display: grid;
-  gap: 8px;
+  gap: 6px;
+  align-content: start;
 }
 
 .resource-stack li {
-  padding: 12px 14px;
-  border-radius: 16px;
+  padding: 10px 12px;
+  border-radius: 14px;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(177, 197, 229, 0.1);
   color: #eef4ff;
   word-break: break-word;
-  min-height: 54px;
+  min-height: 44px;
   display: flex;
   align-items: center;
-}
-
-.access-hint {
-  font-size: 0.95rem;
+  font-size: 0.94rem;
 }
 
 .login-panel form {
@@ -268,12 +289,13 @@ input {
 }
 
 .error {
-  padding: 12px 14px;
+  padding: 10px 12px;
   border-radius: 16px;
   background: rgba(255, 115, 115, 0.08);
   border: 1px solid rgba(255, 115, 115, 0.16);
   color: #ffc3c3;
   white-space: pre-wrap;
+  font-size: 0.95rem;
 }
 
 @media (max-width: 960px) {