Skip to content

Connect fork-point and branch headers to their anchor message #238

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cboos merged 2 commits into from
Jun 24, 2026
Merged

Connect fork-point and branch headers to their anchor message #238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
25c07ec
Connect fork-point and branch headers to their anchor message
cboos Jun 24, 2026
4d44872
Square the branch-header bottom to mirror the fork-point squared top
cboos Jun 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion claude_code_log/html/templates/components/message_styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -806,15 +806,29 @@ div.system-hook .header {
box-shadow: none;
border: none;
border-left: 3px solid var(--branch-point-color);
/* Dashed top border as a connector (mirrors .fork-point), and no bottom
margin so the header sticks to its own branch content below. The bottom
corners are squared (mirroring .fork-point's squared top) so the left
rail flows cleanly into the branch content rather than rounding off. */
border-top: 1px dashed var(--branch-point-color);
border-radius: 8px 8px 0 0;
padding: 8px 14px;
margin: 2em 0 1em 0;
margin: 2em 0 0 0;
}

.branch-header .header {
font-size: 1em;
margin-bottom: 0;
}

/* The header's own fold-bar sits at the bottom of the card; square its
bottom corners too so the squared branch-header bottom isn't undone by the
fold-bar's own rounded corners. Direct child only — never a fold-bar of a
message nested inside the branch content. */
.branch-header > .fold-bar {
border-radius: 0;
}

.branch-header .fold-bar[data-border-color="session-header"] .fold-bar-section.folded {
border-bottom-color: var(--branch-point-color);
}
Expand Down
11 changes: 8 additions & 3 deletions claude_code_log/html/templates/components/session_nav_styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,14 +125,19 @@ a.session-backlink:hover {
line-height: 1.3;
}

/* Fork point element — standalone structural element after a fork message */
/* Fork point element — rendered inside the fork node's .children, so it
reads as hanging off the message above it. Pull it up against that
message (negative top margin cancels the card's 1em bottom margin) and
add a dashed top border as a connector, while the .children indent still
shows it's subordinate. */
.fork-point {
margin: 8px 0 2em 0;
margin: -1.2em 0 2em 0;
padding: 8px 14px;
font-size: 0.85em;
color: var(--text-muted, #6c757d);
border-left: 3px solid var(--fork-point-color);
border-radius: 8px;
border-top: 1px dashed var(--fork-point-color);
border-radius: 0 0 8px 8px;
}

.fork-point-header {
Expand Down
Loading
Loading