fix(marketing): correct visibility of download button platform icons#2873
fix(marketing): correct visibility of download button platform icons#2873Aditya190803 wants to merge 1 commit into
Conversation
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
Bot
added
size:S
ApprovabilityVerdict: Approved Pure CSS scoping fix in a marketing page to correct visibility of download button icons. No runtime logic changes, only styling adjustments to make Astro's scoped selectors work correctly with globally-defined classes. You can customize Macroscope's approvability policy. Learn more. |
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
1 participant
What Changed
Converted the scoped
.dl-iconand platform-specific display rules inapps/marketing/src/pages/index.astroto use:global(...)selectors, and restricted the fallback Apple icon display rule to targethtml:not([data-platform])instead of the general:not([data-platform]).Why
<TuxIcon>is a child Astro component. Due to Astro's component-scoping behavior, CSS classes declared locally inindex.astro(like.dl-iconand.dl-icon--linux) were not matching the SVG elements inside<TuxIcon>, rendering it invisible. Wrapping the styles in:global()allows them to target the child component.:not([data-platform])matched any ancestor element lacking thedata-platformattribute (such as<body>or<main>). Scoping it tohtml:not([data-platform])ensures the fallback only displays when the page is loading before JS setsdata-platformon<html>.UI Changes
Checklist
Note
Low Risk
Marketing-page CSS only; no auth, data, or backend behavior changes.
Overview
Fixes platform-specific download icons on the marketing homepage by switching hero/CTA icon rules in
index.astrofrom scoped selectors to:global(.dl-icon)and:global(...)platform toggles, so styles apply to the LinuxTuxIconchild component and inline SVGs alike.The Apple fallback icon rule now uses
html:not([data-platform])instead of:not([data-platform]), so the macOS icon only shows before JS setsdata-platformon<html>—not when unrelated ancestors lack the attribute (which was leaving the Apple icon visible alongside Windows/Linux icons).Reviewed by Cursor Bugbot for commit bc99860. Bugbot is set up for automated code reviews on this repo. Configure here.
Note
Fix platform-specific download button icon visibility on marketing index page
Scoped CSS selectors in index.astro were preventing platform-aware
.dl-iconstyles from applying correctly. Fixes this by switching to:global()wrappers for icon and platform selectors, and explicitly targetinghtml:not([data-platform])for the default Apple icon fallback.Macroscope summarized bc99860.