Improve mobile UX: h1 font-size and Google Fonts link

[Copilot]

Improves mobile user experience with typography adjustments and added navigation to Google Fonts.

Changes

1. Mobile Portrait Typography

• Added media query in src/styles/index.css targeting mobile portrait viewports (max-width: 767px)
• Reduces h1 font-size to 1.4rem for better readability on small screens

@media (max-width: 767px) {
    h1 {
        font-size: 1.4rem;
    }
}

2. Google Fonts Link

• Added "Browse fonts" link with Lucide external-link icon in sidebar
• Link is right-aligned next to "Google font:" label
• Select dropdown positioned below the label for better layout
• Opens fonts.google.com in new tab for easy font browsing
• Modified src/components/Sidebar.tsx with proper link styling and security attributes

Visual

Desktop: Shows Google Fonts link with icon, select below label

Mobile Portrait: h1 at 1.4rem, proper link layout

Note

Orientation-based media query was removed from app CSS as it belongs in the tool-style layout package. For future reference, the media query that was considered:

/* This belongs in tool-style layout, not in app CSS */
@media (max-width: 999px) and (orientation: landscape) {
    .container { flex-direction: row; }
    aside { width: 300px; order: 1; }
    main { order: 2; flex: 1; }
}

Original prompt

in mobile portrait, change h1 font-size to 1.4rem.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[github-actions]

PR Preview Action v1.8.0
🚀 View preview at https://danmarshall.github.io/google-font-to-svg-path/pr-preview/pr-71/
Built to branch gh-pages at 2026-01-19 05:48 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[danmarshall]

@copilot nice job. Can you also add a small link on the google fonts label, right aligned, a link to fonts.google.com target blank that says something appropriate. Also I’m not a fan of our mobile media query I thinks it’s 999. I want my phone in portrait mode to have the sidebar at the bottom but not landscape. Same goes for tablet.

[Copilot]

@copilot nice job. Can you also add a small link on the google fonts label, right aligned, a link to fonts.google.com target blank that says something appropriate. Also I’m not a fan of our mobile m...

Done in commit 92f33e4:

1. ✅ Added "Browse fonts ↗" link next to "Google font:" label that opens fonts.google.com in a new tab
2. ✅ Fixed mobile media query - now portrait mode shows sidebar at bottom, while landscape mode (phones & tablets) shows side-by-side layout

Screenshots:

• Desktop with link: https://github.com/user-attachments/assets/3aa4863c-8049-41b1-8656-e199d9eb2a02
• Mobile portrait (sidebar at bottom): https://github.com/user-attachments/assets/abcf48ef-20eb-4045-9b3b-6c1a38eea7ca
• Mobile landscape (side-by-side): https://github.com/user-attachments/assets/044b601e-905c-4904-a06a-202b8425a33f
• Tablet portrait (sidebar at bottom): https://github.com/user-attachments/assets/ec5200c0-181f-4bf6-9490-c39622e3f1ed

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• telemetry.astro.build
  • Triggering command: /usr/local/bin/node node /home/REDACTED/work/google-font-to-svg-path/google-font-to-svg-path/node_modules/.bin/astro build (dns block)
  • Triggering command: /usr/local/bin/node node /home/REDACTED/work/google-font-to-svg-path/google-font-to-svg-path/node_modules/.bin/astro dev (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[danmarshall]

@copilot actually that media query belongs in our layout so please remove it, but thanks and you can leave it as a comment here in the pr for future reference.

your link should have been right aligned and then the select should be below the label. Also we are using Lucide icons.

[Copilot]

@copilot actually that media query belongs in our layout so please remove it, but thanks and you can leave it as a comment here in the pr for future reference.
<img width="1206" height="300" alt="im...

Done in commit ffef679:

1. ✅ Removed orientation media query from src/styles/index.css - preserved as comment for future reference
2. ✅ Fixed link layout - "Google font:" label and "Browse fonts" link are now on the same line with the link right-aligned
3. ✅ Select dropdown moved below the label (full width)
4. ✅ Using Lucide external-link icon

Screenshots:

• Desktop: https://github.com/user-attachments/assets/967a6b1d-3495-4b51-a931-17c926fa79f5
• Mobile portrait: https://github.com/user-attachments/assets/1a162e8c-b1a7-46da-917b-267a670d9f70

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• telemetry.astro.build
  • Triggering command: /usr/local/bin/node node /home/REDACTED/work/google-font-to-svg-path/google-font-to-svg-path/node_modules/.bin/astro build h (dns block)
  • Triggering command: /usr/local/bin/node node /home/REDACTED/work/google-font-to-svg-path/google-font-to-svg-path/node_modules/.bin/astro dev (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)