Skip to content

Fix yes/no result badge to render as a perfect circle#43

Merged
paulcushing merged 2 commits into
mainfrom
copilot/fix-oblong-background-shape
Mar 28, 2026
Merged

Fix yes/no result badge to render as a perfect circle#43
paulcushing merged 2 commits into
mainfrom
copilot/fix-oblong-background-shape

Conversation

Copilot AI commented Mar 28, 2026

Copy link
Copy Markdown
Contributor

The yes/no answer badge used p-20 on an inline span with rounded-full, producing an oblong shape because text width caused the element to be wider than it was tall.

Changes

  • components/main.jsx: Replace p-20 with w-40 h-40 (equal explicit dimensions) and add inline-flex items-center justify-center to keep text centered — guaranteeing a true circle regardless of text content.
// Before — oblong due to text width inflating horizontal dimension
<span className="... rounded-full ... p-20">Yes</span>

// After — fixed 160×160px circle with centered text
<span className="inline-flex items-center justify-center ... rounded-full w-40 h-40">Yes</span>

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • fonts.googleapis.com
    • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/ShouldIBurn/ShouldIBurn/node_modules/.bin/next build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:


⌨️ Start Copilot coding agent tasks without leaving your editor — available in VS Code, Visual Studio, JetBrains IDEs and Eclipse.

Copilot AI linked an issue Mar 28, 2026 that may be closed by this pull request
@vercel

vercel Bot commented Mar 28, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
should-i-burn Ready Ready Preview, Comment Mar 28, 2026 2:42pm

Request Review

Replace p-20 padding (which made the shape oblong) with explicit
equal w-40 h-40 dimensions and inline-flex centering, ensuring the
background is always a perfect circle.

Agent-Logs-Url: https://github.com/paulcushing/ShouldIBurn/sessions/9ffb45d0-6754-4d37-9ce0-1085bae920a8

Co-authored-by: paulcushing <408352+paulcushing@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix background shape of yes/no answer to be circular Fix yes/no result badge to render as a perfect circle Mar 28, 2026
Copilot AI requested a review from paulcushing March 28, 2026 14:43
@paulcushing paulcushing marked this pull request as ready for review March 28, 2026 14:44
@paulcushing paulcushing merged commit 6163e64 into main Mar 28, 2026
7 checks passed
@paulcushing paulcushing deleted the copilot/fix-oblong-background-shape branch March 28, 2026 14:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Results answer not round

2 participants