refactor(ui): simplify branch status display and adjust layout

The changes simplify how branch status is shown in HistoryPanel.
The remoteName helper and the check icon were removed.
Status is composed inline with the label for local and remote branches.
CSS tweaks wrap content and adjust widths for better responsiveness.

- Remove remoteName helper and Check icon from HistoryPanel
- Inline status text for local/remote branches and avoid icons
- Improve graph layout: wrap refs and constrain widths on hover
This commit is contained in:
Christoph Brandau
2026-08-13 20:06:27 +02:00
parent b6b9964a93
commit cc0f1c076f
2 changed files with 37 additions and 16 deletions
+26 -2
View File
@@ -2559,8 +2559,10 @@
}
.branch-ref-cluster {
display: inline-flex;
flex: 0 1 auto;
align-items: center;
min-width: 0;
max-width: 100%;
margin-left: -10px;
}
.compact-ref-chip {
@@ -2664,7 +2666,8 @@
.graph-row:hover .compact-ref-chip.branch,
.graph-row.selected .compact-ref-chip.branch,
.graph-row:focus-within .compact-ref-chip.branch {
max-width: min(62%, 260px);
flex: 1 1 auto;
max-width: 100%;
padding-right: 8px;
border-color: color-mix(in srgb, var(--ref-lane-color, #69a7ff) 64%, transparent);
background:
@@ -2673,6 +2676,18 @@
inset 2px 0 0 var(--ref-lane-color, #69a7ff),
0 3px 12px color-mix(in srgb, var(--ref-lane-color, #69a7ff) 12%, rgba(0,0,0,.24));
}
.graph-row:hover .commit-ref-strip,
.graph-row.selected .commit-ref-strip,
.graph-row:focus-within .commit-ref-strip {
flex-wrap: wrap;
row-gap: 4px;
}
.graph-row:hover .branch-ref-cluster,
.graph-row.selected .branch-ref-cluster,
.graph-row:focus-within .branch-ref-cluster {
flex: 0 0 auto;
max-width: min(100%, 320px);
}
.graph-row:hover .compact-ref-branch-icon,
.graph-row.selected .compact-ref-branch-icon,
.graph-row:focus-within .compact-ref-branch-icon {
@@ -3069,8 +3084,17 @@
}
@media (hover: none) {
.commit-ref-strip {
flex-wrap: wrap;
row-gap: 4px;
}
.branch-ref-cluster {
flex: 0 0 auto;
max-width: min(100%, 320px);
}
.compact-ref-chip.branch {
max-width: min(62%, 260px);
flex: 1 1 auto;
max-width: 100%;
padding-right: 8px;
}
.compact-ref-chip.branch > span,