fix(ui): prevent mobile header from cutting off install button

[jeromelefeuvre]

Fixes the header title overflowing and cutting off the install button on mobile devices. Also fixes a cache busting bug in handlers.mjs where only style.css was targeted instead of all css files.

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses two key areas: improving the user interface on mobile devices and enhancing backend cache management. The UI changes ensure a better experience for mobile users by preventing header elements from overlapping or being truncated. Concurrently, the cache busting mechanism has been made more robust to ensure all CSS assets are properly updated, preventing stale styles from being served.

Highlights

• UI Fix: Resolved an issue where the mobile header title would overflow, causing the install button to be cut off on smaller screens.
• Cache Busting Improvement: Fixed a bug in the backend where cache busting for CSS files only targeted style.css, now correctly applying to all CSS files.

Changelog

• backend/handlers.mjs
  • Updated the regular expression for CSS cache busting to apply to all CSS files, not just style.css.
  • Refactored https.get call formatting for improved readability.
• frontend/static/css/responsive.css
  • Added styles to prevent the mobile header title from overflowing.
  • Ensured the install button in the header remains visible on mobile by preventing it from shrinking.
  • Implemented text truncation for h1 and .subtitle within the mobile header.
• package-lock.json
  • Updated package version from 1.12.0 to 1.12.1.
• package.json
  • Updated package version from 1.12.0 to 1.12.1.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request successfully addresses the UI issue on mobile where the header title could overflow and cut off the install button. The CSS changes are well-implemented to handle this. The fix for cache-busting CSS files is also good, but it introduces an opportunity to improve the cache-busting for JavaScript files and fixes a related bug where one JS file was missed. I've left a comment with a suggestion for this improvement.

[gemini-code-assist]

This is a great improvement for cache-busting CSS files. You could apply a similar pattern for the JavaScript files below. This would make the code more maintainable and also fix a bug where location.js is not being cache-busted.

I recommend replacing all the individual text.replace calls for JS files (lines 173-177) with a single, more robust line:

text = text.replace(/src="static\/js\/([^\"]+)\.js"/g, `src="static/js/$1.js?v=${version}"`);