Side A implements a real, tested UI fix (fixed-width columns, winner-aware slider coloring) with accompanying JS/CSS logic and a new test assertion, delivering lasting user-facing value. Side B is a trivial cleanup removing an unused function and two CSS lines, with no functional impact or tests.
constitution · epochs · watch · epoch 3
comparison
c_9c6e7864a657 (tommy-mor) vs c_16fc6778276f (tommy-mor)
download prompt · raw event · cmp_baa264c286aaa8
council reasoning
A delivers a real UX fix: fixed vote-HUD column widths stop slider-track reflow and data-winner styling colors the track toward the leading side, with matching JS/CSS/HTML and a test assertion. B only deletes an unused RPC helper and two border rules under a 'nit' message, so it is trivial cleanup with little lasting product value.
Side A makes functional, user-visible improvements by stabilizing the vote HUD layout with fixed column sizing, preventing slider reflow, and updating the slider track to visually indicate the current winning side via a new data-winner attribute and JavaScript/CSS changes, with a corresponding test assertion. Side B only removes an apparently unused helper function and two CSS border declarations, a small cleanup with little demonstrated lasting impact.
sides
A — c_9c6e7864a657 (tommy-mor)
message
[df844c52] Stabilize vote HUD layout and color the slider toward the winning side. Fixed-width ratio and action columns stop track reflow flicker; track fill flips to the right when the right item leads. Co-authored-by: Cursor <cursoragent@cursor.com>
diff preview
diff --git a/server/src/html/mod.rs b/server/src/html/mod.rs
index dcf05df143825f4f8ba9ee3b3b5f8ab2e69950c7..588cf62bcea608ed4ede363810f022a67b43b960 100644
--- a/server/src/html/mod.rs
+++ b/server/src/html/mod.rs
@@ -529,5 +529,6 @@ mod tests {
assert!(SORTER_UI_JS.contains("var divisor = gcd(left, right)"));
assert!(SORTER_UI_JS.contains("ratioDisplay.textContent = left + ':' + right"));
assert!(SORTER_UI_JS.contains("--vote-slider-pct"));
+ assert!(SORTER_UI_JS.contains("dataset.winner"));
}
}
diff --git a/server/src/html/vote.rs b/server/src/html/vote.rs
index 872d23ddf6c18fab016a624de85736fdc2dcde63..d32b206e2fb043466c0ce333d7d215dc1a3e91c9 100644
--- a/server/src/html/vote.rs
+++ b/server/src/html/vote.rs
@@ -154,6 +154,7 @@ fn vote_hud_form(
}
label class="vote-hud-slider" {
input type="range" id="vote-preference-slider" min="0" max="100" value="50"
+ data-winner="left"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"
aria-label=(format!("Preference: {} vs {}", left.as_str(), right.as_str()));
}
diff --git a/server/static/sorter.css b/server/static/sorter.css
index 50e34484c2b50d2eeb18f8d0ec4f34338363811a..7b485dd232f60363f4eff0c5a362addf191d05c6 100644
--- a/server/static/sorter.css
+++ b/server/static/sorter.css
@@ -316,9 +316,12 @@ h1 {
max-width: 56rem;
margin: 0 auto;
display: grid;
- grid-template-columns: min-content minmax(0, 1fr) auto;
+ /* Fixed side columns so ratio text / buttons never resize the slider track. */
+ grid-template-columns: var(--vote-ratio-col) minmax(0, 1fr) var(--vote-actions-col);
gap: 0.5rem 0.65rem;
align-items: center;
+ --vote-ratio-col: 3.25rem;
+ --vote-actions-col: 11.5rem;
}
.vote-hud #vote-compare-form {
@@ -327,13 +330,23 @@ h1 {
.vote-hud .vote-ratio-readout {
margin: 0;
+ width: var(--vote-ratio-col);
+ min-width: var(--vote-ratio-col);
text-align: center;
+ white-space: nowrap;
+}
+
+.vote-hud .vote-ratio-readout .small {
+ display: none;
}
.vote-hud .vote-compare-actions {
margin-top: 0;
justify-content: flex-end;
gap: 0.5rem;
+ width: var(--vote-actions-col);
+ min-width: var(--vote-actions-col);
+ flex-shrink: 0;
}
.vote-hud .btn-primary,
@@ -416,15 +429,13 @@ h1 {
}
.vote-hud .vote-ratio-readout strong {
+ display: inline-block;
+ min-width: 3ch;
color: var(--accent);
font-variant-numeric: tabular-nums;
font-size: 1.1rem;
}
-.vote-hud .vote-ratio-readout .small {
- font-size: 0.75rem;
-}
-
.vote-compare-next {
color: var(--accent);
text-decoration: none;
@@ -459,7 +470,11 @@ h1 {
cursor: pointer;
}
-.vote-hud-slider input[type="range"]::-webkit-slider-runnable-track {
+.vote-hud-slider input[type="range"] {
+ --vote-track-muted: color-mix(in oklch, var(--muted) 55%, var(--bg));
+}
+
+.vote-hud-slider input[type="range"][data-winner="left"]::-webkit-slider-runnable-track {
height: 0.65rem;
border-radius: 0;
border: 2px solid var(--border);
@@ -467,8 +482,21 @@ h1 {
to right,
var(--accent) 0%,
var(--accent) var(--vote-slider-pct, 50%),
- color-mix(in oklch, var(--muted) 55%, var(--bg)) var(--vote-slider-pct, 50%),
- color-mix(in oklch, var(--muted) 55%, var(--bg)) 100%
+ var(--vote-track-muted) var(--vote-slider-pct, 50%),
+ var(--vote-track-muted) 100%
+ );
+}
+
+.vote-hud-slider input[type="range"][data-winner="right"]::-webkit-slider-runnable-track {
+ height: 0.65rem;
+ border-radius: 0;
+ border: 2px solid var(--border);
+ background: linear-gradient(
+ to right,
+ var(--vote-track-muted) 0%,
+ var(--vote-track-muted) var(--vote-slider-pct, 50%),
+ var(--accent) var(--vote-slider-pct, 50%),
+ var(--accent) 100%
);
}
@@ -484,17 +512,35 @@ h1 {
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
-.vote-hud-slider input[type="range"]::-moz-range-track {
+.vote-hud-slider input[type="range"][data-winner="left"]::-moz-range-track,
+.vote-hud-slider input[type="range"][data-winner="right"]::-moz-range-track {
height: 0.65rem;
border-radius: 0;
border: 2px solid var(--border);
- background: color-mix(in oklch, var(--muted) 55%, var(--bg));
+}
+
+.vote-hud-slider input[type="range"][data-winner="left"]::-moz-range-track {
+ background: linear-gradient(
+ to right,
+ var(--accent) 0%,
+ var(--accent) var(--vote-slider-pct, 50%),
+ var(--vote-track-muted) var(--vote-slider-pct, 50%),
+ var(--vote-track-muted) 100%
+ );
+}
+
+.vote-hud-slider input[type="range"][data-winner="right"]::-moz-range-track {
+ background: linear-gradient(
+ to right,
+ var(--vote-track-muted) 0%,
+ var(--vote-track-muted) var(--vote-slider-pct, 50%),
+ var(--accent) var(--vote-slider-pct, 50%),
+ var(--accent) 100%
+ );
}
.vote-hud-slider input[type="range"]::-moz-range-progress {
- height: 0.65rem;
- border-radius: 0;
- background: var(--accent);
+ background: transparent;
}
.vote-hud-slider input[type="range"]::-moz-range-thumb {
@@ -563,6 +609,14 @@ h1 {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
gap: 0.35rem;
+ --vote-ratio-col: 100%;
+ --vote-actions-col: 100%;
+ }
+
+ .vote-hud .vote-ratio-readout,
+ .vote-hud .vote-compare-actions {
+ width: auto;
+ min-width: 0;
}
.vote-hud .vote-compare-actions {
diff --git a/server/static/sorter_ui.js b/server/static/sorter_ui.js
index c438851b792ad85f8b6106b7c3fad9ea945275f7..f665b45f4fd4771427dc4c37e563e4976873beee 100644
--- a/server/static/sorter_ui.js
+++ b/server/static/sorter_ui.js
@@ -148,6 +148,7 @@
if (leftInput) leftInput.value = String(left);
if (rightInput) rightInput.value = String(right);
if (ratioDisplay) ratioDisplay.textContent = left + ':' + right;
+ slider.dataset.winner = left >= right ? 'left' : 'right';
}
slider.addEventListener('input', update);
update();
B — c_16fc6778276f (tommy-mor)
message
[e202d8bd] nit
diff preview
diff --git a/server/src/html/forum.rs b/server/src/html/forum.rs
index 9d9eae409e9df24d6946a6f8782da9b1d536fe3c..f6e45b05bb92126966e304619f80ef1d45be7a4b 100644
--- a/server/src/html/forum.rs
+++ b/server/src/html/forum.rs
@@ -1051,13 +1051,6 @@ pub(crate) fn expand_public_new_thread_rpc_value() -> String {
template_json_compact(&HtmlUiAction::ExpandPublicNewThreadForm).expect("static json")
}
-pub(crate) fn expand_room_new_thread_rpc_value(nav: &ThreadNav) -> String {
- template_json_compact(&HtmlUiAction::ExpandRoomNewThreadForm {
- room_wire: nav.room_wire.clone(),
- })
- .expect("static json")
-}
-
pub(crate) fn login_to_post_hint_markup() -> Markup {
html! {
p class="muted" { "log in to post" }
diff --git a/server/static/theme_retro_craft.css b/server/static/theme_retro_craft.css
index fa23d5088e4966d3ebd7e95d4c7f8f8bbebae266..00714575bfa533d1d9c66653b9089642e2b0a6ca 100644
--- a/server/static/theme_retro_craft.css
+++ b/server/static/theme_retro_craft.css
@@ -468,8 +468,6 @@ body.view-ontology #controls {
}
section#thread-compose textarea {
border-radius: 0;
- border-left: none;
- border-right: none;
box-sizing: border-box;
display: block;
margin: 0;
Hardlinks — judgments / attempts / prompt
judgments
attempts
Prompt text is loaded only by the download route.