* [PATCH 1/5] gitweb: add viewport meta tag for mobile devices
2026-02-09 23:17 [PATCH 0/5] gitweb: fix broken mobile layouts across views Rito via GitGitGadget
@ 2026-02-09 23:17 ` Rito Rhymes via GitGitGadget
2026-02-09 23:17 ` [PATCH 2/5] gitweb: prevent project search bar from overflowing on mobile Rito Rhymes via GitGitGadget
` (4 subsequent siblings)
5 siblings, 0 replies; 17+ messages in thread
From: Rito Rhymes via GitGitGadget @ 2026-02-09 23:17 UTC (permalink / raw)
To: git; +Cc: Rito, Rito Rhymes
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
^ permalink raw reply related [flat|nested] 17+ messages in thread* [PATCH 2/5] gitweb: prevent project search bar from overflowing on mobile
2026-02-09 23:17 [PATCH 0/5] gitweb: fix broken mobile layouts across views Rito via GitGitGadget
2026-02-09 23:17 ` [PATCH 1/5] gitweb: add viewport meta tag for mobile devices Rito Rhymes via GitGitGadget
@ 2026-02-09 23:17 ` Rito Rhymes via GitGitGadget
2026-02-09 23:17 ` [PATCH 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views Rito Rhymes via GitGitGadget
` (3 subsequent siblings)
5 siblings, 0 replies; 17+ messages in thread
From: Rito Rhymes via GitGitGadget @ 2026-02-09 23:17 UTC (permalink / raw)
To: git; +Cc: Rito, Rito Rhymes
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
^ permalink raw reply related [flat|nested] 17+ messages in thread* [PATCH 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views
2026-02-09 23:17 [PATCH 0/5] gitweb: fix broken mobile layouts across views Rito via GitGitGadget
2026-02-09 23:17 ` [PATCH 1/5] gitweb: add viewport meta tag for mobile devices Rito Rhymes via GitGitGadget
2026-02-09 23:17 ` [PATCH 2/5] gitweb: prevent project search bar from overflowing on mobile Rito Rhymes via GitGitGadget
@ 2026-02-09 23:17 ` Rito Rhymes via GitGitGadget
2026-02-15 23:20 ` Eric Sunshine
2026-02-09 23:17 ` [PATCH 4/5] gitweb: fix mobile footer overflow by wrapping text and clearing floats Rito Rhymes via GitGitGadget
` (2 subsequent siblings)
5 siblings, 1 reply; 17+ messages in thread
From: Rito Rhymes via GitGitGadget @ 2026-02-09 23:17 UTC (permalink / raw)
To: git; +Cc: Rito, Rito Rhymes
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
^ permalink raw reply related [flat|nested] 17+ messages in thread* Re: [PATCH 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views
2026-02-09 23:17 ` [PATCH 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views Rito Rhymes via GitGitGadget
@ 2026-02-15 23:20 ` Eric Sunshine
2026-02-17 12:29 ` Matthew Pellerito
0 siblings, 1 reply; 17+ messages in thread
From: Eric Sunshine @ 2026-02-15 23:20 UTC (permalink / raw)
To: Rito Rhymes via GitGitGadget; +Cc: git, Rito Rhymes
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.
^ permalink raw reply [flat|nested] 17+ messages in thread* Re: [PATCH 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views
2026-02-15 23:20 ` Eric Sunshine
@ 2026-02-17 12:29 ` Matthew Pellerito
0 siblings, 0 replies; 17+ messages in thread
From: Matthew Pellerito @ 2026-02-17 12:29 UTC (permalink / raw)
To: Eric Sunshine; +Cc: Rito Rhymes via GitGitGadget, git
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.
>
>
^ permalink raw reply [flat|nested] 17+ messages in thread
* [PATCH 4/5] gitweb: fix mobile footer overflow by wrapping text and clearing floats
2026-02-09 23:17 [PATCH 0/5] gitweb: fix broken mobile layouts across views Rito via GitGitGadget
` (2 preceding siblings ...)
2026-02-09 23:17 ` [PATCH 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views Rito Rhymes via GitGitGadget
@ 2026-02-09 23:17 ` Rito Rhymes via GitGitGadget
2026-02-09 23:17 ` [PATCH 5/5] gitweb: let page header grow on mobile for long wrapped project names Rito Rhymes via GitGitGadget
2026-02-16 15:53 ` [PATCH v2 0/5] gitweb: fix broken mobile layouts across views Rito via GitGitGadget
5 siblings, 0 replies; 17+ messages in thread
From: Rito Rhymes via GitGitGadget @ 2026-02-09 23:17 UTC (permalink / raw)
To: git; +Cc: Rito, Rito Rhymes
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
^ permalink raw reply related [flat|nested] 17+ messages in thread* [PATCH 5/5] gitweb: let page header grow on mobile for long wrapped project names
2026-02-09 23:17 [PATCH 0/5] gitweb: fix broken mobile layouts across views Rito via GitGitGadget
` (3 preceding siblings ...)
2026-02-09 23:17 ` [PATCH 4/5] gitweb: fix mobile footer overflow by wrapping text and clearing floats Rito Rhymes via GitGitGadget
@ 2026-02-09 23:17 ` Rito Rhymes via GitGitGadget
2026-02-16 15:53 ` [PATCH v2 0/5] gitweb: fix broken mobile layouts across views Rito via GitGitGadget
5 siblings, 0 replies; 17+ messages in thread
From: Rito Rhymes via GitGitGadget @ 2026-02-09 23:17 UTC (permalink / raw)
To: git; +Cc: Rito, Rito Rhymes
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
^ permalink raw reply related [flat|nested] 17+ messages in thread* [PATCH v2 0/5] gitweb: fix broken mobile layouts across views
2026-02-09 23:17 [PATCH 0/5] gitweb: fix broken mobile layouts across views Rito via GitGitGadget
` (4 preceding siblings ...)
2026-02-09 23:17 ` [PATCH 5/5] gitweb: let page header grow on mobile for long wrapped project names Rito Rhymes via GitGitGadget
@ 2026-02-16 15:53 ` Rito via GitGitGadget
2026-02-16 15:53 ` [PATCH v2 1/5] gitweb: add viewport meta tag for mobile devices Rito Rhymes via GitGitGadget
` (5 more replies)
5 siblings, 6 replies; 17+ messages in thread
From: Rito via GitGitGadget @ 2026-02-16 15:53 UTC (permalink / raw)
To: git; +Cc: Eric Sunshine, Rito
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
^ permalink raw reply [flat|nested] 17+ messages in thread* [PATCH v2 1/5] gitweb: add viewport meta tag for mobile devices
2026-02-16 15:53 ` [PATCH v2 0/5] gitweb: fix broken mobile layouts across views Rito via GitGitGadget
@ 2026-02-16 15:53 ` Rito Rhymes via GitGitGadget
2026-02-16 15:53 ` [PATCH v2 2/5] gitweb: prevent project search bar from overflowing on mobile Rito Rhymes via GitGitGadget
` (4 subsequent siblings)
5 siblings, 0 replies; 17+ messages in thread
From: Rito Rhymes via GitGitGadget @ 2026-02-16 15:53 UTC (permalink / raw)
To: git; +Cc: Eric Sunshine, Rito, Rito Rhymes
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
^ permalink raw reply related [flat|nested] 17+ messages in thread* [PATCH v2 2/5] gitweb: prevent project search bar from overflowing on mobile
2026-02-16 15:53 ` [PATCH v2 0/5] gitweb: fix broken mobile layouts across views Rito via GitGitGadget
2026-02-16 15:53 ` [PATCH v2 1/5] gitweb: add viewport meta tag for mobile devices Rito Rhymes via GitGitGadget
@ 2026-02-16 15:53 ` Rito Rhymes via GitGitGadget
2026-02-16 15:53 ` [PATCH v2 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views Rito Rhymes via GitGitGadget
` (3 subsequent siblings)
5 siblings, 0 replies; 17+ messages in thread
From: Rito Rhymes via GitGitGadget @ 2026-02-16 15:53 UTC (permalink / raw)
To: git; +Cc: Eric Sunshine, Rito, Rito Rhymes
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
^ permalink raw reply related [flat|nested] 17+ messages in thread* [PATCH v2 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views
2026-02-16 15:53 ` [PATCH v2 0/5] gitweb: fix broken mobile layouts across views Rito via GitGitGadget
2026-02-16 15:53 ` [PATCH v2 1/5] gitweb: add viewport meta tag for mobile devices Rito Rhymes via GitGitGadget
2026-02-16 15:53 ` [PATCH v2 2/5] gitweb: prevent project search bar from overflowing on mobile Rito Rhymes via GitGitGadget
@ 2026-02-16 15:53 ` Rito Rhymes via GitGitGadget
2026-02-16 15:53 ` [PATCH v2 4/5] gitweb: fix mobile footer overflow by wrapping text and clearing floats Rito Rhymes via GitGitGadget
` (2 subsequent siblings)
5 siblings, 0 replies; 17+ messages in thread
From: Rito Rhymes via GitGitGadget @ 2026-02-16 15:53 UTC (permalink / raw)
To: git; +Cc: Eric Sunshine, Rito, Rito Rhymes
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
^ permalink raw reply related [flat|nested] 17+ messages in thread* [PATCH v2 4/5] gitweb: fix mobile footer overflow by wrapping text and clearing floats
2026-02-16 15:53 ` [PATCH v2 0/5] gitweb: fix broken mobile layouts across views Rito via GitGitGadget
` (2 preceding siblings ...)
2026-02-16 15:53 ` [PATCH v2 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views Rito Rhymes via GitGitGadget
@ 2026-02-16 15:53 ` Rito Rhymes via GitGitGadget
2026-02-16 15:53 ` [PATCH v2 5/5] gitweb: let page header grow on mobile for long wrapped project names Rito Rhymes via GitGitGadget
2026-02-20 22:38 ` [PATCH v2 0/5] gitweb: fix broken mobile layouts across views Junio C Hamano
5 siblings, 0 replies; 17+ messages in thread
From: Rito Rhymes via GitGitGadget @ 2026-02-16 15:53 UTC (permalink / raw)
To: git; +Cc: Eric Sunshine, Rito, Rito Rhymes
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
^ permalink raw reply related [flat|nested] 17+ messages in thread* [PATCH v2 5/5] gitweb: let page header grow on mobile for long wrapped project names
2026-02-16 15:53 ` [PATCH v2 0/5] gitweb: fix broken mobile layouts across views Rito via GitGitGadget
` (3 preceding siblings ...)
2026-02-16 15:53 ` [PATCH v2 4/5] gitweb: fix mobile footer overflow by wrapping text and clearing floats Rito Rhymes via GitGitGadget
@ 2026-02-16 15:53 ` Rito Rhymes via GitGitGadget
2026-02-20 22:38 ` [PATCH v2 0/5] gitweb: fix broken mobile layouts across views Junio C Hamano
5 siblings, 0 replies; 17+ messages in thread
From: Rito Rhymes via GitGitGadget @ 2026-02-16 15:53 UTC (permalink / raw)
To: git; +Cc: Eric Sunshine, Rito, Rito Rhymes
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
^ permalink raw reply related [flat|nested] 17+ messages in thread* Re: [PATCH v2 0/5] gitweb: fix broken mobile layouts across views
2026-02-16 15:53 ` [PATCH v2 0/5] gitweb: fix broken mobile layouts across views Rito via GitGitGadget
` (4 preceding siblings ...)
2026-02-16 15:53 ` [PATCH v2 5/5] gitweb: let page header grow on mobile for long wrapped project names Rito Rhymes via GitGitGadget
@ 2026-02-20 22:38 ` Junio C Hamano
2026-02-21 0:17 ` Rito Rhymes
2026-02-22 8:39 ` Eric Sunshine
5 siblings, 2 replies; 17+ messages in thread
From: Junio C Hamano @ 2026-02-20 22:38 UTC (permalink / raw)
To: Rito via GitGitGadget; +Cc: git, Eric Sunshine, Rito
"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.
^ permalink raw reply [flat|nested] 17+ messages in thread* Re: [PATCH v2 0/5] gitweb: fix broken mobile layouts across views
2026-02-20 22:38 ` [PATCH v2 0/5] gitweb: fix broken mobile layouts across views Junio C Hamano
@ 2026-02-21 0:17 ` Rito Rhymes
2026-02-22 8:39 ` Eric Sunshine
1 sibling, 0 replies; 17+ messages in thread
From: Rito Rhymes @ 2026-02-21 0:17 UTC (permalink / raw)
To: Junio C Hamano, Rito via GitGitGadget; +Cc: git, Eric Sunshine, Rito
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!
^ permalink raw reply [flat|nested] 17+ messages in thread
* Re: [PATCH v2 0/5] gitweb: fix broken mobile layouts across views
2026-02-20 22:38 ` [PATCH v2 0/5] gitweb: fix broken mobile layouts across views Junio C Hamano
2026-02-21 0:17 ` Rito Rhymes
@ 2026-02-22 8:39 ` Eric Sunshine
1 sibling, 0 replies; 17+ messages in thread
From: Eric Sunshine @ 2026-02-22 8:39 UTC (permalink / raw)
To: Junio C Hamano; +Cc: Rito via GitGitGadget, git, Rito
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/
^ permalink raw reply [flat|nested] 17+ messages in thread