feat(FN-5160): complete Step 1 — polish SecretsView CSS

Fusion-Task-Id: FN-5160
Fusion-Task-Lineage: 4817bb14-178e-4914-aa60-d0184fba653b
This commit is contained in:
Fusion (runfusion.ai)
2026-05-19 15:20:45 -07:00
committed by gsxdsm
parent b39c2dd071
commit 0f29c0d1bb

View File

@@ -2,6 +2,8 @@
display: flex;
flex-direction: column;
gap: var(--space-lg);
padding-block: var(--space-md);
padding-inline: var(--space-xl);
}
.secrets-header {
@@ -11,6 +13,10 @@
gap: var(--space-md);
}
.secrets-header h2 {
margin: 0;
}
.secrets-header-actions {
display: flex;
gap: var(--space-sm);
@@ -22,16 +28,18 @@
display: flex;
align-items: center;
gap: var(--space-sm);
padding-block: var(--space-sm);
}
.secrets-sync-card {
display: flex;
flex-direction: column;
gap: var(--space-sm);
gap: var(--space-md);
}
.secrets-sync-header {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-md);
@@ -47,7 +55,9 @@
.secrets-sync-copy {
margin: 0;
max-width: 60ch;
color: var(--text-muted);
line-height: 1.5;
}
.secrets-sync-actions {
@@ -65,6 +75,7 @@
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-md);
align-items: start;
}
.secrets-row-main {
@@ -75,12 +86,15 @@
.secrets-row-key {
font-family: var(--font-mono);
font-size: 1em;
overflow-wrap: anywhere;
}
.secrets-row-meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
row-gap: var(--space-xs);
}
.secrets-chip {
@@ -92,10 +106,15 @@
.secrets-revealed {
margin: 0;
max-width: 100%;
overflow-x: auto;
white-space: pre-wrap;
word-break: break-all;
font-family: var(--font-mono);
border: var(--btn-border-width) solid var(--border);
border-radius: var(--radius-sm);
padding: var(--space-sm);
background: var(--surface);
}
.secrets-row-side {
@@ -107,6 +126,8 @@
.secrets-row-read {
color: var(--text-muted);
font-size: 0.95em;
font-weight: 400;
}
.secrets-row-actions,
@@ -118,11 +139,33 @@
align-items: center;
}
.secrets-radio-row {
flex-wrap: wrap;
row-gap: var(--space-xs);
}
.secrets-modal-body {
display: flex;
flex-direction: column;
gap: var(--space-md);
padding: 0 var(--space-xl) var(--space-lg);
}
.secrets-modal-body .form-group {
margin: 0;
padding: 0;
}
.secrets-value-row .input {
flex: 1;
}
@media (max-width: 768px) {
.secrets-view {
padding-inline: var(--space-md);
padding-bottom: calc(var(--space-md) + var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px) + var(--standalone-bottom-gap, 0px));
}
.secrets-header,
.secrets-row,
.secrets-sync-header {
@@ -130,13 +173,28 @@
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-sm);
}
.secrets-sync-header {
flex-wrap: wrap;
}
.secrets-sync-copy {
max-width: none;
}
.secrets-sync-actions {
flex-direction: column;
}
.secrets-row-key {
font-size: 0.95em;
}
.secrets-row-side {
width: 100%;
align-items: flex-start;
gap: var(--space-sm);
}
}