Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
xihale wants to merge 1 commit into from
Closed

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 22 additions & 1 deletion assets/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ body {
display: flex;
flex-direction: column;
min-height: 100vh;
overflow-wrap: break-word;
}

/* -- Typography -- */
Expand All @@ -91,6 +92,7 @@ h1, h2, h3, h4, h5, h6 {
line-height: 1.3;
color: var(--text-primary);
letter-spacing: -0.025em;
overflow-wrap: break-word;
Copy link

@gemini-code-assist gemini-code-assist bot Jan 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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.

}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
Expand Down Expand Up @@ -125,6 +127,7 @@ a {
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease, text-decoration-color 0.2s ease;
overflow-wrap: break-word;
Copy link

@gemini-code-assist gemini-code-assist bot Jan 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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.

}

a:hover {
Expand Down Expand Up @@ -167,6 +170,7 @@ li {
border: 1px solid var(--border-subtle);
text-decoration: none !important;
transition: all 0.2s ease;
min-width: 0;
}

.article-item:hover {
Expand All @@ -179,6 +183,7 @@ li {
font-weight: 600;
color: var(--text-primary);
font-size: 1.05rem;
min-width: 0;
}

.article-date {
Expand Down Expand Up @@ -243,6 +248,7 @@ li {
font-size: 1.1rem;
color: var(--text-primary);
font-weight: 500;
min-width: 0;
}

.monthly-item-meta {
Expand Down Expand Up @@ -977,6 +983,9 @@ table {
border-collapse: collapse;
margin: 1.5rem 0;
font-size: 0.95rem;
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
Comment on lines +986 to +988
Copy link

@gemini-code-assist gemini-code-assist bot Jan 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

critical

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;

}

th, td {
Expand All @@ -995,7 +1004,7 @@ tr:nth-child(even) {
background-color: rgba(0,0,0,0.01);
}

img {
img, video, iframe, embed, object, canvas, svg {
max-width: 100%;
height: auto;
border-radius: 4px;
Expand All @@ -1008,6 +1017,13 @@ figcaption {
color: var(--text-tertiary);
}

.katex-display {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
padding: 1rem 0;
}

footer {
margin-top: auto;
border-top: 1px solid var(--border-subtle);
Expand Down Expand Up @@ -1237,6 +1253,11 @@ footer .social-links {
nav a:last-child {
border-bottom: none;
}

.article-title, .monthly-item-title {
overflow-wrap: break-word;
word-break: break-word;
}
Comment on lines +1257 to +1260
Copy link

@gemini-code-assist gemini-code-assist bot Jan 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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.

}

hr {
Expand Down