Skip to content

fix(marketing): correct visibility of download button platform icons#2873

Open
Aditya190803 wants to merge 2 commits into
pingdotgg:mainfrom
Aditya190803:fix/download-button-platform-icons
Open

fix(marketing): correct visibility of download button platform icons#2873
Aditya190803 wants to merge 2 commits into
pingdotgg:mainfrom
Aditya190803:fix/download-button-platform-icons

Conversation

@Aditya190803
Copy link
Copy Markdown

@Aditya190803 Aditya190803 commented May 30, 2026

What Changed

Converted the scoped .dl-icon and platform-specific display rules in apps/marketing/src/pages/index.astro to use :global(...) selectors, and restricted the fallback Apple icon display rule to target html:not([data-platform]) instead of the general :not([data-platform]).

Why

  1. Linux Icon Invisible: The Tux icon was not displaying when the platform was detected as Linux because <TuxIcon> is a child Astro component. Due to Astro's component-scoping behavior, CSS classes declared locally in index.astro (like .dl-icon and .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.
  2. Apple Icon Displayed on All Platforms: The Apple icon remained visible alongside the correctly detected platform's icon because the selector :not([data-platform]) matched any ancestor element lacking the data-platform attribute (such as <body> or <main>). Scoping it to html:not([data-platform]) ensures the fallback only displays when the page is loading before JS sets data-platform on <html>.

UI Changes

Before After
Before After

Checklist

  • This PR is small and focused
  • I explained what changed and why
  • I included before/after screenshots for any UI changes
  • I included a video for animation/interaction changes

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-icon rules :global() so they apply to inline SVGs and the TuxIcon child 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]) to html: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-icon styles from applying correctly. Fixes this by switching to :global() wrappers for icon and platform selectors, and explicitly targeting html:not([data-platform]) for the default Apple icon fallback.

Macroscope summarized cc73915.

@chatgpt-codex-connector
Copy link
Copy Markdown

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 30, 2026

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 8f462513-44dc-4afe-bc75-99880bd47013

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions github-actions Bot added size:S 10-29 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list. labels May 30, 2026
@macroscopeapp
Copy link
Copy Markdown
Contributor

macroscopeapp Bot commented May 30, 2026

Approvability

Verdict: 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.

duncan4123 pushed a commit to duncan4123/t3code that referenced this pull request Jun 2, 2026
@Aditya190803
Copy link
Copy Markdown
Author

@juliusmarminge
Mind taking a quick look at this PR when you get a chance?
It's a pretty small fix. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:S 10-29 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant