fix: sponsor page UI

[deadlyjack]

No description provided.

[greptile-apps]

Greptile Summary

This PR applies targeted CSS fixes to the sponsor page to address layout issues on narrow viewports. Three small additions correct two distinct visual problems: icon shrinking inside flex containers and tier headers overflowing without wrapping.

• Adds min-width: 24px to both .tier-icon rule blocks so the circular icon cannot be compressed by its flex parent when the container is tight.
• Adds flex-wrap: wrap and gap: 0.5rem to .tier-header so the tier name and price label wrap gracefully instead of overflowing or collapsing on small screens.

Confidence Score: 5/5

Safe to merge — all three changes are additive CSS properties with no risk of regressions in other parts of the page.

The change is limited to three CSS property additions in a single stylesheet. min-width on the icon prevents an already-known flex-shrink issue, and flex-wrap + gap on the header are standard layout guards for narrow screens. No logic, no data flow, and no other files are touched.

No files require special attention.

Important Files Changed

Filename	Overview
src/pages/sponsor/style.scss	Adds min-width: 24px to both .tier-icon definitions and flex-wrap + gap to .tier-header to prevent layout breakage on narrow screens

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[".tier-header (flex)"] -->|flex-wrap: wrap, gap: 0.5rem| B[".tier-name (flex)"]
    A --> C[".tier-price"]
    B -->|min-width: 24px| D[".tier-icon (circular badge)"]
    B --> E["Tier name text"]

    style D fill:#ffd700,stroke:#aaa
    style A fill:#4ecdc4,stroke:#aaa,color:#000

Loading

_{Reviews (1): Last reviewed commit: "fix: sponsor page UI" | Re-trigger Greptile}