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() {
Resources
- Press Sync after policy changes.
{(state?.resources ?? ["No resources assigned yet"]).map((resource) => (
- {resource}
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) {