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

["Rito via GitGitGadget" <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