mirror of
https://github.com/nesquena/hermes-webui.git
synced 2026-05-25 11:10:18 +00:00
nesquena-hermes
d67036db24
* fix(ui): workspace panel collapse priority + visible project color dot
Two related sidebar UI bugs from project-ui-bugs.md:
1. Workspace panel header had no collapse priority. As the right panel
narrowed, all three header children (Workspace label, git badge,
icon buttons) compressed at the same rate because `.panel-header`
used `justify-content:space-between` with no flex-shrink ratios.
The icon buttons -- the actual primary controls -- could disappear
before the git badge (which is least-essential metadata).
Fix: declare `.rightpanel` as a `container-type:inline-size` container.
Replace `justify-content:space-between` with `gap:6px` plus
`margin-left:auto` on `.panel-actions`. Set flex-shrink:0 on
`.panel-actions` (icons never shrink), flex-shrink:2 on the label,
flex-shrink:3 on `.git-badge` (shrinks fastest), and
`min-width:0;text-overflow:ellipsis` for graceful intermediate
shrink. Add @container queries that crisply set `display:none` on
the git badge below 220px and on the label below 160px.
2. Project color dot was appended INSIDE the `.session-title` span,
which is `overflow:hidden;text-overflow:ellipsis`. Long titles
clipped the dot off entirely -- hiding the project marker exactly
when it was most needed. The timestamp was also `position:absolute`,
so the title's `flex:1` ran underneath it and there was nowhere
coherent to anchor the dot.
Fix: in sessions.js, append the dot to `titleRow` between title and
timestamp (a flex sibling, not inside the truncating title span).
In style.css, move `.session-time` from absolute positioning to
`margin-left:auto` in the flex row. Drop the
`margin-left:4px/vertical-align:middle` from
`.session-project-dot` (gap:6px on the row handles spacing).
Reduce `.session-item` padding-right at rest from 86px (which was
reserving space for the absolute timestamp) to 8px; expand to 40px
on hover/streaming/unread/menu-open/focus-within so the absolute
action button + attention indicator still have room.
Tests:
- tests/test_workspace_panel_session_list.py (14 new tests)
- tests/test_issue856_pinned_indicator_layout.py updated to reflect
the new flex-flow timestamp + reduced rest-padding
Full suite: 2433 passed, 47 skipped, 0 PR-related failures.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* fix(ui): remove duplicate margin-left:auto from .git-badge
With .panel-actions already carrying margin-left:auto, both .git-badge
and .panel-actions having auto margins split the free space equally,
centering the badge instead of keeping it adjacent to the label.
Remove margin-left:auto and margin-right:4px from .git-badge. The
panel-header gap:6px handles label→badge spacing; panel-actions
margin-left:auto owns the right-push. Layout: [label][badge][→][actions].
* fix(ui): mobile session-item padding 86px → 40px + git-badge margin fix
Two fixes from Opus independent review of #1089:
1. Mobile padding regression: .session-item mobile override had
padding:10px 86px 10px 12px — the 86px was reserving space for the
old position:absolute timestamp. Since the timestamp now lives in the
flex flow of .session-title-row (margin-left:auto), that 86px
reservation is wasted and pushes the timestamp ~76px from the right
edge, leaving dead space between it and the always-visible action
button. Fixed: 86px → 40px (matching desktop hover/attention rule,
only enough for the absolute action button at right:6px + 26px wide).
2. Duplicate margin-left:auto on .git-badge: the old rule from master
had margin-left:auto on .git-badge (for the old space-between layout).
With .panel-actions also having margin-left:auto, the two auto margins
split free space equally, floating the badge to the middle of the header
instead of keeping it flush against the label. Removed margin-left:auto
and margin-right:4px from .git-badge; gap:6px on .panel-header handles
label→badge spacing; .panel-actions margin-left:auto owns the right-push.
Updated tests:
- test_workspace_panel_session_list.py: assert 40px mobile padding
- test_issue856_pinned_indicator_layout.py: assert 40px mobile padding
Verified by Playwright visual QA:
- Desktop 250px: badge hidden, Workspace label visible, icons visible ✓
- Desktop 150px: badge hidden, label hidden, icons only ✓
- Project dots visible on long-title sessions (outside truncating title span) ✓
- Mobile: padding-right=40px, no layout overflow ✓
* docs: v0.50.220 release notes, test count 2481, roadmap
---------
Co-authored-by: Nathan Esquenazi <nesquena@gmail.com>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-authored-by: nesquena-hermes <nesquena-hermes@users.noreply.github.com>
