Skip to content

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

@dcherian dcherian merged commit cc41c53 into xarray-contrib:main Jun 20, 2025
7 checks passed
@ianhi ianhi deleted the banner-width branch June 23, 2025 14:58
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.

3 participants