Style the council VERDICT box as a stamp, not full-width crooked bar #92

New issue

Open

opened 2026-06-07 13:27:02 +00:00 by rawan · 3 comments

rawan commented

2026-06-07 13:27:02 +00:00

Member

Problem

The VERDICT box (shown after "CONSULTING THE COUNCIL") spans the full width and is tilted with rotate(-1deg), so it reads as a crooked bar rather than a stamp.

Desired

Make it look like a stamp:

Not full width — size to content / cap the max width.
Drop the slight rotation (or make it a deliberate stamp-style tilt with a badge look), so it doesn't read as a crooked line.

Location

crates/hero_shrimp_web/ui/src/components/visuals/CouncilRoundtable.tsx L60-66 — the verdict Show block (rounded-md border border-good/50 bg-good/10 p-2, transform: rotate(-1deg)).

## Problem The VERDICT box (shown after "CONSULTING THE COUNCIL") spans the full width and is tilted with `rotate(-1deg)`, so it reads as a crooked bar rather than a stamp. ## Desired Make it look like a stamp: - Not full width — size to content / cap the max width. - Drop the slight rotation (or make it a deliberate stamp-style tilt with a badge look), so it doesn't read as a crooked line. ## Location `crates/hero_shrimp_web/ui/src/components/visuals/CouncilRoundtable.tsx` L60-66 — the verdict `Show` block (`rounded-md border border-good/50 bg-good/10 p-2`, `transform: rotate(-1deg)`).

rawan commented

2026-06-07 15:12:01 +00:00

Author

Member

Implementation Spec for Issue #92

Objective

Restyle the council verdict box in CouncilRoundtable.tsx so it reads as a deliberate stamp/badge — sized to its content with a capped max width — rather than a full-width bar that looks accidentally tilted.

Findings

Framework is Tailwind CSS. The good color tokens are CSS-variable-backed in tailwind.config.js, so bg-good/10 / border-good/50 opacity modifiers are valid.
BuildReport.tsx already has a stamp idiom: a content-sized inline-flex badge with font-bold, a solid border, and animation: stampThud ..., and it does not set its own transform — the tilt comes from the keyframe.
Root cause of the crooked bar: the verdict div is a full-width block with an inline transform: rotate(-1deg), so the tilt reads as a crooked line. (The shared stampThud keyframe also resolves to rotate(-8deg), so there is a snap when the entrance animation ends.)

Files to Modify

crates/hero_shrimp_web/ui/src/components/visuals/CouncilRoundtable.tsx — the verdict Show block (L60-66). Only file changed; no CSS/config changes.

Implementation Plan

Step 1: Make the verdict box content-sized, capped, and drop the stray inline rotation

File: crates/hero_shrimp_web/ui/src/components/visuals/CouncilRoundtable.tsx

Current:

<div class="mt-2 rounded-md border border-good/50 bg-good/10 p-2 anim-stamp"
     style={{ animation: "stampThud 0.5s cubic-bezier(.2,.8,.3,1)", transform: "rotate(-1deg)" }}>

Replacement:

<div class="mt-2 inline-block max-w-[28rem] rounded-md border-2 border-good/60 bg-good/10 px-3 py-2 shadow-sm anim-stamp"
     style={{ animation: "stampThud 0.5s cubic-bezier(.2,.8,.3,1)" }}>

Add inline-block + max-w-[28rem] so the box shrink-wraps to content and is capped (no longer full-width).
Remove the standalone transform: rotate(-1deg); the deliberate stamp tilt now comes solely from the stampThud keyframe, matching the BuildReport stamp.
Reinforce badge look: border -> border-2, border-good/50 -> border-good/60, add shadow-sm, make the label font-bold, padding p-2 -> px-3 py-2.
Keep anim-stamp and the animation inline style so the prefers-reduced-motion guard still applies.

Step 2: Verify & build

Confirm nothing else depends on the removed inline transform (it was local to this element).
Run the UI build/typecheck from crates/hero_shrimp_web/ui.

Acceptance Criteria

Verdict box is no longer full-width; shrink-wraps to content, capped at a max width.
Standalone transform: rotate(-1deg) removed.
Box reads as a deliberate stamp/badge, not a crooked line.
anim-stamp class + stampThud animation retained (reduced-motion guard intact).
UI builds/typechecks with no new errors.
No files other than CouncilRoundtable.tsx modified.

Notes

max-w-[28rem] is a cap (not a fixed width) so short verdicts stay compact while multi-line verdicts wrap.
Adjusting the resting tilt would mean editing the shared stampThud keyframe, which also affects the BuildReport stamp — out of scope here.

## Implementation Spec for Issue #92 ### Objective Restyle the council verdict box in `CouncilRoundtable.tsx` so it reads as a deliberate stamp/badge — sized to its content with a capped max width — rather than a full-width bar that looks accidentally tilted. ### Findings - Framework is **Tailwind CSS**. The `good` color tokens are CSS-variable-backed in `tailwind.config.js`, so `bg-good/10` / `border-good/50` opacity modifiers are valid. - `BuildReport.tsx` already has a stamp idiom: a content-sized `inline-flex` badge with `font-bold`, a solid border, and `animation: stampThud ...`, and it does **not** set its own `transform` — the tilt comes from the keyframe. - Root cause of the crooked bar: the verdict div is a full-width block with an inline `transform: rotate(-1deg)`, so the tilt reads as a crooked line. (The shared `stampThud` keyframe also resolves to `rotate(-8deg)`, so there is a snap when the entrance animation ends.) ### Files to Modify - `crates/hero_shrimp_web/ui/src/components/visuals/CouncilRoundtable.tsx` — the verdict `Show` block (L60-66). Only file changed; no CSS/config changes. ### Implementation Plan #### Step 1: Make the verdict box content-sized, capped, and drop the stray inline rotation File: `crates/hero_shrimp_web/ui/src/components/visuals/CouncilRoundtable.tsx` Current: ```tsx <div class="mt-2 rounded-md border border-good/50 bg-good/10 p-2 anim-stamp" style={{ animation: "stampThud 0.5s cubic-bezier(.2,.8,.3,1)", transform: "rotate(-1deg)" }}> ``` Replacement: ```tsx <div class="mt-2 inline-block max-w-[28rem] rounded-md border-2 border-good/60 bg-good/10 px-3 py-2 shadow-sm anim-stamp" style={{ animation: "stampThud 0.5s cubic-bezier(.2,.8,.3,1)" }}> ``` - Add `inline-block` + `max-w-[28rem]` so the box shrink-wraps to content and is capped (no longer full-width). - Remove the standalone `transform: rotate(-1deg)`; the deliberate stamp tilt now comes solely from the `stampThud` keyframe, matching the BuildReport stamp. - Reinforce badge look: `border` -> `border-2`, `border-good/50` -> `border-good/60`, add `shadow-sm`, make the label `font-bold`, padding `p-2` -> `px-3 py-2`. - Keep `anim-stamp` and the `animation` inline style so the `prefers-reduced-motion` guard still applies. #### Step 2: Verify & build - Confirm nothing else depends on the removed inline transform (it was local to this element). - Run the UI build/typecheck from `crates/hero_shrimp_web/ui`. ### Acceptance Criteria - [ ] Verdict box is no longer full-width; shrink-wraps to content, capped at a max width. - [ ] Standalone `transform: rotate(-1deg)` removed. - [ ] Box reads as a deliberate stamp/badge, not a crooked line. - [ ] `anim-stamp` class + `stampThud` animation retained (reduced-motion guard intact). - [ ] UI builds/typechecks with no new errors. - [ ] No files other than `CouncilRoundtable.tsx` modified. ### Notes - `max-w-[28rem]` is a cap (not a fixed width) so short verdicts stay compact while multi-line verdicts wrap. - Adjusting the resting tilt would mean editing the shared `stampThud` keyframe, which also affects the BuildReport stamp — out of scope here.

rawan commented

2026-06-07 15:15:35 +00:00

Author

Member

Build / Test Results

This UI package (crates/hero_shrimp_web/ui) has no unit test suite (only a build script). Validation was done via TypeScript typecheck and the production build.

vite build: PASS — 99 modules transformed, built successfully, no errors.
tsc --noEmit: the changed file (CouncilRoundtable.tsx) introduces no type errors. (Pre-existing type errors exist in unrelated files: ChatActivity.tsx, CostBadge.tsx, HeroWelcome.tsx, store.ts — these are unchanged by this issue.)

The styling change compiles cleanly and produces the expected build output.

## Build / Test Results This UI package (`crates/hero_shrimp_web/ui`) has no unit test suite (only a `build` script). Validation was done via TypeScript typecheck and the production build. - `vite build`: PASS — 99 modules transformed, built successfully, no errors. - `tsc --noEmit`: the changed file (`CouncilRoundtable.tsx`) introduces no type errors. (Pre-existing type errors exist in unrelated files: ChatActivity.tsx, CostBadge.tsx, HeroWelcome.tsx, store.ts — these are unchanged by this issue.) The styling change compiles cleanly and produces the expected build output.

rawan commented

2026-06-07 15:16:30 +00:00

Author

Member

Implementation Summary

Restyled the council verdict box so it reads as a deliberate stamp/badge instead of a full-width crooked bar.

Changes

crates/hero_shrimp_web/ui/src/components/visuals/CouncilRoundtable.tsx (verdict Show block):
- Added inline-block max-w-[28rem] so the box shrink-wraps to its content and is capped, no longer spanning full width.
- Removed the standalone inline transform: rotate(-1deg); the deliberate stamp tilt now comes solely from the existing stampThud entrance keyframe, matching the BuildReport.tsx stamp idiom and eliminating the post-animation snap.
- Reinforced the badge look: border to border-2, border-good/50 to border-good/60, added shadow-sm, padding p-2 to px-3 py-2, and made the label font-bold.
- Kept the anim-stamp class and stampThud animation so the prefers-reduced-motion guard still applies.
Regenerated production assets under crates/hero_shrimp_web/static/ via vite build.

Validation

vite build: PASS (99 modules transformed, no errors).
No new type errors in the changed file.

Acceptance Criteria

Verdict box is no longer full-width; shrink-wraps to content, capped at a max width.
Standalone transform: rotate(-1deg) removed.
Box reads as a deliberate stamp/badge, not a crooked line.
anim-stamp class + stampThud animation retained.
UI builds with no new errors.
Only CouncilRoundtable.tsx source modified (plus regenerated build assets).

## Implementation Summary Restyled the council verdict box so it reads as a deliberate stamp/badge instead of a full-width crooked bar. ### Changes - `crates/hero_shrimp_web/ui/src/components/visuals/CouncilRoundtable.tsx` (verdict `Show` block): - Added `inline-block max-w-[28rem]` so the box shrink-wraps to its content and is capped, no longer spanning full width. - Removed the standalone inline `transform: rotate(-1deg)`; the deliberate stamp tilt now comes solely from the existing `stampThud` entrance keyframe, matching the `BuildReport.tsx` stamp idiom and eliminating the post-animation snap. - Reinforced the badge look: `border` to `border-2`, `border-good/50` to `border-good/60`, added `shadow-sm`, padding `p-2` to `px-3 py-2`, and made the label `font-bold`. - Kept the `anim-stamp` class and `stampThud` animation so the `prefers-reduced-motion` guard still applies. - Regenerated production assets under `crates/hero_shrimp_web/static/` via `vite build`. ### Validation - `vite build`: PASS (99 modules transformed, no errors). - No new type errors in the changed file. ### Acceptance Criteria - [x] Verdict box is no longer full-width; shrink-wraps to content, capped at a max width. - [x] Standalone `transform: rotate(-1deg)` removed. - [x] Box reads as a deliberate stamp/badge, not a crooked line. - [x] `anim-stamp` class + `stampThud` animation retained. - [x] UI builds with no new errors. - [x] Only `CouncilRoundtable.tsx` source modified (plus regenerated build assets).