style: fix mobile layout overflow

[xihale]

No description provided.

[gemini-code-assist]

Summary of Changes

Hello @xihale, 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 focuses on enhancing the mobile layout and responsiveness of the website by addressing various content overflow issues. The changes primarily involve applying CSS properties like overflow-wrap, min-width, and overflow-x to ensure that text, tables, and embedded media elements adapt gracefully to smaller screen sizes, preventing horizontal scrolling and improving overall readability and user experience on mobile devices.

Highlights

• Text Overflow Handling: Implemented overflow-wrap: break-word for the body, all heading elements (h1 through h6), and anchor (a) elements to ensure long words break and wrap to the next line, preventing horizontal overflow on smaller screens.
• Layout Shrinking Prevention: Added min-width: 0 to .article-item, .article-title, and .monthly-item-title list items. This CSS property is crucial in flexbox or grid layouts to allow items to shrink below their intrinsic content size, which helps prevent overflow issues when content is long.
• Responsive Tables: Modified table styles to include display: block, overflow-x: auto, and -webkit-overflow-scrolling: touch. This makes tables horizontally scrollable on devices with limited width, ensuring their content remains accessible without breaking the layout.
• Expanded Media Responsiveness: Extended the max-width: 100%; height: auto; styling from img elements to also apply to video, iframe, embed, object, canvas, and svg elements. This ensures all embedded media and scalable vector graphics are responsive and do not overflow their containers.
• KaTeX Display Overflow: Introduced new CSS rules for .katex-display to enable horizontal scrolling (overflow-x: auto) and hide vertical overflow (overflow-y: hidden), specifically for KaTeX mathematical expressions. This prevents wide equations from causing layout issues.
• Mobile Title Word Breaking: Applied overflow-wrap: break-word and word-break: break-word specifically to .article-title and .monthly-item-title within a responsive context (likely mobile breakpoints). This ensures that titles with very long words will break appropriately to fit the screen width.

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 introduces several CSS changes to improve the layout on mobile devices by preventing content overflow. The changes include making tables and math formulas horizontally scrollable, ensuring embedded media is responsive, and adding word wrapping rules for long text. The approach is solid and covers multiple potential overflow sources. I have a couple of suggestions to improve the implementation by removing a deprecated CSS property and using a more robust pattern for responsive tables, which will enhance code quality and maintainability.