threads / patch / 64964

patch, 5 partsgitweb: add viewport meta tag for mobile devices

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

## tl;dr

17 messages between Feb 9, 2026 and Feb 22, 2026. Diffs are folded; open one to read it.

replies: 16people: 4as markdown or json

Rito via GitGitGadget· Feb 9, 2026, 23:17 UTC · lore

[PATCH 0/5] 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
Rito Rhymes via GitGitGadget· Feb 9, 2026, 23:17 UTC · re: Rito via GitGitGadget · lore
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(+)
Show changes to gitweb/gitweb.perl +1 −0
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· Feb 9, 2026, 23:17 UTC · re: Rito via GitGitGadget · lore

[PATCH 2/5] gitweb: prevent project search bar from overflowing on mobile

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(+)
Show changes to gitweb/static/gitweb.css +7 −0
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· Feb 9, 2026, 23:17 UTC · re: Rito via GitGitGadget · lore

[PATCH 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views

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(-)
Show changes to gitweb/static/gitweb.css +64 −7
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
Eric Sunshine· Feb 15, 2026, 23:20 UTC · re: Rito Rhymes via GitGitGadget · lore

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:

Show 24 quoted lines
> 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]...

Show 11 quoted lines
> @@ -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.

Matthew Pellerito· Feb 17, 2026, 12:29 UTC · re: Eric Sunshine · lore

Re: [PATCH 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views

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.
 > 
 >
Rito Rhymes via GitGitGadget· Feb 9, 2026, 23:17 UTC · re: Rito via GitGitGadget · lore

[PATCH 4/5] gitweb: fix mobile footer overflow by wrapping text and clearing floats

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(-)
Show changes to gitweb/static/gitweb.css +7 −1
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· Feb 9, 2026, 23:17 UTC · re: Rito via GitGitGadget · lore

[PATCH 5/5] gitweb: let page header grow on mobile for long wrapped project names

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(-)
Show changes to gitweb/static/gitweb.css +1 −1
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
Rito via GitGitGadget· Feb 16, 2026, 15:53 UTC · re: Rito via GitGitGadget · lore

[PATCH v2 0/5] 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.

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· Feb 16, 2026, 15:53 UTC · re: Rito via GitGitGadget · lore

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

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(+)
Show changes to gitweb/gitweb.perl +1 −0
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· Feb 16, 2026, 15:53 UTC · re: Rito via GitGitGadget · lore

[PATCH v2 2/5] gitweb: prevent project search bar from overflowing on mobile

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(+)
Show changes to gitweb/static/gitweb.css +12 −0
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· Feb 16, 2026, 15:53 UTC · re: Rito via GitGitGadget · lore

[PATCH v2 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views

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(+)
Show changes to gitweb/static/gitweb.css +52 −0
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· Feb 16, 2026, 15:53 UTC · re: Rito via GitGitGadget · lore

[PATCH v2 4/5] gitweb: fix mobile footer overflow by wrapping text and clearing floats

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(-)
Show changes to gitweb/static/gitweb.css +7 −1
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· Feb 16, 2026, 15:53 UTC · re: Rito via GitGitGadget · lore

[PATCH v2 5/5] gitweb: let page header grow on mobile for long wrapped project names

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(-)
Show changes to gitweb/static/gitweb.css +1 −1
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
Junio C Hamano· Feb 20, 2026, 22:38 UTC · re: Rito via GitGitGadget · lore

Re: [PATCH v2 0/5] gitweb: fix broken mobile layouts across views

"Rito via GitGitGadget" <gitgitgadget@gmail.com> writes:
Show 7 quoted lines
> 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· Feb 21, 2026, 00:17 UTC · re: Junio C Hamano · lore

Re: [PATCH v2 0/5] gitweb: fix broken mobile layouts across views

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· Feb 22, 2026, 08:39 UTC · re: Junio C Hamano · lore

Re: [PATCH v2 0/5] gitweb: fix broken mobile layouts across views

On Fri, Feb 20, 2026 at 5:38 PM Junio C Hamano <gitster@pobox.com> wrote:
Show 12 quoted lines
> "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/

← back to recent threads