style: fix mobile layout overflow and optimize table/TOC display

[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 significantly enhances the website's responsiveness and mobile user experience. It systematically addresses various layout overflow issues by ensuring text, tables, and embedded media adapt gracefully to different screen sizes. The changes aim to provide a more robust and visually consistent presentation across all devices, particularly on smaller viewports.

Highlights

• Mobile Layout Overflow Fixes: Implemented overflow-wrap: break-word; on the body element, headings (h1 through h6), and anchor tags (a) to prevent text from overflowing its container on smaller screens, ensuring better readability.
• Responsive Table Display: Optimized table rendering for mobile devices by applying display: block; overflow-x: auto; and -webkit-overflow-scrolling: touch; to tables, allowing them to scroll horizontally when content exceeds screen width.
• Enhanced Embedded Media Responsiveness: Extended the max-width: 100%; height: auto; styling to a broader range of embedded elements, including video, iframe, embed, object, canvas, and svg, ensuring all media types scale correctly and remain within their parent containers.
• KaTeX Display Optimization: Added specific styling for .katex-display to enable horizontal scrolling for mathematical equations, preventing overflow and improving their presentation.
• Flexbox/Grid Item Shrinking: Introduced min-width: 0; to .article-item, .article-title, and .monthly-item-title to ensure these elements can properly shrink within flexbox or grid layouts, further preventing layout overflow.

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 useful styling changes to improve mobile layout and prevent content overflow. The use of min-width: 0 on flex items and making embedded content like tables and KaTeX blocks scrollable are good enhancements. However, there are a few areas for improvement. I've identified several instances where overflow-wrap: break-word; is applied redundantly, as it's already set on the body and inherited. More critically, the current implementation for responsive tables using display: block will break their layout; I've suggested an alternative that preserves the table structure while enabling horizontal scrolling. Finally, I've pointed out the use of a deprecated CSS property value that should be removed.

[gemini-code-assist]

Using display: block; on a <table> element breaks its fundamental tabular layout, causing rows and cells to stack vertically instead of forming a grid. This also renders the border-collapse property ineffective. A more robust approach for creating a scrollable table is to wrap it in a div with overflow-x: auto. However, for a CSS-only solution, a better approach is to use display: inline-block with max-width: 100%. This preserves the table's internal layout while allowing overflow-x: auto to function correctly.

Additionally, -webkit-overflow-scrolling: touch; is a deprecated property. Modern mobile browsers provide momentum-based scrolling by default on scrollable elements, so this line can be removed.

Suggested change

	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	display: inline-block;
	max-width: 100%;
	overflow-x: auto;

[gemini-code-assist]

The overflow-wrap: break-word; property is already set on the body element (line 83) and is inherited by all descendant elements, including headings. This declaration is therefore redundant and can be removed to keep the stylesheet clean.

[gemini-code-assist]

Similar to the headings, this overflow-wrap: break-word; declaration is redundant because the property is inherited from the body element. It can be safely removed.

[gemini-code-assist]

This entire ruleset is unnecessary. The overflow-wrap: break-word; property is already inherited from the body element. Furthermore, word-break: break-word; is a non-standard and deprecated value which is functionally equivalent to overflow-wrap: break-word. This block can be removed entirely.