# [PATCH 1/5] gitweb: add viewport meta tag for mobile devices

17 messages from 2026-02-09 to 2026-02-22. Participants: Rito Rhymes via GitGitGadget, Rito via GitGitGadget, Eric Sunshine, Matthew Pellerito, Junio C Hamano, Rito Rhymes.
Thread: https://gitlist.dev/t/64964

## Rito Rhymes via GitGitGadget, 2026-02-09 23:17

Subject: [PATCH 1/5] gitweb: add viewport meta tag for mobile devices
Message-ID: <ff85e97ceedd206f723061ced972b7b7ba431b56.1770679038.git.gitgitgadget@gmail.com>
URL: https://gitlist.dev/e/ff85e97ceedd206f723061ced972b7b7ba431b56.1770679038.git.gitgitgadget%40gmail.com
In-Reply-To: <pull.2043.git.1770679038.gitgitgadget@gmail.com>

```
From: Rito Rhymes <rito@ritovision.com>

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 <rito@ritovision.com>
---
 gitweb/gitweb.perl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/gitweb/gitweb.perl b/gitweb/gitweb.perl
index b5490dfecf..fde804593b 100755
--- a/gitweb/gitweb.perl
+++ b/gitweb/gitweb.perl
@@ -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


```

## Rito via GitGitGadget, 2026-02-09 23:17

Subject: [PATCH 0/5] gitweb: fix broken mobile layouts across views
Message-ID: <pull.2043.git.1770679038.gitgitgadget@gmail.com>
URL: https://gitlist.dev/e/pull.2043.git.1770679038.gitgitgadget%40gmail.com

```

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

```

## Rito Rhymes via GitGitGadget, 2026-02-09 23:17

Subject: [PATCH 2/5] gitweb: prevent project search bar from overflowing on mobile
Message-ID: <bec6b10d500794365581905be41980e53d1f264a.1770679038.git.gitgitgadget@gmail.com>
URL: https://gitlist.dev/e/bec6b10d500794365581905be41980e53d1f264a.1770679038.git.gitgitgadget%40gmail.com
In-Reply-To: <pull.2043.git.1770679038.gitgitgadget@gmail.com>

```
From: Rito Rhymes <rito@ritovision.com>

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.

Signed-off-by: Rito Rhymes <rito@ritovision.com>
---
 gitweb/static/gitweb.css | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css
index 48d2e51015..1fe120cd95 100644
--- a/gitweb/static/gitweb.css
+++ b/gitweb/static/gitweb.css
@@ -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


```

## Rito Rhymes via GitGitGadget, 2026-02-09 23:17

Subject: [PATCH 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views
Message-ID: <7b785b6064966aefe6883ce3c45e80bb74fe79f4.1770679038.git.gitgitgadget@gmail.com>
URL: https://gitlist.dev/e/7b785b6064966aefe6883ce3c45e80bb74fe79f4.1770679038.git.gitgitgadget%40gmail.com
In-Reply-To: <pull.2043.git.1770679038.gitgitgadget@gmail.com>

```
From: Rito Rhymes <rito@ritovision.com>

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.

Signed-off-by: Rito Rhymes <rito@ritovision.com>
---
 gitweb/static/gitweb.css | 71 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 64 insertions(+), 7 deletions(-)

diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css
index 1fe120cd95..135590b64c 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 {
@@ -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


```

## Rito Rhymes via GitGitGadget, 2026-02-09 23:17

Subject: [PATCH 4/5] gitweb: fix mobile footer overflow by wrapping text and clearing floats
Message-ID: <87cfeb81fe0016bd401b7223ba274d8f59e0a65e.1770679038.git.gitgitgadget@gmail.com>
URL: https://gitlist.dev/e/87cfeb81fe0016bd401b7223ba274d8f59e0a65e.1770679038.git.gitgitgadget%40gmail.com
In-Reply-To: <pull.2043.git.1770679038.gitgitgadget@gmail.com>

```
From: Rito Rhymes <rito@ritovision.com>

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 <rito@ritovision.com>
---
 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 135590b64c..8247646063 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;
-- 
gitgitgadget


```

## Rito Rhymes via GitGitGadget, 2026-02-09 23:17

Subject: [PATCH 5/5] gitweb: let page header grow on mobile for long wrapped project names
Message-ID: <8d5f2ed15bcdfa32df69d92d87e7aac2ee17d447.1770679038.git.gitgitgadget@gmail.com>
URL: https://gitlist.dev/e/8d5f2ed15bcdfa32df69d92d87e7aac2ee17d447.1770679038.git.gitgitgadget%40gmail.com
In-Reply-To: <pull.2043.git.1770679038.gitgitgadget@gmail.com>

```
From: Rito Rhymes <rito@ritovision.com>

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 <rito@ritovision.com>
---
 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 8247646063..e2e6dd96a2 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;
-- 
gitgitgadget

```

## Eric Sunshine, 2026-02-15 23:20

Subject: Re: [PATCH 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views
Message-ID: <CAPig+cSb=zzDJCoo91detBgfAi9p4a3R8sVc6iTXfzpbNxsNrg@mail.gmail.com>
URL: https://gitlist.dev/e/CAPig%2BcSb%3DzzDJCoo91detBgfAi9p4a3R8sVc6iTXfzpbNxsNrg%40mail.gmail.com
In-Reply-To: <7b785b6064966aefe6883ce3c45e80bb74fe79f4.1770679038.git.gitgitgadget@gmail.com>

```
On Mon, Feb 9, 2026 at 6:17 PM Rito Rhymes via GitGitGadget
<gitgitgadget@gmail.com> wrote:
> 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.
>
> Signed-off-by: Rito Rhymes <rito@ritovision.com>
> ---
> diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css
> @@ -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;
>  }

These lines were all added by patch [2/5], applying to all viewport
sizes, but here in patch [3/5]...

> @@ -691,3 +685,66 @@ div.remote {
> +@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;
> +       }

...they are relocated to this @media query. It seems a bit odd to add
the lines in one patch and then immediately relocate them in the next
patch, and it's not clear why the series is constructed this way. I
could, perhaps, understand having separate patches like this if the
idea is to specially call out the existing "broken" behavior, but
considering that the commit message of both patches talk about
restricting the width of the input field to fit the viewport, I'm
having trouble understanding why the patches are separate.

```

## Rito via GitGitGadget, 2026-02-16 15:53

Subject: [PATCH v2 0/5] gitweb: fix broken mobile layouts across views
Message-ID: <pull.2043.v2.git.1771257211.gitgitgadget@gmail.com>
URL: https://gitlist.dev/e/pull.2043.v2.git.1771257211.gitgitgadget%40gmail.com
In-Reply-To: <pull.2043.git.1770679038.gitgitgadget@gmail.com>

```

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 <rito@ritovision.com>
      
     @@ 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

```

## Rito Rhymes via GitGitGadget, 2026-02-16 15:53

Subject: [PATCH v2 1/5] gitweb: add viewport meta tag for mobile devices
Message-ID: <ff85e97ceedd206f723061ced972b7b7ba431b56.1771257211.git.gitgitgadget@gmail.com>
URL: https://gitlist.dev/e/ff85e97ceedd206f723061ced972b7b7ba431b56.1771257211.git.gitgitgadget%40gmail.com
In-Reply-To: <pull.2043.v2.git.1771257211.gitgitgadget@gmail.com>

```
From: Rito Rhymes <rito@ritovision.com>

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 <rito@ritovision.com>
---
 gitweb/gitweb.perl | 1 +
 1 file changed, 1 insertion(+)

diff --git a/gitweb/gitweb.perl b/gitweb/gitweb.perl
index b5490dfecf..fde804593b 100755
--- a/gitweb/gitweb.perl
+++ b/gitweb/gitweb.perl
@@ -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


```

## Rito Rhymes via GitGitGadget, 2026-02-16 15:53

Subject: [PATCH v2 2/5] gitweb: prevent project search bar from overflowing on mobile
Message-ID: <6383e1f7a9545c14d02570d5733b4b3e0513c960.1771257211.git.gitgitgadget@gmail.com>
URL: https://gitlist.dev/e/6383e1f7a9545c14d02570d5733b4b3e0513c960.1771257211.git.gitgitgadget%40gmail.com
In-Reply-To: <pull.2043.v2.git.1771257211.gitgitgadget@gmail.com>

```
From: Rito Rhymes <rito@ritovision.com>

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 <rito@ritovision.com>
---
 gitweb/static/gitweb.css | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css
index 48d2e51015..0b63acc0e2 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;
+	}
+}
-- 
gitgitgadget


```

## Rito Rhymes via GitGitGadget, 2026-02-16 15:53

Subject: [PATCH v2 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views
Message-ID: <0ebad7bbc39e68a712c25372e51141b302b9e7b0.1771257211.git.gitgitgadget@gmail.com>
URL: https://gitlist.dev/e/0ebad7bbc39e68a712c25372e51141b302b9e7b0.1771257211.git.gitgitgadget%40gmail.com
In-Reply-To: <pull.2043.v2.git.1771257211.gitgitgadget@gmail.com>

```
From: Rito Rhymes <rito@ritovision.com>

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>
---
 gitweb/static/gitweb.css | 52 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css
index 0b63acc0e2..135590b64c 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;
+	}
 }
-- 
gitgitgadget


```

## Rito Rhymes via GitGitGadget, 2026-02-16 15:53

Subject: [PATCH v2 4/5] gitweb: fix mobile footer overflow by wrapping text and clearing floats
Message-ID: <bbc94eee8dadef6d590c97a89b223751de0731c9.1771257211.git.gitgitgadget@gmail.com>
URL: https://gitlist.dev/e/bbc94eee8dadef6d590c97a89b223751de0731c9.1771257211.git.gitgitgadget%40gmail.com
In-Reply-To: <pull.2043.v2.git.1771257211.gitgitgadget@gmail.com>

```
From: Rito Rhymes <rito@ritovision.com>

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 <rito@ritovision.com>
---
 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 135590b64c..8247646063 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;
-- 
gitgitgadget


```

## Rito Rhymes via GitGitGadget, 2026-02-16 15:53

Subject: [PATCH v2 5/5] gitweb: let page header grow on mobile for long wrapped project names
Message-ID: <95ded55c31ee56943327c8e321ed7b5311ffb1ac.1771257211.git.gitgitgadget@gmail.com>
URL: https://gitlist.dev/e/95ded55c31ee56943327c8e321ed7b5311ffb1ac.1771257211.git.gitgitgadget%40gmail.com
In-Reply-To: <pull.2043.v2.git.1771257211.gitgitgadget@gmail.com>

```
From: Rito Rhymes <rito@ritovision.com>

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 <rito@ritovision.com>
---
 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 8247646063..e2e6dd96a2 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;
-- 
gitgitgadget

```

## Matthew Pellerito, 2026-02-17 12:29

Subject: Re: [PATCH 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views
Message-ID: <19c6b938a9a.dac9ed8487680.8990157022586832057@ritovision.com>
URL: https://gitlist.dev/e/19c6b938a9a.dac9ed8487680.8990157022586832057%40ritovision.com
In-Reply-To: <CAPig+cSb=zzDJCoo91detBgfAi9p4a3R8sVc6iTXfzpbNxsNrg@mail.gmail.com>

```
Good catch. I just rerolled a cleaner sequencing.


From: Eric Sunshine <sunshine@sunshineco.com>
To: "Rito Rhymes via GitGitGadget"<gitgitgadget@gmail.com>
Cc: <git@vger.kernel.org>, "Rito Rhymes"<rito@ritovision.com>
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

 > On Mon, Feb 9, 2026 at 6:17 PM Rito Rhymes via GitGitGadget
 > <gitgitgadget@gmail.com> wrote:
 > > 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.
 > >
 > > Signed-off-by: Rito Rhymes <rito@ritovision.com>
 > > ---
 > > diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css
 > > @@ -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;
 > >  }
 > 
 > These lines were all added by patch [2/5], applying to all viewport
 > sizes, but here in patch [3/5]...
 > 
 > > @@ -691,3 +685,66 @@ div.remote {
 > > +@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;
 > > +       }
 > 
 > ...they are relocated to this @media query. It seems a bit odd to add
 > the lines in one patch and then immediately relocate them in the next
 > patch, and it's not clear why the series is constructed this way. I
 > could, perhaps, understand having separate patches like this if the
 > idea is to specially call out the existing "broken" behavior, but
 > considering that the commit message of both patches talk about
 > restricting the width of the input field to fit the viewport, I'm
 > having trouble understanding why the patches are separate.
 > 
 > 


```

## Junio C Hamano, 2026-02-20 22:38

Subject: Re: [PATCH v2 0/5] gitweb: fix broken mobile layouts across views
Message-ID: <xmqqo6ljujkl.fsf@gitster.g>
URL: https://gitlist.dev/e/xmqqo6ljujkl.fsf%40gitster.g
In-Reply-To: <pull.2043.v2.git.1771257211.gitgitgadget@gmail.com>

```
"Rito via GitGitGadget" <gitgitgadget@gmail.com> writes:

> 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.

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.


```

## Rito Rhymes, 2026-02-21 00:17

Subject: Re: [PATCH v2 0/5] gitweb: fix broken mobile layouts across views
Message-ID: <DGK7HUXGOPXD.3HKUNKYC06PF8@ritovision.com>
URL: https://gitlist.dev/e/DGK7HUXGOPXD.3HKUNKYC06PF8%40ritovision.com
In-Reply-To: <xmqqo6ljujkl.fsf@gitster.g>

```
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!

```

## Eric Sunshine, 2026-02-22 08:39

Subject: Re: [PATCH v2 0/5] gitweb: fix broken mobile layouts across views
Message-ID: <CAPig+cSnD+jopFfgjYU+vv=DudcyFwpKLHaEfu5McS5hdViqWg@mail.gmail.com>
URL: https://gitlist.dev/e/CAPig%2BcSnD%2BjopFfgjYU%2Bvv%3DDudcyFwpKLHaEfu5McS5hdViqWg%40mail.gmail.com
In-Reply-To: <xmqqo6ljujkl.fsf@gitster.g>

```
On Fri, Feb 20, 2026 at 5:38 PM Junio C Hamano <gitster@pobox.com> wrote:
> "Rito via GitGitGadget" <gitgitgadget@gmail.com> writes:
> > 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.
>
> 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.

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/

```