fix(marketing): correct visibility of download button platform icons#2873
fix(marketing): correct visibility of download button platform icons#2873Aditya190803 wants to merge 2 commits 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 |
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. |
…button platform icons
|
@juliusmarminge |
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
Scoped marketing CSS only; no auth, data, or backend behavior changes.
Overview
Fixes platform-specific download button icons on the marketing homepage by making
.dl-iconrules:global()so they apply to inline SVGs and theTuxIconchild component, which Astro’s scoped CSS was not matching.Platform visibility selectors are updated the same way, and the default Apple icon fallback is narrowed from
:not([data-platform])tohtml:not([data-platform])so only the pre-JS state shows Apple instead of every ancestor without the attribute (which caused Apple to appear alongside Windows/Linux).Reviewed by Cursor Bugbot for commit cc73915. 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 cc73915.