global/git
1
0
Fork 0
mirror of https://github.com/git/git.git synced 2026-02-28 10:47:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

gitweb: fix mobile page overflow across log/commit/blob/diff views

Browse Source 
On mobile-sized viewports, gitweb pages in log/commit/blob/diff views can
overflow horizontally due to desktop-oriented paddings and fixed-width
preformatted content.

Extend the existing mobile media query to rebalance those layouts: reduce
or clear paddings in log/commit sections, and allow horizontal scrolling
for preformatted blob/diff content instead of forcing page-wide overflow.

All layout adjustments in this patch are mobile-scoped, except one global
safeguard: set overflow-wrap:anywhere on div.log_body. Log content can
contain escaped or non-breaking text that behaves like a single long token
and can overflow at any viewport width, including desktop.

Signed-off-by: Rito Rhymes <rito@ritovision.com>
Signed-off-by: Junio C Hamano <gitster@pobox.com>
This commit is contained in:
Rito Rhymes
2026-02-16 15:53:29 +00:00
committed by Junio C Hamano
parent 5be380d865
commit fd10720357
1 changed files with 52 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
gitweb/static/gitweb.css
View File

@@ -123,6 +123,7 @@ div.title_text {
div.log_body {
padding: 8px 8px 8px 150px;
overflow-wrap: anywhere;
}
span.age {
@@ -686,6 +687,15 @@ div.remote {
.kwd { color:#010181; }
@media (max-width: 768px) {
div.page_body {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
div.page_body div.pre {
min-width: max-content;
}
div.projsearch {
padding: 0 8px;
box-sizing: border-box;
@@ -695,4 +705,46 @@ div.remote {
max-width: 100%;
box-sizing: border-box;
}
div.title_text {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-left: 4px;
padding-right: 4px;
box-sizing: border-box;
}
div.title_text table.object_header {
width: max-content;
}
div.log_body {
padding: 8px;
clear: left;
}
div.patchset div.patch {
width: max-content;
min-width: 100%;
}
div.diff.header {
padding: 4px 8px 2px 8px;
white-space: nowrap;
overflow-wrap: normal;
}
div.diff.extended_header {
padding: 2px 8px;
white-space: nowrap;
overflow-wrap: normal;
}
div.diff.ctx,
div.diff.add,
div.diff.rem,
div.diff.chunk_header {
padding: 0 8px;
white-space: pre;
}
}