gitweb: fix broken mobile layouts across views

Summary
=======

This patch series fixes mobile responsiveness bugs that currently break page layouts in gitweb. The approach is adaptive rather than transformative:
preserve legacy desktop layout, add targeted mobile constraints at ≤768, and prevent content from escaping its containers and breaking the layout.

Rationale
=========

Software development has traditionally been desktop-first and remains the primary environment, but common contributor tasks like browsing history, reading logs, reviewing diffs, and sharing links are increasingly done on mobile devices while away from the workstation. This patch series aims to support the emerging need by improving day-to-day usability for contributors accessing gitweb on small screens.

Before and After Screenshots
============================

Projects
========

Before projects-BEFORE
[https://github.com/user-attachments/assets/0742999e-99b7-46df-9a40-4283fd861e86]

After projects-AFTER
[https://github.com/user-attachments/assets/5926be36-626e-4fd4-9aee-91d87557693b]

Log
===

Before log-BEFORE
[https://github.com/user-attachments/assets/6f64ffea-0975-4d67-a1b4-35b471986ab0]

After Note: certain inputs contain non-breaking/escaped spaces (e.g., NBSP), so the renderer treats the surrounding text as a single long continous string. Under constrained widths this can present as “mid-word” wrapping, but it is the correct handling of long strings; addressing that is a content-normalization concern, not a layout concern. log-AFTER
[https://github.com/user-attachments/assets/f8852e95-4f31-4337-9b21-6d94232b1be7]

Commitdiff
==========

Before commitdiff-BEFORE
[https://github.com/user-attachments/assets/8bf8a9a7-8cab-4ba8-a7de-166410a5c52e]

After (Pre-scroll) commitdiff-AFTER-prescroll
[https://github.com/user-attachments/assets/fa00f6fa-fc20-4391-9066-a489f0625af5]

After (Post-scroll) Scrolling the tables to reveal the contents to the right commitdiff-AFTER-postScroll
[https://github.com/user-attachments/assets/74ae24e0-e279-4582-8fa2-1634fe3133ec]

Commit & Footer
===============

Before Also notice the footer text wrapping down outside the footer background along with the two buttons commit-BEFORE
[https://github.com/user-attachments/assets/1ec00258-fb71-44e9-8e8e-beaaab6cfd13]

After (Pre-scroll) commit-AFTER-prescroll
[https://github.com/user-attachments/assets/78ac7f13-9e1f-403c-9ae9-b37d82d4aa4e]

After (Post-scroll) Scrolling the table to reveal the contents to the right commit-AFTER-postScroll
[https://github.com/user-attachments/assets/8650f835-cdc3-4b11-ae1e-1229fc88e352]

Tree
====

Before tree-BEFORE
[https://github.com/user-attachments/assets/35a5db37-0450-4eee-91de-777259a49214]

After (Pre-scroll) tree-AFTER-prescroll
[https://github.com/user-attachments/assets/d993f3be-65df-48db-af38-4a3d13158f20]

After (Post-scroll) Scrolling the table to reveal the contents to the right

tree-AFTER-postScroll
[https://github.com/user-attachments/assets/1faa3184-0d63-455d-a341-c01ecf741be2]

Rito Rhymes (5):
gitweb: add viewport meta tag for mobile devices
gitweb: prevent project search bar from overflowing on mobile
gitweb: fix mobile page overflow across log/commit/blob/diff views
gitweb: fix mobile footer overflow by wrapping text and clearing
floats
gitweb: let page header grow on mobile for long wrapped project names

 gitweb/gitweb.perl       |  1 +
 gitweb/static/gitweb.css | 74 ++++++++++++++++++++++++++++++++++++++--
 2 files changed, 73 insertions(+), 2 deletions(-)

base-commit: b2826b52eb7caff9f4ed6e85ec45e338bf02ad09
Published-As: https://github.com/gitgitgadget/git/releases/tag/pr-2043%2Fritovision%2Fgitweb-mobile-responsive-v1
Fetch-It-Via: git fetch https://github.com/gitgitgadget/git pr-2043/ritovision/gitweb-mobile-responsive-v1
Pull-Request: https://github.com/gitgitgadget/git/pull/2043

gitgitgadget

From: Rito Rhymes <[email protected]>

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.

---
 gitweb/gitweb.perl | 1 +
 1 file changed, 1 insertion(+)

index b5490dfecf..fde804593b 100755
@@ -4214,6 +4214,7 @@ sub git_header_html {
 <head>
 <meta name="generator" content="gitweb/$version git/$git_version$mod_perl_version"/>
 <meta name="robots" content="index, nofollow"/>
+<meta name="viewport" content="width=device-width, initial-scale=1"/>
 <title>$title</title>
 EOF
 	# the stylesheet, favicon etc urls won't work correctly with path_info

gitgitgadget

From: Rito Rhymes <[email protected]>

On narrow screens, the project search input can exceed the available width and force page-wide horizontal scrolling.

Add side padding to the search container and cap the input to its container width with border-box sizing, so the form stays within the viewport.

---
 gitweb/static/gitweb.css | 7 +++++++
 1 file changed, 7 insertions(+)

index 48d2e51015..1fe120cd95 100644
@@ -537,6 +537,13 @@ div.search {
 div.projsearch {
 	text-align: center;
 	margin: 20px 0px;
+	padding: 0 8px;
+	box-sizing: border-box;
+}
+
+div.projsearch input[type="text"] {
+	max-width: 100%;
+	box-sizing: border-box;
 }
 
 div.projsearch form {

gitgitgadget

From: Rito Rhymes <[email protected]>

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.

Add a shared mobile media query to rebalance those layouts: reduce or clear paddings in log/commit sections, keep header/search content within the viewport, and allow horizontal scrolling for preformatted blob/diff content instead of forcing page-wide overflow.

---
 gitweb/static/gitweb.css | 71 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 64 insertions(+), 7 deletions(-)

index 1fe120cd95..135590b64c 100644
@@ -123,6 +123,7 @@ div.title_text {
 
 div.log_body {
 	padding: 8px 8px 8px 150px;
+	overflow-wrap: anywhere;
 }
 
 span.age {

@@ -537,13 +538,6 @@ div.search {
 div.projsearch {
 	text-align: center;
 	margin: 20px 0px;
-	padding: 0 8px;
-	box-sizing: border-box;
-}
-
-div.projsearch input[type="text"] {
-	max-width: 100%;
-	box-sizing: border-box;
 }
 
 div.projsearch form {

@@ -691,3 +685,66 @@ div.remote {
 .kwb    { color:#830000; }
 .kwc    { color:#000000; font-weight:bold; }
 .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;
+	}
+
+	div.projsearch input[type="text"] {
+		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;
+	}
+}

gitgitgadget

From: Rito Rhymes <[email protected]>

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.

---
 gitweb/static/gitweb.css | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

index 135590b64c..8247646063 100644
@@ -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;

gitgitgadget

From: Rito Rhymes <[email protected]>

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.

---
 gitweb/static/gitweb.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

index 8247646063..e2e6dd96a2 100644
@@ -42,7 +42,7 @@ a.list img.avatar {
 }
 
 div.page_header {
-	height: 25px;
+	min-height: 25px;
 	padding: 8px;
 	font-size: 150%;
 	font-weight: bold;

gitgitgadget

Summary
=======

This patch series fixes mobile responsiveness bugs that currently break page layouts in gitweb. The approach is adaptive rather than transformative:
preserve legacy desktop layout, add targeted mobile constraints at ≤768, and prevent content from escaping its containers and breaking the layout.

Changes since v1:

* End-state behavior is unchanged; this reroll improves patch sequencing and message precision.
* [2/5] now introduces the mobile @media (max-width: 768px) block and places the div.projsearch/input constraints there directly.
* [3/5] now extends that existing media block with the remaining log/commit/blob/diff mobile overflow fixes, instead of moving search rules.
* [3/5] commit message updated to match the patch flow and to clarify that overflow-wrap:anywhere on div.log_body is intentionally global.

Rationale
=========

Software development has traditionally been desktop-first and remains the primary environment, but common contributor tasks like browsing history, reading logs, reviewing diffs, and sharing links are increasingly done on mobile devices while away from the workstation. This patch series aims to support the emerging need by improving day-to-day usability for contributors accessing gitweb on small screens.

Before and After Screenshots
============================

Projects
========

Before projects-BEFORE
[https://github.com/user-attachments/assets/0742999e-99b7-46df-9a40-4283fd861e86]

After projects-AFTER
[https://github.com/user-attachments/assets/5926be36-626e-4fd4-9aee-91d87557693b]

Log
===

Before log-BEFORE
[https://github.com/user-attachments/assets/6f64ffea-0975-4d67-a1b4-35b471986ab0]

After Note: certain inputs contain non-breaking/escaped spaces (e.g., NBSP), so the renderer treats the surrounding text as a single long continous string. Under constrained widths this can present as “mid-word” wrapping, but it is the correct handling of long strings; addressing that is a content-normalization concern, not a layout concern. log-AFTER
[https://github.com/user-attachments/assets/f8852e95-4f31-4337-9b21-6d94232b1be7]

Commitdiff
==========

Before commitdiff-BEFORE
[https://github.com/user-attachments/assets/8bf8a9a7-8cab-4ba8-a7de-166410a5c52e]

After (Pre-scroll) commitdiff-AFTER-prescroll
[https://github.com/user-attachments/assets/fa00f6fa-fc20-4391-9066-a489f0625af5]

After (Post-scroll) Scrolling the tables to reveal the contents to the right commitdiff-AFTER-postScroll
[https://github.com/user-attachments/assets/74ae24e0-e279-4582-8fa2-1634fe3133ec]

Commit & Footer
===============

Before Also notice the footer text wrapping down outside the footer background along with the two buttons commit-BEFORE
[https://github.com/user-attachments/assets/1ec00258-fb71-44e9-8e8e-beaaab6cfd13]

After (Pre-scroll) commit-AFTER-prescroll
[https://github.com/user-attachments/assets/78ac7f13-9e1f-403c-9ae9-b37d82d4aa4e]

After (Post-scroll) Scrolling the table to reveal the contents to the right commit-AFTER-postScroll
[https://github.com/user-attachments/assets/8650f835-cdc3-4b11-ae1e-1229fc88e352]

Tree
====

Before tree-BEFORE
[https://github.com/user-attachments/assets/35a5db37-0450-4eee-91de-777259a49214]

After (Pre-scroll) tree-AFTER-prescroll
[https://github.com/user-attachments/assets/d993f3be-65df-48db-af38-4a3d13158f20]

After (Post-scroll) Scrolling the table to reveal the contents to the right

tree-AFTER-postScroll
[https://github.com/user-attachments/assets/1faa3184-0d63-455d-a341-c01ecf741be2]

Rito Rhymes (5):
gitweb: add viewport meta tag for mobile devices
gitweb: prevent project search bar from overflowing on mobile
gitweb: fix mobile page overflow across log/commit/blob/diff views
gitweb: fix mobile footer overflow by wrapping text and clearing
floats
gitweb: let page header grow on mobile for long wrapped project names

 gitweb/gitweb.perl       |  1 +
 gitweb/static/gitweb.css | 74 ++++++++++++++++++++++++++++++++++++++--
 2 files changed, 73 insertions(+), 2 deletions(-)

base-commit: b2826b52eb7caff9f4ed6e85ec45e338bf02ad09
Published-As: https://github.com/gitgitgadget/git/releases/tag/pr-2043%2Fritovision%2Fgitweb-mobile-responsive-v2
Fetch-It-Via: git fetch https://github.com/gitgitgadget/git pr-2043/ritovision/gitweb-mobile-responsive-v2
Pull-Request: https://github.com/gitgitgadget/git/pull/2043

Range-diff vs v1:

 1:  ff85e97cee = 1:  ff85e97cee gitweb: add viewport meta tag for mobile devices
 2:  bec6b10d50 < -:  ---------- gitweb: prevent project search bar from overflowing on mobile
 -:  ---------- > 2:  6383e1f7a9 gitweb: prevent project search bar from overflowing on mobile
 3:  7b785b6064 ! 3:  0ebad7bbc3 gitweb: fix mobile page overflow across log/commit/blob/diff views
     @@ Commit message
          overflow horizontally due to desktop-oriented paddings and fixed-width
          preformatted content.
      
     -    Add a shared mobile media query to rebalance those layouts: reduce or clear
     -    paddings in log/commit sections, keep header/search content within the
     -    viewport, and allow horizontal scrolling for preformatted blob/diff content
     -    instead of forcing page-wide overflow.
     +    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 <[email protected]>
      
     @@ gitweb/static/gitweb.css: div.title_text {
       }
       
       span.age {
     -@@ gitweb/static/gitweb.css: div.search {
     - div.projsearch {
     - 	text-align: center;
     - 	margin: 20px 0px;
     --	padding: 0 8px;
     --	box-sizing: border-box;
     --}
     --
     --div.projsearch input[type="text"] {
     --	max-width: 100%;
     --	box-sizing: border-box;
     - }
     - 
     - div.projsearch form {
      @@ gitweb/static/gitweb.css: div.remote {
     - .kwb    { color:#830000; }
     - .kwc    { color:#000000; font-weight:bold; }
       .kwd    { color:#010181; }
     -+
     -+@media (max-width: 768px) {
     + 
     + @media (max-width: 768px) {
      +	div.page_body {
      +		overflow-x: auto;
      +		-webkit-overflow-scrolling: touch;
     @@ gitweb/static/gitweb.css: div.remote {
      +		min-width: max-content;
      +	}
      +
     -+	div.projsearch {
     -+		padding: 0 8px;
     -+		box-sizing: border-box;
     -+	}
     -+
     -+	div.projsearch input[type="text"] {
     -+		max-width: 100%;
     -+		box-sizing: border-box;
     -+	}
     + 	div.projsearch {
     + 		padding: 0 8px;
     + 		box-sizing: border-box;
     +@@ gitweb/static/gitweb.css: div.remote {
     + 		max-width: 100%;
     + 		box-sizing: border-box;
     + 	}
      +
      +	div.title_text {
      +		overflow-x: auto;
     @@ gitweb/static/gitweb.css: div.remote {
      +		padding: 0 8px;
      +		white-space: pre;
      +	}
     -+}
     + }
 4:  87cfeb81fe = 4:  bbc94eee8d gitweb: fix mobile footer overflow by wrapping text and clearing floats
 5:  8d5f2ed15b = 5:  95ded55c31 gitweb: let page header grow on mobile for long wrapped project names

gitgitgadget

From: Rito Rhymes <[email protected]>

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.

---
 gitweb/gitweb.perl | 1 +
 1 file changed, 1 insertion(+)

index b5490dfecf..fde804593b 100755
@@ -4214,6 +4214,7 @@ sub git_header_html {
 <head>
 <meta name="generator" content="gitweb/$version git/$git_version$mod_perl_version"/>
 <meta name="robots" content="index, nofollow"/>
+<meta name="viewport" content="width=device-width, initial-scale=1"/>
 <title>$title</title>
 EOF
 	# the stylesheet, favicon etc urls won't work correctly with path_info

gitgitgadget

From: Rito Rhymes <[email protected]>

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.

---
 gitweb/static/gitweb.css | 12 ++++++++++++
 1 file changed, 12 insertions(+)

index 48d2e51015..0b63acc0e2 100644
@@ -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;
+	}
+}

gitgitgadget

From: Rito Rhymes <[email protected]>

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.

---
 gitweb/static/gitweb.css | 52 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

index 0b63acc0e2..135590b64c 100644
@@ -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;
+	}
 }

gitgitgadget

From: Rito Rhymes <[email protected]>

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.

---
 gitweb/static/gitweb.css | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

index 135590b64c..8247646063 100644
@@ -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;

gitgitgadget

From: Rito Rhymes <[email protected]>

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.

---
 gitweb/static/gitweb.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

index 8247646063..e2e6dd96a2 100644
@@ -42,7 +42,7 @@ a.list img.avatar {
 }
 
 div.page_header {
-	height: 25px;
+	min-height: 25px;
 	padding: 8px;
 	font-size: 150%;
 	font-weight: bold;

gitgitgadget

Good catch. I just rerolled a cleaner sequencing.

From: Eric Sunshine <[email protected]>
To: "Rito Rhymes via GitGitGadget"<[email protected]>
Cc: <[email protected]>, "Rito Rhymes"<[email protected]>
Date: Sun, 15 Feb 2026 18:20:56 -0500
Subject: Re: [PATCH 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views

The latest round of these patches have seen no reactions; is everybody happy with them, or do we have too small number of people who care about gitweb or feel competent enough in the area to review?

I am inclined to say that we should just merge it down and see who screams. Maybe we hear nothing, or complaints, or praises.

If any regressions do show up after merging,
I am happy to follow up and address them.

I ran into gitweb on mobile while browsing the FFmpeg repo and the "panzoom dance" of needing to use two hands to pinch and zoom and pan around just to read each line was a real burden.

It's a relief to resolve it!

I'm neither a gitweb user nor a CSS expert, but the structure of v2 seems more sensible than v1, thus addressing my earlier comments[*], and the changes overall make sense (given a superficial reading).

[*]: https://lore.kernel.org/git/CAPig+cSb=zzDJCoo91detBgfAi9p4a3R8sVc6iTXfzpbNxsNrg@mail.gmail.com/