web: bound the comment composer's width, sharpen the page header
commit
b922433web: bound the comment composer's width, sharpen the page header
The inline per-line comment composer stretched to match the code table’s own width, which for a file with long lines meant a comment box far wider than comfortable reading/writing width — cap it at 640px.
A tree/blob view’s page title duplicated the exact path its breadcrumb
trail already spelled out, in the ordinary heading font, competing with
the breadcrumbs for the same information instead of grounding it: give
layout_split a path_title flag so those titles render in the same
monospace the path-shaped breadcrumbs already use, tuck the breadcrumbs
snug under the title as its subtitle, and add a header-bottom divider
(after the breadcrumbs, when present) so every page’s header reads as a
distinct zone from the content below it.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Reviews
Start a review
crates/cli/ents-web/src/assets/ents.css
@@ -312,15 +312,24 @@
.content h2, .pane h2 { margin: 26px 0 12px; font-size: 14px; font-weight: 600; }
.content h2:first-child, .pane h2:first-child { margin-top: 0; }
p.muted { margin-bottom: 16px; font-size: 13px; text-wrap: pretty; }
-.page-header { margin-bottom: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
+.page-header {
+ margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line);
+ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap;
+}
.page-title { font-size: 22px; font-weight: 600; letter-spacing: -.3px; line-height: 1.25; }
+/* A page-title that is itself a repository path (a tree/blob view -- the
+ * `.crumbs` trail right under it names the exact same path) -- monospace so
+ * it reads as the path it is, not prose competing with the crumb trail for
+ * the same information. */
+.page-title.path { font-family: var(--mono); font-size: 18px; word-break: break-all; }
.page-sub { margin-top: 5px; color: var(--ink-3); font-size: 13px; }
.page-header .mono { font-family: var(--mono); color: var(--ink-2); }
/* A `.crumbs` trail directly under a `.page-header` reads as its subtitle --
- * hug it to the title instead of the header's own bottom margin, and push
- * the larger gap to below the crumbs, in front of the page's content. */
-.page-header:has(+ .crumbs) { margin-bottom: 6px; }
-.page-header + .crumbs { margin-bottom: 22px; }
+ * hug it to the title instead of the header's own bottom border/margin, and
+ * move that border/gap to below the crumbs, in front of the page's content,
+ * so the title and its path trail read as one grouped header. */
+.page-header:has(+ .crumbs) { margin-bottom: 6px; padding-bottom: 0; border-bottom: none; }
+.page-header + .crumbs { margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
/* ========================= CARDS ========================= */
.card {
@@ -641,7 +650,7 @@
/* Inline comment composer (`assets/ents.js` clones `composer-template`). */
.blob tr.blob-composer td { padding: 0; background: var(--surface); }
.composer-form {
- margin: 5px 26px 8px 52px; background: var(--surface); border: 1px solid var(--accent);
+ margin: 5px 26px 8px 52px; max-width: 640px; background: var(--surface); border: 1px solid var(--accent);
border-radius: 9px; padding: 12px 13px; box-shadow: 0 4px 14px rgba(74, 63, 196, .1);
}
.composer-form textarea { min-height: 74px; }
crates/cli/ents-web/src/pages/commits.rs
@@ -279,6 +279,7 @@
&super::identity_label(&state),
super::Tab::Commits,
&subject,
+ false,
commits_sidebar(&sidebar_rows, object_id),
html! {
(super::child_crumbs("commits", "/commits", &super::short_oid(&object_id)))
crates/cli/ents-web/src/pages/files.rs
@@ -143,6 +143,7 @@
&super::identity_label(state),
super::Tab::Files,
"Files",
+ false,
tree_sidebar(&head_tree, "", ""),
html! {
(dir_listing(path, entries))
@@ -170,6 +171,7 @@
&super::identity_label(state),
super::Tab::Files,
path,
+ true,
tree_sidebar(&head_tree, path, path),
html! {
(crumbs(path))
@@ -198,6 +200,7 @@
&super::identity_label(state),
super::Tab::Files,
path,
+ true,
tree_sidebar(&head_tree, parent, path),
html! {
(crumbs(path))
crates/cli/ents-web/src/pages/issues.rs
@@ -56,6 +56,7 @@
&super::identity_label(&state),
super::Tab::Issues,
"Issues",
+ false,
issues_sidebar(&rows, None),
html! {
div.readable {
@@ -171,6 +172,7 @@
&super::identity_label(&state),
super::Tab::Issues,
&issue.title,
+ false,
issues_sidebar(&rows, Some(&id)),
html! {
(super::child_crumbs("issues", "/issues", ents_forge::abbreviate_id(&id)))
crates/cli/ents-web/src/pages/mod.rs
@@ -366,11 +366,18 @@
/// page's own `.page-header` title and `pane` body) on the right. Every
/// selection in the sidebar is a real URL and the sidebar always renders,
/// so the split stays SSR-friendly (`docs/web-workbench-plan.adoc`).
+///
+/// `path_title` marks `title` itself as a repository-relative path
+/// (`super::files`'s tree/blob views, the only pages whose title is a path
+/// rather than a name) so the title renders in `.page-title.path`'s
+/// monospace, matching the `.crumbs` trail underneath it instead of
+/// clashing with it in the ordinary heading font.
pub(crate) fn layout_split(
repo: &RepoHeader,
identity: &str,
active: Tab,
title: &str,
+ path_title: bool,
sidebar: Markup,
pane: Markup,
) -> Markup {
@@ -383,7 +390,7 @@
div.split {
nav.tree { (sidebar) }
main.pane {
- div.page-header { h1.page-title { (title) } }
+ div.page-header { h1.page-title.path[path_title] { (title) } }
(pane)
}
}