Skip to content

gitweb: fix broken mobile layouts across views #2043

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ritorhymes wants to merge 5 commits into
base: master
Choose a base branch
from
+73 −2
Open

gitweb: fix broken mobile layouts across views #2043

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ff85e97
gitweb: add viewport meta tag for mobile devices
ritorhymes Feb 7, 2026
6383e1f
gitweb: prevent project search bar from overflowing on mobile
ritorhymes Feb 7, 2026
0ebad7b
gitweb: fix mobile page overflow across log/commit/blob/diff views
ritorhymes Feb 8, 2026
bbc94ee
gitweb: fix mobile footer overflow by wrapping text and clearing floats
ritorhymes Feb 8, 2026
95ded55
gitweb: let page header grow on mobile for long wrapped project names
ritorhymes Feb 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions gitweb/gitweb.perl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
74 changes: 72 additions & 2 deletions gitweb/static/gitweb.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ a.list img.avatar {
}

div.page_header {
height: 25px;
min-height: 25px;
padding: 8px;
font-size: 150%;
font-weight: bold;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -123,6 +129,7 @@ div.title_text {

Copy link

@gitgitgadget gitgitgadget bot Feb 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Eric Sunshine wrote on the Git mailing list (how to reply to this email):

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.

Copy link

@gitgitgadget gitgitgadget bot Feb 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Matthew Pellerito wrote on the Git mailing list (how to reply to this email):

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

div.log_body {
padding: 8px 8px 8px 150px;
overflow-wrap: anywhere;
}

span.age {
Expand Down Expand Up @@ -684,3 +691,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;
}
}
Loading