claude-bot/EJClaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine settings IA with tabbed sections

Browse Source 
Split Settings into tabbed sections while preserving draft state, improve mobile Settings nav/touch targets, and update dashboard UX coverage for the Codex tab.
This commit is contained in:
Eyejoker
2026-05-04 01:50:15 +09:00
committed by GitHub
parent 75bdf21a09
commit c7d4bf82d7
6 changed files with 246 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
apps/dashboard/src/styles.css
View File

@@ -669,6 +669,7 @@ button:disabled {
.settings-nav button {
display: grid;
gap: 2px;
min-height: 52px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: 12px;
@@ -685,7 +686,8 @@ button:disabled {
}
.settings-nav button:hover,
.settings-nav button:focus-visible {
.settings-nav button:focus-visible,
.settings-nav button[aria-selected='true'] {
transform: translateX(2px);
border-color: rgba(214, 130, 88, 0.24);
background: rgba(214, 130, 88, 0.08);
@@ -728,7 +730,7 @@ button:disabled {
.settings-row input,
.settings-row select {
min-height: 38px;
min-height: 44px;
padding: 0 12px;
border: 1px solid var(--panel-border);
border-radius: 10px;
@@ -929,7 +931,7 @@ button:disabled {
.settings-save,
.settings-restart {
min-height: 32px;
min-height: 44px;
padding: 0 14px;
border: 0;
border-radius: 999px;
@@ -1006,7 +1008,7 @@ button:disabled {
}
.settings-secondary {
min-height: 28px;
min-height: 36px;
padding: 0 10px;
border: 1px solid var(--panel-border-strong);
border-radius: 999px;
@@ -1050,7 +1052,7 @@ button:disabled {
.settings-moa-grid input,
.settings-moa-grid select {
min-height: 32px;
min-height: 40px;
min-width: 0;
padding: 0 10px;
border: 1px solid var(--panel-border);
@@ -1141,7 +1143,7 @@ button:disabled {
}
.settings-delete {
min-height: 28px;
min-height: 36px;
padding: 0 10px;
border: 1px solid rgba(224, 100, 75, 0.32);
border-radius: 999px;
@@ -1178,7 +1180,7 @@ button:disabled {
.settings-add-token button {
align-self: end;
min-height: 36px;
min-height: 44px;
padding: 0 14px;
border: 0;
border-radius: 999px;
@@ -1204,8 +1206,7 @@ button:disabled {
}
.settings-nav {
grid-template-columns: repeat(5, minmax(120px, 1fr));
overflow-x: auto;
grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.settings-apply-card {
@@ -1215,6 +1216,14 @@ button:disabled {
}
@media (max-width: 720px) {
.settings-nav {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.settings-nav button {
min-height: 58px;
}
.settings-apply-card {
align-items: stretch;
grid-template-columns: 1fr;