Update banner in mobile

[carlosabadia]

Fixes the X close button overlap on smaller devices and other mobile stuff

[greptile-apps]

Greptile Overview

Greptile Summary

Fixed the X close button overlap issue on mobile devices by refactoring the banner layout from flexbox with absolute positioning to a responsive CSS grid layout.

Key improvements:

• Changed container from rx.hstack to rx.el.div with responsive grid (flex md:grid md:grid-cols-[1fr_auto_1fr])
• Wrapped X icon in rx.el.button for proper semantic HTML
• Replaced absolute positioning with grid-based layout (md:col-start-3 justify-self-end ml-auto)
• Improved responsive behavior by hiding "New" badge on mobile (max-lg:hidden)
• Nested "Learn more" text inside main content for better text flow

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The changes are focused, well-structured layout improvements that solve the stated problem without introducing logical errors or breaking changes. The implementation uses proper responsive design patterns with CSS grid.
• No files require special attention

Important Files Changed

Filename	Overview
pcweb/components/hosting_banner.py	Improved mobile banner layout by switching from absolute positioning to CSS grid, preventing X button overlap on smaller devices

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant HostingBanner
    participant HostingBannerState
    
    User->>Browser: Loads page
    Browser->>HostingBanner: Renders component
    HostingBanner->>HostingBannerState: on_mount: show_blog_banner()
    HostingBannerState-->>HostingBanner: show_banner = True
    HostingBanner->>Browser: Displays banner with grid layout
    Note over Browser: Mobile: flex layout<br/>Tablet+: CSS grid with 3 columns
    
    User->>Browser: Clicks X button
    Browser->>HostingBannerState: on_click: hide_banner()
    HostingBannerState->>HostingBannerState: force_hide_banner = True
    HostingBannerState-->>HostingBanner: is_banner_visible = False
    HostingBanner->>Browser: Hides banner

Loading

[greptile-apps]

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}