Skip to content

UI: Make banner width match content + round corners #782

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

ianhi
Copy link
Contributor

@ianhi ianhi commented Jun 6, 2025

Adjusting the styling of the banner on the main page in two ways:

n.b.: This PR basically purely a product of AI code changes
Width:

Prior to this PR the banner was wider than the rest of the content

Corners:

I rounded the corners for visual consistency with the buttons with rounded corners lower down the page

Old:

image

New:

image

AI

This was a vibe-coded change (i.e. I used gemini to figure out the web component. I did manually review the changes and verified that they work on desktop. The AI extension justified the changes like so:

Import Container: We've added Container to the imports from @chakra-ui/react.
Outer Box Padding: The px={20} (horizontal padding) was removed from the outermost Box. The pt={16} (top padding) remains to ensure the banner is positioned correctly below your header.
Added Container: The Alert component is now wrapped with <Container maxW='container.lg'>. This will constrain the banner's width to container.lg (typically 1024px in Chakra UI's default theme), aligning it with how your blog content is likely constrained. The Container also handles its own responsive horizontal padding.
Rounded Corners: The borderRadius='md' prop has been added to the Alert component. You can change 'md' to other values like 'sm', 'lg', or a specific pixel/rem value (e.g., '8px') if you prefer a different amount of rounding.

Copy link

netlify bot commented Jun 6, 2025

Deploy Preview for xarraydev ready!

Name Link
🔨 Latest commit 3a7055d
🔍 Latest deploy log https://app.netlify.com/projects/xarraydev/deploys/684305fcf4494a0008a2b79c
😎 Deploy Preview https://deploy-preview-782--xarraydev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link

vercel bot commented Jun 6, 2025

@ianhi is attempting to deploy a commit to the xarray Team on Vercel.

A member of the Team first needs to authorize it.

Copy link

vercel bot commented Jun 6, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
xarray-dev ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 6, 2025 3:22pm

@ianhi
Copy link
Contributor Author

ianhi commented Jun 6, 2025

Mobile version of on preview link:

Screenshot_20250606-115148

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.

1 participant