Side B fixes a real, user-visible layout bug (view counter overlapping login controls) with a small, targeted change to markup and CSS. Side A is mostly CSS styling tweaks for rank numbering plus a dedent/removal of a CSS class wrapper (minor cleanup with no functional bugfix), making both modest but B's fix is a clearer, more concrete improvement.
constitution · epochs · watch · epoch 3
comparison
c_e4fb43f04791 (tommy-mor) vs c_0957178bd303 (tommy-mor)
download prompt · raw event · cmp_08fa82c4a116df
council reasoning
B fixes a real layout bug by moving the view counter into the top-nav flow and dropping fixed positioning so it no longer overlaps auth links—a small, necessary structural fix. A mostly unwraps a vote-compare shell (markup churn) and restyles ontology rank counters across themes, which is polish rather than a functional fix.
Side B fixes a concrete UI/layout bug by moving the view-count element into the existing top navigation and changing its CSS from `position: fixed` to normal flow with `margin-right: auto`, preventing overlap with the login/account controls in a maintainable way. Side A mostly removes a wrapper `section` around the vote-compare markup and updates ranking-list styling across themes; while the CSS improvements are useful, the HTML restructuring is largely cosmetic and the overall change is less directly tied to a lasting functional fix.
sides
A — c_e4fb43f04791 (tommy-mor)
message
[09842c93] remove shell
diff preview
diff --git a/server/src/html/garden.rs b/server/src/html/garden.rs
index 8fc6be1de8dd975f9547de615809222236be4b70..76ba96e45c9e16291a6ccd8096fdd01b274c1560 100644
--- a/server/src/html/garden.rs
+++ b/server/src/html/garden.rs
@@ -1321,55 +1321,53 @@ async fn vote_compare_inner(
.expect("vote compare rpc json");
let body = html! {
- section class="vote-compare-shell" {
- h2 { "compare" }
- div class="vote-compare-pair" {
- a class="vote-compare-item" href=(nav.garden_item_href(&left)) {
- code { (item_display_path(left.as_str())) }
- }
- span class="vote-compare-vs" { "vs" }
- a class="vote-compare-item" href=(nav.garden_item_href(&right)) {
- code { (item_display_path(right.as_str())) }
- }
- }
- div id="vote-edge-history-region" {
- (edge_history)
- }
- @if can_post {
- form id="vote-compare-form" method="POST" action="/ui" {
- input type="hidden" name=(UI_RPC_FIELD) value=(rpc_json);
- div class="vote-thread-picker" {
- label class="vote-thread-picker-label" { "thread" }
- select id="vote-thread-select" name="thread_tag" aria-label="Thread to post vote into" {
- @if thread_tags.is_empty() {
- option value="vote" selected { "#vote" }
- }
- @for t in &thread_tags {
- @if *t == auto_thread {
- option value=(t) selected { "#" (t) }
- } @else {
- option value=(t) { "#" (t) }
- }
- }
- }
+ h2 { "compare" }
+ div class="vote-compare-pair" {
+ a class="vote-compare-item" href=(nav.garden_item_href(&left)) {
+ code { (item_display_path(left.as_str())) }
+ }
+ span class="vote-compare-vs" { "vs" }
+ a class="vote-compare-item" href=(nav.garden_item_href(&right)) {
+ code { (item_display_path(right.as_str())) }
+ }
+ }
+ div id="vote-edge-history-region" {
+ (edge_history)
+ }
+ @if can_post {
+ form id="vote-compare-form" method="POST" action="/ui" {
+ input type="hidden" name=(UI_RPC_FIELD) value=(rpc_json);
+ div class="vote-thread-picker" {
+ label class="vote-thread-picker-label" { "thread" }
+ select id="vote-thread-select" name="thread_tag" aria-label="Thread to post vote into" {
+ @if thread_tags.is_empty() {
+ option value="vote" selected { "#vote" }
}
- input type="hidden" name="ratio_left" id="vote-ratio-left" value="50";
- input type="hidden" name="ratio_right" id="vote-ratio-right" value="50";
- label class="vote-compare-slider-label" {
- span id="vote-slider-left-label" { (item_display_path(left.as_str())) }
- input type="range" id="vote-preference-slider" min="0" max="100" value="50"
- aria-valuemin="0" aria-valuemax="100";
- span id="vote-slider-right-label" { (item_display_path(right.as_str())) }
+ @for t in &thread_tags {
+ @if *t == auto_thread {
+ option value=(t) selected { "#" (t) }
+ } @else {
+ option value=(t) { "#" (t) }
+ }
}
- label class="vote-explain-label" { "reason (required)" }
- textarea name="explanation" id="vote-explain" rows="5" placeholder="why this split?" required {}
- div id="vote-compare-errors" {}
- p { button type="submit" { "post vote" } }
}
- } @else {
- p class="muted" { a href="/login" { "log in" } " to post this vote." }
}
+ input type="hidden" name="ratio_left" id="vote-ratio-left" value="50";
+ input type="hidden" name="ratio_right" id="vote-ratio-right" value="50";
+ label class="vote-compare-slider-label" {
+ span id="vote-slider-left-label" { (item_display_path(left.as_str())) }
+ input type="range" id="vote-preference-slider" min="0" max="100" value="50"
+ aria-valuemin="0" aria-valuemax="100";
+ span id="vote-slider-right-label" { (item_display_path(right.as_str())) }
+ }
+ label class="vote-explain-label" { "reason (required)" }
+ textarea name="explanation" id="vote-explain" rows="5" placeholder="why this split?" required {}
+ div id="vote-compare-errors" {}
+ p { button type="submit" { "post vote" } }
}
+ } @else {
+ p class="muted" { a href="/login" { "log in" } " to post this vote." }
+ }
};
let page = layout_full_bleed_chromeless(
diff --git a/server/static/theme_default.css b/server/static/theme_default.css
index a441c4f79d8cf88f5a8240f9992f47dbbd1ab46b..fdcde86c718eb53cce8273e45a9844c2d8041f88 100644
--- a/server/static/theme_default.css
+++ b/server/static/theme_default.css
@@ -1270,8 +1270,12 @@ body.view-ontology-dark .ont-ranking-list li {
body.view-ontology-dark .ont-ranking-list li::before {
color: var(--meta);
content: counter(ont-rank) ".";
- font-size: 11px;
- min-width: 18px;
+ flex-shrink: 0;
+ font-size: 1.35rem;
+ font-weight: 700;
+ font-variant-numeric: tabular-nums;
+ line-height: 1;
+ min-width: 2.25ch;
text-align: right;
}
body.view-ontology-dark .ont-rank-score {
@@ -1424,8 +1428,12 @@ body.view-ontology-light .ont-ranking-list li {
body.view-ontology-light .ont-ranking-list li::before {
color: var(--meta);
content: counter(ont-rank) ".";
- font-size: 11px;
- min-width: 18px;
+ flex-shrink: 0;
+ font-size: 1.35rem;
+ font-weight: 700;
+ font-variant-numeric: tabular-nums;
+ line-height: 1;
+ min-width: 2.25ch;
text-align: right;
}
body.view-ontology-light .ont-rank-score {
diff --git a/server/static/theme_retro.css b/server/static/theme_retro.css
index 373f15bbd75b62604cdd14b9f0fadda2d6176991..61e1448b2f66a075c0e33325d6980448712fc927 100644
--- a/server/static/theme_retro.css
+++ b/server/static/theme_retro.css
@@ -135,6 +135,30 @@ body.view-ontology nav.breadcrumb a:hover {
body.view-ontology nav.breadcrumb a.bc-current { color: #111; font-weight: 600; }
body.view-ontology nav.breadcrumb .bc-sep { color: #888; padding: 0 2px; }
+body.view-ontology ol.ont-ranking-list {
+ counter-reset: ont-rank;
+ list-style: none;
+ margin: 0.5rem 0;
+ padding: 0;
+}
+body.view-ontology ol.ont-ranking-list li {
+ align-items: baseline;
+ counter-increment: ont-rank;
+ display: flex;
+ gap: 0.35rem;
+}
+body.view-ontology ol.ont-ranking-list li::before {
+ flex-shrink: 0;
+ color: #666;
+ content: counter(ont-rank) ".";
+ font-size: 1.35rem;
+ font-weight: 700;
+ font-variant-numeric: tabular-nums;
+ line-height: 1;
+ min-width: 2.25ch;
+ text-align: right;
+}
+
nav.breadcrumb.ont-sibling-nav {
margin-top: 0;
width: 100%;
diff --git a/server/static/theme_retro_craft.css b/server/static/theme_retro_craft.css
index 6eb9222184a8795d67a5d09d41de08c8ac1b148f..7da102040484c887833158a37c307d078205c701 100644
--- a/server/static/theme_retro_craft.css
+++ b/server/static/theme_retro_craft.css
@@ -742,12 +742,32 @@ body.view-ontology button.ont-garden-pin-ico:focus-visible {
outline-offset: 2px;
}
+body.view-ontology ol.ont-ranking-list {
+ counter-reset: ont-rank;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
body.view-ontology ol.ont-ranking-list li,
body.view-ontology ul.ont-group-list li {
display: flex;
align-items: baseline;
gap: 0.35rem;
}
+body.view-ontology ol.ont-ranking-list li {
+ counter-increment: ont-rank;
+}
+body.view-ontology ol.ont-ranking-list li::before {
+ flex-shrink: 0;
+ color: #5c574e;
+ content: counter(ont-rank) ".";
+ font-size: 1.35rem;
+ font-weight: 700;
+ font-variant-numeric: tabular-nums;
+ line-height: 1;
+ min-width: 2.25ch;
+ text-align: right;
+}
body.view-ontology ol.ont-ranking-list li .item-link,
body.view-ontology ul.ont-group-list li .item-link {
flex: 1;
B — c_0957178bd303 (tommy-mor)
message
[31b0a8c3] Put view count and auth links in the same top nav. Stops the fixed view counter from overlapping the login controls. Co-authored-by: Cursor <cursoragent@cursor.com>
diff preview
diff --git a/server/src/html/mod.rs b/server/src/html/mod.rs
index 5b9b73c7ad24499737f0576b3603c3ff5355251e..71db33abf6c1e869a48c9c331c2b74cf0fdcb576 100644
--- a/server/src/html/mod.rs
+++ b/server/src/html/mod.rs
@@ -143,10 +143,10 @@ pub(crate) fn layout(title: &str, body: Markup, views: u64, nav_user: Option<&st
script src="https://unpkg.com/idiomorph@0.3.0/dist/idiomorph.min.js" {}
}
body class="home" {
- @if views > 0 {
- span class="view-meta muted" { (views) " views" }
- }
nav class="top-nav" {
+ @if views > 0 {
+ span class="view-meta muted" { (views) " views" }
+ }
@if let Some(name) = nav_user {
span class="top-nav-user" data-testid="nav-user" { (name) }
a href="/login" data-testid="nav-account" { "account" }
diff --git a/server/static/sorter.css b/server/static/sorter.css
index e7aca23b426d504938b90b5a25ad06b07843ba02..6ab384de6bd04eb77f56a5dff57c0c901e1bf24c 100644
--- a/server/static/sorter.css
+++ b/server/static/sorter.css
@@ -28,10 +28,8 @@ body {
}
.view-meta {
- position: fixed;
- top: 0.1rem;
- right: 0.5rem;
font-size: 0.75rem;
+ margin-right: auto;
}
.top-nav {
Hardlinks — judgments / attempts / prompt
judgments
attempts
Prompt text is loaded only by the download route.