web: fix picker pill layout, plain-text errors, header spacing
commit
fad6dedweb: fix picker pill layout, plain-text errors, header spacing
Three quirks turned up in a screenshot pass over the design handoff:
state/verdict picker pills stacked their dot above the label instead of
beside it (.picker .opt inherited form label’s column flex-direction,
never overriding it); every error page rendered as bare unstyled text
(`Error’s `IntoResponse returned a plain string body); and a page’s
title sat further from its own breadcrumb trail than the breadcrumbs sat
from the content below, backwards from how a subtitle should hug its
title.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Reviews
No reviews of this commit yet — record a verdict below.
Start a review
crates/cli/ents-web/src/error.rs
@@ -170,6 +170,25 @@
}
_ => StatusCode::INTERNAL_SERVER_ERROR,
};
- (status, self.to_string()).into_response()
+ let reason = status.canonical_reason().unwrap_or("Error");
+ let body = maud::html! {
+ (maud::DOCTYPE)
+ html lang="en" {
+ head {
+ meta charset="utf-8";
+ meta name="viewport" content="width=device-width, initial-scale=1";
+ meta name="color-scheme" content="light dark";
+ title { "git ents: " (status.as_u16()) " " (reason) }
+ link rel="stylesheet" href="/style.css";
+ }
+ body {
+ main.content {
+ div.page-header { h1.page-title { (status.as_u16()) " " (reason) } }
+ div.blankslate { h2 { (reason) } p { (self.to_string()) } }
+ }
+ }
+ }
+ };
+ (status, body).into_response()
}
}
crates/cli/ents-web/src/assets/ents.css
@@ -316,6 +316,11 @@
.page-title { font-size: 22px; font-weight: 600; letter-spacing: -.3px; line-height: 1.25; }
.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; }
/* ========================= CARDS ========================= */
.card {
@@ -548,7 +553,7 @@
* buttons where the current option fills with its own chip color. */
.picker { display: flex; flex-wrap: wrap; gap: 6px; }
.picker button, .picker .opt {
- display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px;
+ display: inline-flex; flex-direction: row; align-items: center; gap: 6px; height: 32px; padding: 0 13px;
border-radius: var(--radius-inner); cursor: pointer; font-size: 12.5px; font-weight: 500;
color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line);
}