BitSquare/Codeman
2
0
Fork 0
mirror of https://github.com/Ark0N/Codeman.git synced 2026-10-08 08:29:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: improve tab and Ralph panel compact layout

Browse Source 
- Tabs now size to fit content (removed max-width)
- Close/gear icons hidden by default, appear on hover (with width transition)
- Tabs wrap to new row when container is full
- Ralph progress ring enlarged to 75px for better percentage display
- Tighter spacing in Ralph meta section

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
arkon
2026-01-20 18:05:43 +01:00
co-authored by Claude Opus 4.5
parent bef38234fa
commit e3d6049b19
1 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/web/public/styles.css
+23 -14
View File
@@ -69,6 +69,7 @@ body {
.session-tabs { .session-tabs {
display: flex; display: flex;
align-items: center; align-items: center;
flex-wrap: wrap;
gap: 2px; gap: 2px;
flex: 1; flex: 1;
overflow-x: auto; overflow-x: auto;
@@ -82,8 +83,8 @@ body {
.session-tab { .session-tab {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.35rem;
padding: 0.35rem 0.75rem; padding: 0.35rem 0.5rem;
background: transparent; background: transparent;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px; border-radius: 4px;
@@ -92,7 +93,6 @@ body {
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
transition: all 0.15s; transition: all 0.15s;
max-width: 220px;
} }
.session-tab:hover { .session-tab:hover {
@@ -124,15 +124,19 @@ body {
.session-tab .tab-close { .session-tab .tab-close {
opacity: 0; opacity: 0;
padding: 0 0.2rem; width: 0;
padding: 0;
font-size: 0.9rem; font-size: 0.9rem;
line-height: 1; line-height: 1;
color: var(--text-muted); color: var(--text-muted);
transition: opacity 0.15s; overflow: hidden;
transition: opacity 0.15s, width 0.15s, padding 0.15s;
} }
.session-tab:hover .tab-close { .session-tab:hover .tab-close {
opacity: 1; opacity: 1;
width: auto;
padding: 0 0.2rem;
} }
.session-tab .tab-close:hover { .session-tab .tab-close:hover {
@@ -322,16 +326,20 @@ body {
/* Session tab gear icon */ /* Session tab gear icon */
.session-tab .tab-gear { .session-tab .tab-gear {
opacity: 0; opacity: 0;
padding: 0 0.3rem; width: 0;
padding: 0;
font-size: 1rem; font-size: 1rem;
line-height: 1; line-height: 1;
color: var(--text-muted); color: var(--text-muted);
cursor: pointer; cursor: pointer;
transition: opacity 0.15s, transform 0.2s; overflow: hidden;
transition: opacity 0.15s, width 0.15s, padding 0.15s, transform 0.2s;
} }
.session-tab:hover .tab-gear { .session-tab:hover .tab-gear {
opacity: 1; opacity: 1;
width: auto;
padding: 0 0.3rem;
} }
.session-tab .tab-gear:hover { .session-tab .tab-gear:hover {
@@ -610,31 +618,32 @@ body {
/* Compact Progress Ring */ /* Compact Progress Ring */
.ralph-ring-compact { .ralph-ring-compact {
position: relative; position: relative;
width: 60px; width: 75px;
height: 60px; height: 75px;
flex-shrink: 0; flex-shrink: 0;
} }
.ralph-ring-compact .ralph-ring-percent { .ralph-ring-compact .ralph-ring-percent {
font-size: 0.9rem; font-size: 0.95rem;
font-weight: 600;
} }
.ralph-ring-compact .ralph-ring-label { .ralph-ring-compact .ralph-ring-label {
font-size: 0.5rem; font-size: 0.55rem;
} }
/* Compact Meta Info */ /* Compact Meta Info */
.ralph-meta-compact { .ralph-meta-compact {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.3rem; gap: 0.25rem;
min-width: 120px; min-width: 100px;
} }
.ralph-meta-compact .ralph-meta-item { .ralph-meta-compact .ralph-meta-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.1rem; gap: 0;
} }
.ralph-meta-compact .ralph-meta-label { .ralph-meta-compact .ralph-meta-label {