Skip to content

fix(website): fix index page layout rendering#66

Draft
ian-flores wants to merge 4 commits intomainfrom
fix-index-layout
Draft

fix(website): fix index page layout rendering#66
ian-flores wants to merge 4 commits intomainfrom
fix-index-layout

Conversation

@ian-flores
Copy link
Collaborator

Summary

  • Replace <style is:global>@import with Astro's recommended frontmatter import for global CSS
  • Move Google Fonts loading from CSS @import url() to <link> tags in <head> (spec-compliant, parallel loading)
  • Fixes broken layout on the deployed site caused by CSS @import being discarded inside inlined <style> blocks

Test plan

  • cd website && npm ci && npm run build succeeds
  • dist/index.html contains Google Fonts <link> tag and CSS variables resolve
  • Deploy preview shows correct layout (max-width, colors, border-radius all applied)

Copilot AI review requested due to automatic review settings March 11, 2026 22:44
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR fixes the website’s broken index-page layout by changing how global CSS and Google Fonts are loaded so that styles aren’t discarded when Astro inlines style blocks.

Changes:

  • Removed Google Fonts loading via CSS @import from global.css.
  • Switched global CSS inclusion to an Astro frontmatter import in the shared layout.
  • Added Google Fonts <link> (with preconnect hints) to the document <head>.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File Description
website/src/styles/global.css Removes Google Fonts @import so fonts are no longer loaded via inlined CSS.
website/src/layouts/Layout.astro Imports global CSS in frontmatter and loads Google Fonts via <link> tags in <head>.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

@github-actions
Copy link

github-actions bot commented Mar 11, 2026

PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://posit-dev.github.io/vip/pr-preview/pr-66/

Built to branch gh-pages at 2026-03-12 01:14 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

The report and website previews both use rossjrw/pr-preview-action
which posts a sticky comment. Without distinct comment-tag values,
one overwrites the other. Now each preview gets its own PR comment.
rossjrw/pr-preview-action doesn't support comment-tag, so both
previews shared the same sticky comment and one overwrote the other.
Disable the built-in comment on the website preview and use
marocchino/sticky-pull-request-comment directly with a distinct header.
@github-actions
Copy link

Website Preview · View preview

@statik
Copy link
Collaborator

statik commented Mar 12, 2026

thanks for fixing this! I noticed the issue during a demo earlier today and hadn't gotten to fire off an agent yet.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants