From ff85e97ceedd206f723061ced972b7b7ba431b56 Mon Sep 17 00:00:00 2001 From: Rito Rhymes Date: Sat, 7 Feb 2026 06:21:28 -0500 Subject: [PATCH 1/5] gitweb: add viewport meta tag for mobile devices Without a viewport meta tag, phone browsers render gitweb at desktop width and scale the whole page down to fit the screen. Add a viewport meta tag so the layout viewport tracks device width. This is the baseline needed for mobile CSS fixes in follow-up commits. Signed-off-by: Rito Rhymes --- gitweb/gitweb.perl | 1 + 1 file changed, 1 insertion(+) diff --git a/gitweb/gitweb.perl b/gitweb/gitweb.perl index b5490dfecf2da7..fde804593b6ff3 100755 --- a/gitweb/gitweb.perl +++ b/gitweb/gitweb.perl @@ -4214,6 +4214,7 @@ sub git_header_html { + $title EOF # the stylesheet, favicon etc urls won't work correctly with path_info From 6383e1f7a9545c14d02570d5733b4b3e0513c960 Mon Sep 17 00:00:00 2001 From: Rito Rhymes Date: Sat, 7 Feb 2026 06:33:30 -0500 Subject: [PATCH 2/5] gitweb: prevent project search bar from overflowing on mobile On narrow screens, the project search input can exceed the available width and force page-wide horizontal scrolling. Add a mobile media query and apply side padding to the search container, then cap the input width to its container with border-box sizing so the form stays within the viewport. Signed-off-by: Rito Rhymes --- gitweb/static/gitweb.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css index 48d2e5101542ad..0b63acc0e29e9c 100644 --- a/gitweb/static/gitweb.css +++ b/gitweb/static/gitweb.css @@ -684,3 +684,15 @@ div.remote { .kwb { color:#830000; } .kwc { color:#000000; font-weight:bold; } .kwd { color:#010181; } + +@media (max-width: 768px) { + div.projsearch { + padding: 0 8px; + box-sizing: border-box; + } + + div.projsearch input[type="text"] { + max-width: 100%; + box-sizing: border-box; + } +} From 0ebad7bbc39e68a712c25372e51141b302b9e7b0 Mon Sep 17 00:00:00 2001 From: Rito Rhymes Date: Sun, 8 Feb 2026 09:58:08 -0500 Subject: [PATCH 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views 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 --- gitweb/static/gitweb.css | 52 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css index 0b63acc0e29e9c..135590b64cbe76 100644 --- a/gitweb/static/gitweb.css +++ b/gitweb/static/gitweb.css @@ -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; + } } From bbc94eee8dadef6d590c97a89b223751de0731c9 Mon Sep 17 00:00:00 2001 From: Rito Rhymes Date: Sun, 8 Feb 2026 10:59:55 -0500 Subject: [PATCH 4/5] gitweb: fix mobile footer overflow by wrapping text and clearing floats On narrow screens, footer text can wrap, but the fixed 22px footer height and floated footer blocks can cause overflow. Switch to min-height and add a clearfix on the footer container so it grows to contain wrapped float content cleanly. Signed-off-by: Rito Rhymes --- gitweb/static/gitweb.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css index 135590b64cbe76..824764606333a0 100644 --- a/gitweb/static/gitweb.css +++ b/gitweb/static/gitweb.css @@ -73,11 +73,17 @@ div.page_path { } div.page_footer { - height: 22px; + min-height: 22px; padding: 4px 8px; background-color: #d9d8d1; } +div.page_footer::after { + content: ""; + display: table; + clear: both; +} + div.page_footer_text { line-height: 22px; float: left; From 95ded55c31ee56943327c8e321ed7b5311ffb1ac Mon Sep 17 00:00:00 2001 From: Rito Rhymes Date: Sun, 8 Feb 2026 11:05:48 -0500 Subject: [PATCH 5/5] gitweb: let page header grow on mobile for long wrapped project names On mobile, long project names in the page header can wrap to multiple lines, but the fixed 25px header height does not grow with wrapped content. Switch the header from fixed height to min-height so it expands as needed while keeping the same baseline height for single-line titles. Signed-off-by: Rito Rhymes --- gitweb/static/gitweb.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css index 824764606333a0..e2e6dd96a2c915 100644 --- a/gitweb/static/gitweb.css +++ b/gitweb/static/gitweb.css @@ -42,7 +42,7 @@ a.list img.avatar { } div.page_header { - height: 25px; + min-height: 25px; padding: 8px; font-size: 150%; font-weight: bold;