Skip to content

Comments

Remove subtitle line break, update Dockerfile to use Node.js 20, add Electrolize font to head.html, and ensure proper loading in toolbox-main.scss#23

Merged
leviarista merged 2 commits intoleviarista:mainfrom
retiarylime:main
Oct 28, 2025
Merged

Remove subtitle line break, update Dockerfile to use Node.js 20, add Electrolize font to head.html, and ensure proper loading in toolbox-main.scss#23
leviarista merged 2 commits intoleviarista:mainfrom
retiarylime:main

Conversation

@retiarylime
Copy link
Contributor

Fix Subtitle Line Break and Font Loading Issues

Description

This PR addresses multiple UI and compatibility issues in the GitHub Profile Header Generator:

  1. Subtitle text wrapping: Fixes the issue where subtitle text would break to a second line instead of staying on a single line
  2. Font loading reliability: Ensures the Electrolize font loads properly without falling back to serif fonts
  3. Build compatibility: Updates Node.js version for better compatibility with the current Vite version
  4. Default text alignment: Improves the initial user experience with centered text alignment

These changes improve the overall user experience by ensuring text displays correctly and fonts load reliably across different browsers and environments.

Changes

  1. Fix subtitle text wrapping: Added white-space: nowrap CSS property to prevent subtitle text from breaking to multiple lines
  2. Update Node.js version: Changed Dockerfile from node:18-alpine to node:20-alpine for Vite 7 compatibility
  3. Improve Electrolize font loading:
    • Added separate preload and stylesheet links for Electrolize font
    • Removed Electrolize from the combined Google Fonts URL to prevent conflicts
    • Added CSS fallback rules with font-family: "Electrolize", monospace !important
  4. Set default text alignment: Added textAlign: "center" to the initial theme for better default positioning

Screenshots

Before: Subtitle text breaking to second line
Before

After: Subtitle text stays on single line
github-header-banner (1)

Related Issues

This PR:

  • Fixes subtitle text wrapping issue where the last word would appear on a second line
  • Resolves Electrolize font loading issues that caused fallback to serif fonts
  • Addresses build compatibility issues with Node.js 18 and Vite 7

Additional Information

  • Testing: The changes have been tested in the Docker environment and verified to work correctly
  • Browser compatibility: Font loading improvements ensure consistent behavior across different browsers
  • Performance: Separate font preloading improves initial page load performance
  • Backwards compatibility: All changes are additive and don't break existing functionality

…add Electrolize font to head.html, and ensure proper loading in toolbox-main.scss
Remove subtitle line break, update Dockerfile to use Node.js 20, add Electrolize font to head.html, and ensure proper loading in toolbox-main.scss
@leviarista leviarista merged commit 271ea4b into leviarista:main Oct 28, 2025
1 check failed
@leviarista
Copy link
Owner

Thanks for fixing it! @retiarylime

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.

[Bug] The text at the bottom; the last word is always on the second line

2 participants