[tracking] polish: subtle refinement pass across all 5 pages#422
Closed
NiveditJain wants to merge 9 commits into
Closed
[tracking] polish: subtle refinement pass across all 5 pages#422NiveditJain wants to merge 9 commits into
NiveditJain wants to merge 9 commits into
Conversation
Same brutalist pixel-craft aesthetic, more carefully made. - globals.css: ::selection pink wash, :focus-visible rings, .btn / .btn-press / .tab / .panel transitions on the cubic-bezier(0.22,1,0.36,1) curve, .tab::after hover underline, opt-in .panel.is-interactive corner growth, .btn:active press-down, prefers-reduced-motion guards. - audit-styles.css: dot-live + cursor + spinner + bar-shine guarded by prefers-reduced-motion. - projects/page.tsx: section-mast with ━━ projects + counter, "your agent footprint." headline, 6×6 pixel-grid empty-state sigil. - projects/loading.tsx: 8 skeleton rows staggered with audit-row-enter, aria-busy "loading…" pip. - project/[name]/page.tsx: migrated from shadcn rounded chrome to .report + .section + .panel shell; ArrowLeft becomes a .btn with the ━━ glyph; path/modified is a green-eyebrow <dl> grid. - navbar.tsx: tighter slipping-through badge aria (pluralised, role, title tooltip). All routes pass lint + tsc + 1769 tests.
On a 2400px+ display the old fixed `max-width: 1380px` left content clustered in the center third. Swap to a clamp-based width so the shell fills the viewport up to 1840px (global) / 1480px (audit) with a responsive 20→56px gutter, and cap `.archetype-frame` at 1320px so the hero composition stays focused.
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
The 14.5px body left the policies activity table and other Tailwind `text-xs` content reading at ~11px on the user's wide monitor. Bumping the html/body base to 16px scales every rem-based utility downstream without touching individual components. Small mono chrome labels are nudged up to keep their proportion against the new body: - `.btn` font-size: 12px → 13px - `.tab` font-size: 12px → 13px - `.section-label` font-size: 11px → 12px - `.section-meta` font-size: 11px → 12px
Old: bare 8x8 pixel grid that felt visually underweight beside the 124px Bitcount archetype name. New: instrument-plate treatment - register crosshair marks at the four corners (CSS-only + from two 1px bars), header strip with archetype index + 8x8 coordinate, grid on a dashed inner frame with 20px cells (up from 16px), footer strip naming the archetype, stacked pink + black hard-offset shadow for depth, subtle inner glow on accent cells, and a diagonal (x+y)-wave cell reveal on mount. The ShowOff CTA's bare sigil and the html2canvas poster export keep the pre-plate look via a data-bare flag + .archetype-frame.capturing collapse to a single shadow that html2canvas renders reliably. All new motion respects prefers-reduced-motion.
The recent .report widening left the top of /policies clustered on the left of a 2400px shell. Three coordinated moves so it feels composed at every width: 1. StatsBar -> new .stat-bar shared class (3-cell brutalist instrument strip, pink corner brackets, dashed dividers, 26px mono numerals, amber on deny >=2%, pink on >=5%, single column under 800px). 2. Filter strip -> new .filter-bar shared class (per-control .filter-group with green-eyebrow labels; two text inputs are .filter-group--grow so they elastically absorb leftover space; a dashed [ clear ] chip appears only when filters are active). 3. Header description -> 2-column flex row: descriptive copy on the left, right-aligned [ configure policies -> ] .btn-primary replacing the inline text-underline link. Activity table: <colgroup> with proportional widths (Policy 18%, Reason 22%, badges 8%, Duration 6%, Time 7%), table-layout fixed. .activity-thead gets green-eyebrow uppercase headers. .activity-detail replaces bg-muted/20 with a 3px pink left border + a "v event detail" eyebrow. Expanded-row colSpan bug fixed (10 -> 11). All checks clean: tsc, lint (0 errors, 4 pre-existing warnings), 1769 tests pass. /audit and /projects unaffected.
The audit page already produced a strong shareable PNG, but the share flow left the image on disk and the social post text-only. Three fixes: 1. lib/share-card.ts: new copyOrDownloadCard(blob, filename) helper. Tries navigator.clipboard.write with a "image/png" ClipboardItem first, falls back to a local download on permission denial or older browsers. Returns "clipboard" / "download" / "failed" so callers can show method-specific toasts. 2. identity-section.tsx: captureCard is split into captureCardBlob() (returns a Blob | null) + the three handlers (X / LinkedIn / save) now sequence captureCardBlob -> copyOrDownloadCard -> toast -> window.open. Telemetry gains image_method + source so we can measure which surface and method succeeds. 3. Inline buttons redesigned around a new shared .share-btn class: 44px platform mark (black tile with white X, LinkedIn-blue tile with white "in", pink-crosshair tile with arrow), green eyebrow + 13px label, pink right-edge stroke at rest, hover lift + hard-offset pink shadow, press-down (2px, 2px). 4. New floating share-dock.tsx mounted from audit-dashboard.tsx. Three full-width buttons stacked vertically using the same .share-btn skin, pink corner brackets, collapsible to a 56px pink FAB with sessionStorage preference, slide-in motion, hidden < 760px viewport. All new motion respects prefers-reduced-motion. +4 unit tests for copyOrDownloadCard. tsc, lint clean; 1773 tests pass (was 1769).
User feedback: prefers the floating dock alone, "save audit-card"
clicked download but went to clipboard instead, and the image still
wasn't attaching on X/LinkedIn.
Changes:
1. identity-section.tsx: remove the inline .share-btn strip and every
support symbol (captureCardBlob, handlers, X/LI templates, usePostHog,
toast import, downloadState). score / grade / missing props removed.
The dock owns share entirely.
2. lib/share-card.ts: add shareCardNative(blob, filename, text) that
tries navigator.share({ files }) first, and downloadCard(blob, name)
that always downloads with no clipboard try. copyOrDownloadCard
keeps its clipboard-then-download semantics for the fallback path.
shareCardToastMessage adds a "native" variant.
3. share-dock.tsx: X / LinkedIn buttons sequence native -> clipboard +
intent URL. Save button calls downloadCard directly so it always
produces a file regardless of clipboard permissions.
4. +4 tests covering downloadCard (anchor click) and shareCardNative
(no API / resolves / AbortError). Full suite: 1777 pass (+4).
tsc clean. lint: 0 errors, 4 pre-existing warnings.
The three .stat-cell eyebrow labels in app/policies/hooks-client.tsx were carrying a literal "━━" prefix in their JSX text content (JSX text doesn't interpret \uXXXX escapes — those only work inside JS string literals). User reported it rendering as visible escape-sequence text on the policies page. Drop the glyph spans entirely; the green eyebrow on its own carries the same visual rhythm without the railroad-track decoration.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Tracking PR. The real review + merge target is the cross-fork PR SiddarthAA#1, which targets
SiddarthAA:stable(PR #397's actual head branch). This upstream-side PR exists so the local branch has an open PR for hook tracking. Do not merge here — merging this would not reachmainsinceFailproofAI:stableis an independent branch from PR #397's head.