{"thread":{"id":"64964","subject":"[PATCH 1/5] gitweb: add viewport meta tag for mobile devices","startedAt":"2026-02-09T23:17:22Z","lastAt":"2026-02-22T08:39:45Z","messageCount":17,"participants":["Rito Rhymes via GitGitGadget","Rito via GitGitGadget","Eric Sunshine","Matthew Pellerito","Junio C Hamano","Rito Rhymes"],"isPatch":true,"patchVersion":1,"patchTotal":5},"messages":[{"id":"535622","messageId":"ff85e97ceedd206f723061ced972b7b7ba431b56.1770679038.git.gitgitgadget@gmail.com","threadId":"64964","inReplyTo":"pull.2043.git.1770679038.gitgitgadget@gmail.com","subject":"[PATCH 1/5] gitweb: add viewport meta tag for mobile devices","fromName":"Rito Rhymes via GitGitGadget","fromEmail":"gitgitgadget@gmail.com","sentAt":"2026-02-09T23:17:14Z","receivedAt":"2026-02-09T23:17:22Z","isPatch":true,"sender":{"key":"rito@ritovision.com","avatar":"https://avatars.githubusercontent.com/u/83614463?v=4"},"body":"From: Rito Rhymes <rito@ritovision.com>\n\nWithout a viewport meta tag, phone browsers render gitweb at desktop\nwidth and scale the whole page down to fit the screen.\n\nAdd a viewport meta tag so the layout viewport tracks device width.\nThis is the baseline needed for mobile CSS fixes in follow-up commits.\n\nSigned-off-by: Rito Rhymes <rito@ritovision.com>\n---\n gitweb/gitweb.perl | 1 +\n 1 file changed, 1 insertion(+)\n\ndiff --git a/gitweb/gitweb.perl b/gitweb/gitweb.perl\nindex b5490dfecf..fde804593b 100755\n--- a/gitweb/gitweb.perl\n+++ b/gitweb/gitweb.perl\n@@ -4214,6 +4214,7 @@ sub git_header_html {\n <head>\n <meta name=\"generator\" content=\"gitweb/$version git/$git_version$mod_perl_version\"/>\n <meta name=\"robots\" content=\"index, nofollow\"/>\n+<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"/>\n <title>$title</title>\n EOF\n \t# the stylesheet, favicon etc urls won't work correctly with path_info\n-- \ngitgitgadget\n\n"},{"id":"535623","messageId":"pull.2043.git.1770679038.gitgitgadget@gmail.com","threadId":"64964","inReplyTo":null,"subject":"[PATCH 0/5] gitweb: fix broken mobile layouts across views","fromName":"Rito via GitGitGadget","fromEmail":"gitgitgadget@gmail.com","sentAt":"2026-02-09T23:17:13Z","receivedAt":"2026-02-09T23:17:22Z","isPatch":true,"sender":{"key":"name:Rito","avatar":null},"body":"\nSummary\n=======\n\nThis patch series fixes mobile responsiveness bugs that currently break page\nlayouts in gitweb. The approach is adaptive rather than transformative:\npreserve legacy desktop layout, add targeted mobile constraints at ≤768, and\nprevent content from escaping its containers and breaking the layout.\n\n\nRationale\n=========\n\nSoftware development has traditionally been desktop-first and remains the\nprimary environment, but common contributor tasks like browsing history,\nreading logs, reviewing diffs, and sharing links are increasingly done on\nmobile devices while away from the workstation. This patch series aims to\nsupport the emerging need by improving day-to-day usability for contributors\naccessing gitweb on small screens.\n\n\nBefore and After Screenshots\n============================\n\n\nProjects\n========\n\nBefore projects-BEFORE\n[https://github.com/user-attachments/assets/0742999e-99b7-46df-9a40-4283fd861e86]\n\nAfter projects-AFTER\n[https://github.com/user-attachments/assets/5926be36-626e-4fd4-9aee-91d87557693b]\n\n\nLog\n===\n\nBefore log-BEFORE\n[https://github.com/user-attachments/assets/6f64ffea-0975-4d67-a1b4-35b471986ab0]\n\nAfter Note: certain inputs contain non-breaking/escaped spaces (e.g., NBSP),\nso the renderer treats the surrounding text as a single long continous\nstring. Under constrained widths this can present as “mid-word” wrapping,\nbut it is the correct handling of long strings; addressing that is a\ncontent-normalization concern, not a layout concern. log-AFTER\n[https://github.com/user-attachments/assets/f8852e95-4f31-4337-9b21-6d94232b1be7]\n\n\nCommitdiff\n==========\n\nBefore commitdiff-BEFORE\n[https://github.com/user-attachments/assets/8bf8a9a7-8cab-4ba8-a7de-166410a5c52e]\n\nAfter (Pre-scroll) commitdiff-AFTER-prescroll\n[https://github.com/user-attachments/assets/fa00f6fa-fc20-4391-9066-a489f0625af5]\n\nAfter (Post-scroll) Scrolling the tables to reveal the contents to the right\ncommitdiff-AFTER-postScroll\n[https://github.com/user-attachments/assets/74ae24e0-e279-4582-8fa2-1634fe3133ec]\n\n\nCommit & Footer\n===============\n\nBefore Also notice the footer text wrapping down outside the footer\nbackground along with the two buttons commit-BEFORE\n[https://github.com/user-attachments/assets/1ec00258-fb71-44e9-8e8e-beaaab6cfd13]\n\nAfter (Pre-scroll) commit-AFTER-prescroll\n[https://github.com/user-attachments/assets/78ac7f13-9e1f-403c-9ae9-b37d82d4aa4e]\n\nAfter (Post-scroll) Scrolling the table to reveal the contents to the right\ncommit-AFTER-postScroll\n[https://github.com/user-attachments/assets/8650f835-cdc3-4b11-ae1e-1229fc88e352]\n\n\nTree\n====\n\nBefore tree-BEFORE\n[https://github.com/user-attachments/assets/35a5db37-0450-4eee-91de-777259a49214]\n\nAfter (Pre-scroll) tree-AFTER-prescroll\n[https://github.com/user-attachments/assets/d993f3be-65df-48db-af38-4a3d13158f20]\n\nAfter (Post-scroll) Scrolling the table to reveal the contents to the right\n\ntree-AFTER-postScroll\n[https://github.com/user-attachments/assets/1faa3184-0d63-455d-a341-c01ecf741be2]\n\nRito Rhymes (5):\n  gitweb: add viewport meta tag for mobile devices\n  gitweb: prevent project search bar from overflowing on mobile\n  gitweb: fix mobile page overflow across log/commit/blob/diff views\n  gitweb: fix mobile footer overflow by wrapping text and clearing\n    floats\n  gitweb: let page header grow on mobile for long wrapped project names\n\n gitweb/gitweb.perl       |  1 +\n gitweb/static/gitweb.css | 74 ++++++++++++++++++++++++++++++++++++++--\n 2 files changed, 73 insertions(+), 2 deletions(-)\n\n\nbase-commit: b2826b52eb7caff9f4ed6e85ec45e338bf02ad09\nPublished-As: https://github.com/gitgitgadget/git/releases/tag/pr-2043%2Fritovision%2Fgitweb-mobile-responsive-v1\nFetch-It-Via: git fetch https://github.com/gitgitgadget/git pr-2043/ritovision/gitweb-mobile-responsive-v1\nPull-Request: https://github.com/gitgitgadget/git/pull/2043\n-- \ngitgitgadget\n"},{"id":"535624","messageId":"bec6b10d500794365581905be41980e53d1f264a.1770679038.git.gitgitgadget@gmail.com","threadId":"64964","inReplyTo":"pull.2043.git.1770679038.gitgitgadget@gmail.com","subject":"[PATCH 2/5] gitweb: prevent project search bar from overflowing on mobile","fromName":"Rito Rhymes via GitGitGadget","fromEmail":"gitgitgadget@gmail.com","sentAt":"2026-02-09T23:17:15Z","receivedAt":"2026-02-09T23:17:24Z","isPatch":true,"sender":{"key":"rito@ritovision.com","avatar":"https://avatars.githubusercontent.com/u/83614463?v=4"},"body":"From: Rito Rhymes <rito@ritovision.com>\n\nOn narrow screens, the project search input can exceed the available width\nand force page-wide horizontal scrolling.\n\nAdd side padding to the search container and cap the input to its container\nwidth with border-box sizing, so the form stays within the viewport.\n\nSigned-off-by: Rito Rhymes <rito@ritovision.com>\n---\n gitweb/static/gitweb.css | 7 +++++++\n 1 file changed, 7 insertions(+)\n\ndiff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css\nindex 48d2e51015..1fe120cd95 100644\n--- a/gitweb/static/gitweb.css\n+++ b/gitweb/static/gitweb.css\n@@ -537,6 +537,13 @@ div.search {\n div.projsearch {\n \ttext-align: center;\n \tmargin: 20px 0px;\n+\tpadding: 0 8px;\n+\tbox-sizing: border-box;\n+}\n+\n+div.projsearch input[type=\"text\"] {\n+\tmax-width: 100%;\n+\tbox-sizing: border-box;\n }\n \n div.projsearch form {\n-- \ngitgitgadget\n\n"},{"id":"535625","messageId":"7b785b6064966aefe6883ce3c45e80bb74fe79f4.1770679038.git.gitgitgadget@gmail.com","threadId":"64964","inReplyTo":"pull.2043.git.1770679038.gitgitgadget@gmail.com","subject":"[PATCH 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views","fromName":"Rito Rhymes via GitGitGadget","fromEmail":"gitgitgadget@gmail.com","sentAt":"2026-02-09T23:17:16Z","receivedAt":"2026-02-09T23:17:26Z","isPatch":true,"sender":{"key":"rito@ritovision.com","avatar":"https://avatars.githubusercontent.com/u/83614463?v=4"},"body":"From: Rito Rhymes <rito@ritovision.com>\n\nOn mobile-sized viewports, gitweb pages in log/commit/blob/diff views can\noverflow horizontally due to desktop-oriented paddings and fixed-width\npreformatted content.\n\nAdd a shared mobile media query to rebalance those layouts: reduce or clear\npaddings in log/commit sections, keep header/search content within the\nviewport, and allow horizontal scrolling for preformatted blob/diff content\ninstead of forcing page-wide overflow.\n\nSigned-off-by: Rito Rhymes <rito@ritovision.com>\n---\n gitweb/static/gitweb.css | 71 ++++++++++++++++++++++++++++++++++++----\n 1 file changed, 64 insertions(+), 7 deletions(-)\n\ndiff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css\nindex 1fe120cd95..135590b64c 100644\n--- a/gitweb/static/gitweb.css\n+++ b/gitweb/static/gitweb.css\n@@ -123,6 +123,7 @@ div.title_text {\n \n div.log_body {\n \tpadding: 8px 8px 8px 150px;\n+\toverflow-wrap: anywhere;\n }\n \n span.age {\n@@ -537,13 +538,6 @@ div.search {\n div.projsearch {\n \ttext-align: center;\n \tmargin: 20px 0px;\n-\tpadding: 0 8px;\n-\tbox-sizing: border-box;\n-}\n-\n-div.projsearch input[type=\"text\"] {\n-\tmax-width: 100%;\n-\tbox-sizing: border-box;\n }\n \n div.projsearch form {\n@@ -691,3 +685,66 @@ div.remote {\n .kwb    { color:#830000; }\n .kwc    { color:#000000; font-weight:bold; }\n .kwd    { color:#010181; }\n+\n+@media (max-width: 768px) {\n+\tdiv.page_body {\n+\t\toverflow-x: auto;\n+\t\t-webkit-overflow-scrolling: touch;\n+\t}\n+\n+\tdiv.page_body div.pre {\n+\t\tmin-width: max-content;\n+\t}\n+\n+\tdiv.projsearch {\n+\t\tpadding: 0 8px;\n+\t\tbox-sizing: border-box;\n+\t}\n+\n+\tdiv.projsearch input[type=\"text\"] {\n+\t\tmax-width: 100%;\n+\t\tbox-sizing: border-box;\n+\t}\n+\n+\tdiv.title_text {\n+\t\toverflow-x: auto;\n+\t\t-webkit-overflow-scrolling: touch;\n+\t\tpadding-left: 4px;\n+\t\tpadding-right: 4px;\n+\t\tbox-sizing: border-box;\n+\t}\n+\n+\tdiv.title_text table.object_header {\n+\t\twidth: max-content;\n+\t}\n+\n+\tdiv.log_body {\n+\t\tpadding: 8px;\n+\t\tclear: left;\n+\t}\n+\n+\tdiv.patchset div.patch {\n+\t\twidth: max-content;\n+\t\tmin-width: 100%;\n+\t}\n+\n+\tdiv.diff.header {\n+\t\tpadding: 4px 8px 2px 8px;\n+\t\twhite-space: nowrap;\n+\t\toverflow-wrap: normal;\n+\t}\n+\n+\tdiv.diff.extended_header {\n+\t\tpadding: 2px 8px;\n+\t\twhite-space: nowrap;\n+\t\toverflow-wrap: normal;\n+\t}\n+\n+\tdiv.diff.ctx,\n+\tdiv.diff.add,\n+\tdiv.diff.rem,\n+\tdiv.diff.chunk_header {\n+\t\tpadding: 0 8px;\n+\t\twhite-space: pre;\n+\t}\n+}\n-- \ngitgitgadget\n\n"},{"id":"535626","messageId":"87cfeb81fe0016bd401b7223ba274d8f59e0a65e.1770679038.git.gitgitgadget@gmail.com","threadId":"64964","inReplyTo":"pull.2043.git.1770679038.gitgitgadget@gmail.com","subject":"[PATCH 4/5] gitweb: fix mobile footer overflow by wrapping text and clearing floats","fromName":"Rito Rhymes via GitGitGadget","fromEmail":"gitgitgadget@gmail.com","sentAt":"2026-02-09T23:17:17Z","receivedAt":"2026-02-09T23:17:27Z","isPatch":true,"sender":{"key":"rito@ritovision.com","avatar":"https://avatars.githubusercontent.com/u/83614463?v=4"},"body":"From: Rito Rhymes <rito@ritovision.com>\n\nOn narrow screens, footer text can wrap, but the fixed 22px footer height\nand floated footer blocks can cause overflow.\n\nSwitch to min-height and add a clearfix on the footer container so it grows\nto contain wrapped float content cleanly.\n\nSigned-off-by: Rito Rhymes <rito@ritovision.com>\n---\n gitweb/static/gitweb.css | 8 +++++++-\n 1 file changed, 7 insertions(+), 1 deletion(-)\n\ndiff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css\nindex 135590b64c..8247646063 100644\n--- a/gitweb/static/gitweb.css\n+++ b/gitweb/static/gitweb.css\n@@ -73,11 +73,17 @@ div.page_path {\n }\n \n div.page_footer {\n-\theight: 22px;\n+\tmin-height: 22px;\n \tpadding: 4px 8px;\n \tbackground-color: #d9d8d1;\n }\n \n+div.page_footer::after {\n+\tcontent: \"\";\n+\tdisplay: table;\n+\tclear: both;\n+}\n+\n div.page_footer_text {\n \tline-height: 22px;\n \tfloat: left;\n-- \ngitgitgadget\n\n"},{"id":"535627","messageId":"8d5f2ed15bcdfa32df69d92d87e7aac2ee17d447.1770679038.git.gitgitgadget@gmail.com","threadId":"64964","inReplyTo":"pull.2043.git.1770679038.gitgitgadget@gmail.com","subject":"[PATCH 5/5] gitweb: let page header grow on mobile for long wrapped project names","fromName":"Rito Rhymes via GitGitGadget","fromEmail":"gitgitgadget@gmail.com","sentAt":"2026-02-09T23:17:18Z","receivedAt":"2026-02-09T23:17:28Z","isPatch":true,"sender":{"key":"rito@ritovision.com","avatar":"https://avatars.githubusercontent.com/u/83614463?v=4"},"body":"From: Rito Rhymes <rito@ritovision.com>\n\nOn mobile, long project names in the page header can wrap to multiple lines,\nbut the fixed 25px header height does not grow with wrapped content.\n\nSwitch the header from fixed height to min-height so it expands as needed\nwhile keeping the same baseline height for single-line titles.\n\nSigned-off-by: Rito Rhymes <rito@ritovision.com>\n---\n gitweb/static/gitweb.css | 2 +-\n 1 file changed, 1 insertion(+), 1 deletion(-)\n\ndiff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css\nindex 8247646063..e2e6dd96a2 100644\n--- a/gitweb/static/gitweb.css\n+++ b/gitweb/static/gitweb.css\n@@ -42,7 +42,7 @@ a.list img.avatar {\n }\n \n div.page_header {\n-\theight: 25px;\n+\tmin-height: 25px;\n \tpadding: 8px;\n \tfont-size: 150%;\n \tfont-weight: bold;\n-- \ngitgitgadget\n"},{"id":"536077","messageId":"CAPig+cSb=zzDJCoo91detBgfAi9p4a3R8sVc6iTXfzpbNxsNrg@mail.gmail.com","threadId":"64964","inReplyTo":"7b785b6064966aefe6883ce3c45e80bb74fe79f4.1770679038.git.gitgitgadget@gmail.com","subject":"Re: [PATCH 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views","fromName":"Eric Sunshine","fromEmail":"sunshine@sunshineco.com","sentAt":"2026-02-15T23:20:56Z","receivedAt":"2026-02-15T23:21:08Z","isPatch":true,"sender":{"key":"sunshine@sunshineco.com","avatar":"https://avatars.githubusercontent.com/u/163641?v=4"},"body":"On Mon, Feb 9, 2026 at 6:17 PM Rito Rhymes via GitGitGadget\n<gitgitgadget@gmail.com> wrote:\n> On mobile-sized viewports, gitweb pages in log/commit/blob/diff views can\n> overflow horizontally due to desktop-oriented paddings and fixed-width\n> preformatted content.\n>\n> Add a shared mobile media query to rebalance those layouts: reduce or clear\n> paddings in log/commit sections, keep header/search content within the\n> viewport, and allow horizontal scrolling for preformatted blob/diff content\n> instead of forcing page-wide overflow.\n>\n> Signed-off-by: Rito Rhymes <rito@ritovision.com>\n> ---\n> diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css\n> @@ -537,13 +538,6 @@ div.search {\n>  div.projsearch {\n>         text-align: center;\n>         margin: 20px 0px;\n> -       padding: 0 8px;\n> -       box-sizing: border-box;\n> -}\n> -\n> -div.projsearch input[type=\"text\"] {\n> -       max-width: 100%;\n> -       box-sizing: border-box;\n>  }\n\nThese lines were all added by patch [2/5], applying to all viewport\nsizes, but here in patch [3/5]...\n\n> @@ -691,3 +685,66 @@ div.remote {\n> +@media (max-width: 768px) {\n> +       div.projsearch {\n> +               padding: 0 8px;\n> +               box-sizing: border-box;\n> +       }\n> +\n> +       div.projsearch input[type=\"text\"] {\n> +               max-width: 100%;\n> +               box-sizing: border-box;\n> +       }\n\n...they are relocated to this @media query. It seems a bit odd to add\nthe lines in one patch and then immediately relocate them in the next\npatch, and it's not clear why the series is constructed this way. I\ncould, perhaps, understand having separate patches like this if the\nidea is to specially call out the existing \"broken\" behavior, but\nconsidering that the commit message of both patches talk about\nrestricting the width of the input field to fit the viewport, I'm\nhaving trouble understanding why the patches are separate.\n"},{"id":"536112","messageId":"pull.2043.v2.git.1771257211.gitgitgadget@gmail.com","threadId":"64964","inReplyTo":"pull.2043.git.1770679038.gitgitgadget@gmail.com","subject":"[PATCH v2 0/5] gitweb: fix broken mobile layouts across views","fromName":"Rito via GitGitGadget","fromEmail":"gitgitgadget@gmail.com","sentAt":"2026-02-16T15:53:26Z","receivedAt":"2026-02-16T15:53:34Z","isPatch":true,"sender":{"key":"name:Rito","avatar":null},"body":"\nSummary\n=======\n\nThis patch series fixes mobile responsiveness bugs that currently break page\nlayouts in gitweb. The approach is adaptive rather than transformative:\npreserve legacy desktop layout, add targeted mobile constraints at ≤768, and\nprevent content from escaping its containers and breaking the layout.\n\nChanges since v1:\n\n * End-state behavior is unchanged; this reroll improves patch sequencing\n   and message precision.\n * [2/5] now introduces the mobile @media (max-width: 768px) block and\n   places the div.projsearch/input constraints there directly.\n * [3/5] now extends that existing media block with the remaining\n   log/commit/blob/diff mobile overflow fixes, instead of moving search\n   rules.\n * [3/5] commit message updated to match the patch flow and to clarify that\n   overflow-wrap:anywhere on div.log_body is intentionally global.\n\n\nRationale\n=========\n\nSoftware development has traditionally been desktop-first and remains the\nprimary environment, but common contributor tasks like browsing history,\nreading logs, reviewing diffs, and sharing links are increasingly done on\nmobile devices while away from the workstation. This patch series aims to\nsupport the emerging need by improving day-to-day usability for contributors\naccessing gitweb on small screens.\n\n\nBefore and After Screenshots\n============================\n\n\nProjects\n========\n\nBefore projects-BEFORE\n[https://github.com/user-attachments/assets/0742999e-99b7-46df-9a40-4283fd861e86]\n\nAfter projects-AFTER\n[https://github.com/user-attachments/assets/5926be36-626e-4fd4-9aee-91d87557693b]\n\n\nLog\n===\n\nBefore log-BEFORE\n[https://github.com/user-attachments/assets/6f64ffea-0975-4d67-a1b4-35b471986ab0]\n\nAfter Note: certain inputs contain non-breaking/escaped spaces (e.g., NBSP),\nso the renderer treats the surrounding text as a single long continous\nstring. Under constrained widths this can present as “mid-word” wrapping,\nbut it is the correct handling of long strings; addressing that is a\ncontent-normalization concern, not a layout concern. log-AFTER\n[https://github.com/user-attachments/assets/f8852e95-4f31-4337-9b21-6d94232b1be7]\n\n\nCommitdiff\n==========\n\nBefore commitdiff-BEFORE\n[https://github.com/user-attachments/assets/8bf8a9a7-8cab-4ba8-a7de-166410a5c52e]\n\nAfter (Pre-scroll) commitdiff-AFTER-prescroll\n[https://github.com/user-attachments/assets/fa00f6fa-fc20-4391-9066-a489f0625af5]\n\nAfter (Post-scroll) Scrolling the tables to reveal the contents to the right\ncommitdiff-AFTER-postScroll\n[https://github.com/user-attachments/assets/74ae24e0-e279-4582-8fa2-1634fe3133ec]\n\n\nCommit & Footer\n===============\n\nBefore Also notice the footer text wrapping down outside the footer\nbackground along with the two buttons commit-BEFORE\n[https://github.com/user-attachments/assets/1ec00258-fb71-44e9-8e8e-beaaab6cfd13]\n\nAfter (Pre-scroll) commit-AFTER-prescroll\n[https://github.com/user-attachments/assets/78ac7f13-9e1f-403c-9ae9-b37d82d4aa4e]\n\nAfter (Post-scroll) Scrolling the table to reveal the contents to the right\ncommit-AFTER-postScroll\n[https://github.com/user-attachments/assets/8650f835-cdc3-4b11-ae1e-1229fc88e352]\n\n\nTree\n====\n\nBefore tree-BEFORE\n[https://github.com/user-attachments/assets/35a5db37-0450-4eee-91de-777259a49214]\n\nAfter (Pre-scroll) tree-AFTER-prescroll\n[https://github.com/user-attachments/assets/d993f3be-65df-48db-af38-4a3d13158f20]\n\nAfter (Post-scroll) Scrolling the table to reveal the contents to the right\n\ntree-AFTER-postScroll\n[https://github.com/user-attachments/assets/1faa3184-0d63-455d-a341-c01ecf741be2]\n\nRito Rhymes (5):\n  gitweb: add viewport meta tag for mobile devices\n  gitweb: prevent project search bar from overflowing on mobile\n  gitweb: fix mobile page overflow across log/commit/blob/diff views\n  gitweb: fix mobile footer overflow by wrapping text and clearing\n    floats\n  gitweb: let page header grow on mobile for long wrapped project names\n\n gitweb/gitweb.perl       |  1 +\n gitweb/static/gitweb.css | 74 ++++++++++++++++++++++++++++++++++++++--\n 2 files changed, 73 insertions(+), 2 deletions(-)\n\n\nbase-commit: b2826b52eb7caff9f4ed6e85ec45e338bf02ad09\nPublished-As: https://github.com/gitgitgadget/git/releases/tag/pr-2043%2Fritovision%2Fgitweb-mobile-responsive-v2\nFetch-It-Via: git fetch https://github.com/gitgitgadget/git pr-2043/ritovision/gitweb-mobile-responsive-v2\nPull-Request: https://github.com/gitgitgadget/git/pull/2043\n\nRange-diff vs v1:\n\n 1:  ff85e97cee = 1:  ff85e97cee gitweb: add viewport meta tag for mobile devices\n 2:  bec6b10d50 < -:  ---------- gitweb: prevent project search bar from overflowing on mobile\n -:  ---------- > 2:  6383e1f7a9 gitweb: prevent project search bar from overflowing on mobile\n 3:  7b785b6064 ! 3:  0ebad7bbc3 gitweb: fix mobile page overflow across log/commit/blob/diff views\n     @@ Commit message\n          overflow horizontally due to desktop-oriented paddings and fixed-width\n          preformatted content.\n      \n     -    Add a shared mobile media query to rebalance those layouts: reduce or clear\n     -    paddings in log/commit sections, keep header/search content within the\n     -    viewport, and allow horizontal scrolling for preformatted blob/diff content\n     -    instead of forcing page-wide overflow.\n     +    Extend the existing mobile media query to rebalance those layouts: reduce\n     +    or clear paddings in log/commit sections, and allow horizontal scrolling\n     +    for preformatted blob/diff content instead of forcing page-wide overflow.\n     +\n     +    All layout adjustments in this patch are mobile-scoped, except one global\n     +    safeguard: set overflow-wrap:anywhere on div.log_body. Log content can\n     +    contain escaped or non-breaking text that behaves like a single long token\n     +    and can overflow at any viewport width, including desktop.\n      \n          Signed-off-by: Rito Rhymes <rito@ritovision.com>\n      \n     @@ gitweb/static/gitweb.css: div.title_text {\n       }\n       \n       span.age {\n     -@@ gitweb/static/gitweb.css: div.search {\n     - div.projsearch {\n     - \ttext-align: center;\n     - \tmargin: 20px 0px;\n     --\tpadding: 0 8px;\n     --\tbox-sizing: border-box;\n     --}\n     --\n     --div.projsearch input[type=\"text\"] {\n     --\tmax-width: 100%;\n     --\tbox-sizing: border-box;\n     - }\n     - \n     - div.projsearch form {\n      @@ gitweb/static/gitweb.css: div.remote {\n     - .kwb    { color:#830000; }\n     - .kwc    { color:#000000; font-weight:bold; }\n       .kwd    { color:#010181; }\n     -+\n     -+@media (max-width: 768px) {\n     + \n     + @media (max-width: 768px) {\n      +\tdiv.page_body {\n      +\t\toverflow-x: auto;\n      +\t\t-webkit-overflow-scrolling: touch;\n     @@ gitweb/static/gitweb.css: div.remote {\n      +\t\tmin-width: max-content;\n      +\t}\n      +\n     -+\tdiv.projsearch {\n     -+\t\tpadding: 0 8px;\n     -+\t\tbox-sizing: border-box;\n     -+\t}\n     -+\n     -+\tdiv.projsearch input[type=\"text\"] {\n     -+\t\tmax-width: 100%;\n     -+\t\tbox-sizing: border-box;\n     -+\t}\n     + \tdiv.projsearch {\n     + \t\tpadding: 0 8px;\n     + \t\tbox-sizing: border-box;\n     +@@ gitweb/static/gitweb.css: div.remote {\n     + \t\tmax-width: 100%;\n     + \t\tbox-sizing: border-box;\n     + \t}\n      +\n      +\tdiv.title_text {\n      +\t\toverflow-x: auto;\n     @@ gitweb/static/gitweb.css: div.remote {\n      +\t\tpadding: 0 8px;\n      +\t\twhite-space: pre;\n      +\t}\n     -+}\n     + }\n 4:  87cfeb81fe = 4:  bbc94eee8d gitweb: fix mobile footer overflow by wrapping text and clearing floats\n 5:  8d5f2ed15b = 5:  95ded55c31 gitweb: let page header grow on mobile for long wrapped project names\n\n-- \ngitgitgadget\n"},{"id":"536113","messageId":"ff85e97ceedd206f723061ced972b7b7ba431b56.1771257211.git.gitgitgadget@gmail.com","threadId":"64964","inReplyTo":"pull.2043.v2.git.1771257211.gitgitgadget@gmail.com","subject":"[PATCH v2 1/5] gitweb: add viewport meta tag for mobile devices","fromName":"Rito Rhymes via GitGitGadget","fromEmail":"gitgitgadget@gmail.com","sentAt":"2026-02-16T15:53:27Z","receivedAt":"2026-02-16T15:53:35Z","isPatch":true,"sender":{"key":"rito@ritovision.com","avatar":"https://avatars.githubusercontent.com/u/83614463?v=4"},"body":"From: Rito Rhymes <rito@ritovision.com>\n\nWithout a viewport meta tag, phone browsers render gitweb at desktop\nwidth and scale the whole page down to fit the screen.\n\nAdd a viewport meta tag so the layout viewport tracks device width.\nThis is the baseline needed for mobile CSS fixes in follow-up commits.\n\nSigned-off-by: Rito Rhymes <rito@ritovision.com>\n---\n gitweb/gitweb.perl | 1 +\n 1 file changed, 1 insertion(+)\n\ndiff --git a/gitweb/gitweb.perl b/gitweb/gitweb.perl\nindex b5490dfecf..fde804593b 100755\n--- a/gitweb/gitweb.perl\n+++ b/gitweb/gitweb.perl\n@@ -4214,6 +4214,7 @@ sub git_header_html {\n <head>\n <meta name=\"generator\" content=\"gitweb/$version git/$git_version$mod_perl_version\"/>\n <meta name=\"robots\" content=\"index, nofollow\"/>\n+<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"/>\n <title>$title</title>\n EOF\n \t# the stylesheet, favicon etc urls won't work correctly with path_info\n-- \ngitgitgadget\n\n"},{"id":"536114","messageId":"6383e1f7a9545c14d02570d5733b4b3e0513c960.1771257211.git.gitgitgadget@gmail.com","threadId":"64964","inReplyTo":"pull.2043.v2.git.1771257211.gitgitgadget@gmail.com","subject":"[PATCH v2 2/5] gitweb: prevent project search bar from overflowing on mobile","fromName":"Rito Rhymes via GitGitGadget","fromEmail":"gitgitgadget@gmail.com","sentAt":"2026-02-16T15:53:28Z","receivedAt":"2026-02-16T15:53:36Z","isPatch":true,"sender":{"key":"rito@ritovision.com","avatar":"https://avatars.githubusercontent.com/u/83614463?v=4"},"body":"From: Rito Rhymes <rito@ritovision.com>\n\nOn narrow screens, the project search input can exceed the available width\nand force page-wide horizontal scrolling.\n\nAdd a mobile media query and apply side padding to the search container,\nthen cap the input width to its container with border-box sizing so the\nform stays within the viewport.\n\nSigned-off-by: Rito Rhymes <rito@ritovision.com>\n---\n gitweb/static/gitweb.css | 12 ++++++++++++\n 1 file changed, 12 insertions(+)\n\ndiff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css\nindex 48d2e51015..0b63acc0e2 100644\n--- a/gitweb/static/gitweb.css\n+++ b/gitweb/static/gitweb.css\n@@ -684,3 +684,15 @@ div.remote {\n .kwb    { color:#830000; }\n .kwc    { color:#000000; font-weight:bold; }\n .kwd    { color:#010181; }\n+\n+@media (max-width: 768px) {\n+\tdiv.projsearch {\n+\t\tpadding: 0 8px;\n+\t\tbox-sizing: border-box;\n+\t}\n+\n+\tdiv.projsearch input[type=\"text\"] {\n+\t\tmax-width: 100%;\n+\t\tbox-sizing: border-box;\n+\t}\n+}\n-- \ngitgitgadget\n\n"},{"id":"536115","messageId":"0ebad7bbc39e68a712c25372e51141b302b9e7b0.1771257211.git.gitgitgadget@gmail.com","threadId":"64964","inReplyTo":"pull.2043.v2.git.1771257211.gitgitgadget@gmail.com","subject":"[PATCH v2 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views","fromName":"Rito Rhymes via GitGitGadget","fromEmail":"gitgitgadget@gmail.com","sentAt":"2026-02-16T15:53:29Z","receivedAt":"2026-02-16T15:53:37Z","isPatch":true,"sender":{"key":"rito@ritovision.com","avatar":"https://avatars.githubusercontent.com/u/83614463?v=4"},"body":"From: Rito Rhymes <rito@ritovision.com>\n\nOn mobile-sized viewports, gitweb pages in log/commit/blob/diff views can\noverflow horizontally due to desktop-oriented paddings and fixed-width\npreformatted content.\n\nExtend the existing mobile media query to rebalance those layouts: reduce\nor clear paddings in log/commit sections, and allow horizontal scrolling\nfor preformatted blob/diff content instead of forcing page-wide overflow.\n\nAll layout adjustments in this patch are mobile-scoped, except one global\nsafeguard: set overflow-wrap:anywhere on div.log_body. Log content can\ncontain escaped or non-breaking text that behaves like a single long token\nand can overflow at any viewport width, including desktop.\n\nSigned-off-by: Rito Rhymes <rito@ritovision.com>\n---\n gitweb/static/gitweb.css | 52 ++++++++++++++++++++++++++++++++++++++++\n 1 file changed, 52 insertions(+)\n\ndiff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css\nindex 0b63acc0e2..135590b64c 100644\n--- a/gitweb/static/gitweb.css\n+++ b/gitweb/static/gitweb.css\n@@ -123,6 +123,7 @@ div.title_text {\n \n div.log_body {\n \tpadding: 8px 8px 8px 150px;\n+\toverflow-wrap: anywhere;\n }\n \n span.age {\n@@ -686,6 +687,15 @@ div.remote {\n .kwd    { color:#010181; }\n \n @media (max-width: 768px) {\n+\tdiv.page_body {\n+\t\toverflow-x: auto;\n+\t\t-webkit-overflow-scrolling: touch;\n+\t}\n+\n+\tdiv.page_body div.pre {\n+\t\tmin-width: max-content;\n+\t}\n+\n \tdiv.projsearch {\n \t\tpadding: 0 8px;\n \t\tbox-sizing: border-box;\n@@ -695,4 +705,46 @@ div.remote {\n \t\tmax-width: 100%;\n \t\tbox-sizing: border-box;\n \t}\n+\n+\tdiv.title_text {\n+\t\toverflow-x: auto;\n+\t\t-webkit-overflow-scrolling: touch;\n+\t\tpadding-left: 4px;\n+\t\tpadding-right: 4px;\n+\t\tbox-sizing: border-box;\n+\t}\n+\n+\tdiv.title_text table.object_header {\n+\t\twidth: max-content;\n+\t}\n+\n+\tdiv.log_body {\n+\t\tpadding: 8px;\n+\t\tclear: left;\n+\t}\n+\n+\tdiv.patchset div.patch {\n+\t\twidth: max-content;\n+\t\tmin-width: 100%;\n+\t}\n+\n+\tdiv.diff.header {\n+\t\tpadding: 4px 8px 2px 8px;\n+\t\twhite-space: nowrap;\n+\t\toverflow-wrap: normal;\n+\t}\n+\n+\tdiv.diff.extended_header {\n+\t\tpadding: 2px 8px;\n+\t\twhite-space: nowrap;\n+\t\toverflow-wrap: normal;\n+\t}\n+\n+\tdiv.diff.ctx,\n+\tdiv.diff.add,\n+\tdiv.diff.rem,\n+\tdiv.diff.chunk_header {\n+\t\tpadding: 0 8px;\n+\t\twhite-space: pre;\n+\t}\n }\n-- \ngitgitgadget\n\n"},{"id":"536116","messageId":"bbc94eee8dadef6d590c97a89b223751de0731c9.1771257211.git.gitgitgadget@gmail.com","threadId":"64964","inReplyTo":"pull.2043.v2.git.1771257211.gitgitgadget@gmail.com","subject":"[PATCH v2 4/5] gitweb: fix mobile footer overflow by wrapping text and clearing floats","fromName":"Rito Rhymes via GitGitGadget","fromEmail":"gitgitgadget@gmail.com","sentAt":"2026-02-16T15:53:30Z","receivedAt":"2026-02-16T15:53:39Z","isPatch":true,"sender":{"key":"rito@ritovision.com","avatar":"https://avatars.githubusercontent.com/u/83614463?v=4"},"body":"From: Rito Rhymes <rito@ritovision.com>\n\nOn narrow screens, footer text can wrap, but the fixed 22px footer height\nand floated footer blocks can cause overflow.\n\nSwitch to min-height and add a clearfix on the footer container so it grows\nto contain wrapped float content cleanly.\n\nSigned-off-by: Rito Rhymes <rito@ritovision.com>\n---\n gitweb/static/gitweb.css | 8 +++++++-\n 1 file changed, 7 insertions(+), 1 deletion(-)\n\ndiff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css\nindex 135590b64c..8247646063 100644\n--- a/gitweb/static/gitweb.css\n+++ b/gitweb/static/gitweb.css\n@@ -73,11 +73,17 @@ div.page_path {\n }\n \n div.page_footer {\n-\theight: 22px;\n+\tmin-height: 22px;\n \tpadding: 4px 8px;\n \tbackground-color: #d9d8d1;\n }\n \n+div.page_footer::after {\n+\tcontent: \"\";\n+\tdisplay: table;\n+\tclear: both;\n+}\n+\n div.page_footer_text {\n \tline-height: 22px;\n \tfloat: left;\n-- \ngitgitgadget\n\n"},{"id":"536117","messageId":"95ded55c31ee56943327c8e321ed7b5311ffb1ac.1771257211.git.gitgitgadget@gmail.com","threadId":"64964","inReplyTo":"pull.2043.v2.git.1771257211.gitgitgadget@gmail.com","subject":"[PATCH v2 5/5] gitweb: let page header grow on mobile for long wrapped project names","fromName":"Rito Rhymes via GitGitGadget","fromEmail":"gitgitgadget@gmail.com","sentAt":"2026-02-16T15:53:31Z","receivedAt":"2026-02-16T15:53:40Z","isPatch":true,"sender":{"key":"rito@ritovision.com","avatar":"https://avatars.githubusercontent.com/u/83614463?v=4"},"body":"From: Rito Rhymes <rito@ritovision.com>\n\nOn mobile, long project names in the page header can wrap to multiple lines,\nbut the fixed 25px header height does not grow with wrapped content.\n\nSwitch the header from fixed height to min-height so it expands as needed\nwhile keeping the same baseline height for single-line titles.\n\nSigned-off-by: Rito Rhymes <rito@ritovision.com>\n---\n gitweb/static/gitweb.css | 2 +-\n 1 file changed, 1 insertion(+), 1 deletion(-)\n\ndiff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css\nindex 8247646063..e2e6dd96a2 100644\n--- a/gitweb/static/gitweb.css\n+++ b/gitweb/static/gitweb.css\n@@ -42,7 +42,7 @@ a.list img.avatar {\n }\n \n div.page_header {\n-\theight: 25px;\n+\tmin-height: 25px;\n \tpadding: 8px;\n \tfont-size: 150%;\n \tfont-weight: bold;\n-- \ngitgitgadget\n"},{"id":"536177","messageId":"19c6b938a9a.dac9ed8487680.8990157022586832057@ritovision.com","threadId":"64964","inReplyTo":"CAPig+cSb=zzDJCoo91detBgfAi9p4a3R8sVc6iTXfzpbNxsNrg@mail.gmail.com","subject":"Re: [PATCH 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views","fromName":"Matthew Pellerito","fromEmail":"rito@ritovision.com","sentAt":"2026-02-17T12:29:17Z","receivedAt":"2026-02-17T12:29:22Z","isPatch":true,"sender":{"key":"rito@ritovision.com","avatar":"https://avatars.githubusercontent.com/u/83614463?v=4"},"body":"Good catch. I just rerolled a cleaner sequencing.\n\n\nFrom: Eric Sunshine <sunshine@sunshineco.com>\nTo: \"Rito Rhymes via GitGitGadget\"<gitgitgadget@gmail.com>\nCc: <git@vger.kernel.org>, \"Rito Rhymes\"<rito@ritovision.com>\nDate: Sun, 15 Feb 2026 18:20:56 -0500\nSubject: Re: [PATCH 3/5] gitweb: fix mobile page overflow across log/commit/blob/diff views\n\n > On Mon, Feb 9, 2026 at 6:17 PM Rito Rhymes via GitGitGadget\n > <gitgitgadget@gmail.com> wrote:\n > > On mobile-sized viewports, gitweb pages in log/commit/blob/diff views can\n > > overflow horizontally due to desktop-oriented paddings and fixed-width\n > > preformatted content.\n > >\n > > Add a shared mobile media query to rebalance those layouts: reduce or clear\n > > paddings in log/commit sections, keep header/search content within the\n > > viewport, and allow horizontal scrolling for preformatted blob/diff content\n > > instead of forcing page-wide overflow.\n > >\n > > Signed-off-by: Rito Rhymes <rito@ritovision.com>\n > > ---\n > > diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css\n > > @@ -537,13 +538,6 @@ div.search {\n > >  div.projsearch {\n > >         text-align: center;\n > >         margin: 20px 0px;\n > > -       padding: 0 8px;\n > > -       box-sizing: border-box;\n > > -}\n > > -\n > > -div.projsearch input[type=\"text\"] {\n > > -       max-width: 100%;\n > > -       box-sizing: border-box;\n > >  }\n > \n > These lines were all added by patch [2/5], applying to all viewport\n > sizes, but here in patch [3/5]...\n > \n > > @@ -691,3 +685,66 @@ div.remote {\n > > +@media (max-width: 768px) {\n > > +       div.projsearch {\n > > +               padding: 0 8px;\n > > +               box-sizing: border-box;\n > > +       }\n > > +\n > > +       div.projsearch input[type=\"text\"] {\n > > +               max-width: 100%;\n > > +               box-sizing: border-box;\n > > +       }\n > \n > ...they are relocated to this @media query. It seems a bit odd to add\n > the lines in one patch and then immediately relocate them in the next\n > patch, and it's not clear why the series is constructed this way. I\n > could, perhaps, understand having separate patches like this if the\n > idea is to specially call out the existing \"broken\" behavior, but\n > considering that the commit message of both patches talk about\n > restricting the width of the input field to fit the viewport, I'm\n > having trouble understanding why the patches are separate.\n > \n > \n\n"},{"id":"536558","messageId":"xmqqo6ljujkl.fsf@gitster.g","threadId":"64964","inReplyTo":"pull.2043.v2.git.1771257211.gitgitgadget@gmail.com","subject":"Re: [PATCH v2 0/5] gitweb: fix broken mobile layouts across views","fromName":"Junio C Hamano","fromEmail":"gitster@pobox.com","sentAt":"2026-02-20T22:38:34Z","receivedAt":"2026-02-20T22:38:36Z","isPatch":true,"sender":{"key":"gitster@pobox.com","avatar":"https://avatars.githubusercontent.com/u/54884?v=4"},"body":"\"Rito via GitGitGadget\" <gitgitgadget@gmail.com> writes:\n\n> Summary\n> =======\n>\n> This patch series fixes mobile responsiveness bugs that currently break page\n> layouts in gitweb. The approach is adaptive rather than transformative:\n> preserve legacy desktop layout, add targeted mobile constraints at ≤768, and\n> prevent content from escaping its containers and breaking the layout.\n\nThe latest round of these patches have seen no reactions; is\neverybody happy with them, or do we have too small number of people\nwho care about gitweb or feel competent enough in the area to review?\n\nI am inclined to say that we should just merge it down and see who\nscreams.  Maybe we hear nothing, or complaints, or praises.\n\n"},{"id":"536567","messageId":"DGK7HUXGOPXD.3HKUNKYC06PF8@ritovision.com","threadId":"64964","inReplyTo":"xmqqo6ljujkl.fsf@gitster.g","subject":"Re: [PATCH v2 0/5] gitweb: fix broken mobile layouts across views","fromName":"Rito Rhymes","fromEmail":"rito@ritovision.com","sentAt":"2026-02-21T00:17:11Z","receivedAt":"2026-02-21T00:17:23Z","isPatch":true,"sender":{"key":"rito@ritovision.com","avatar":"https://avatars.githubusercontent.com/u/83614463?v=4"},"body":"If any regressions do show up after merging,\nI am happy to follow up and address them.\n\nI ran into gitweb on mobile while browsing the FFmpeg repo\nand the \"panzoom dance\" of needing to use two hands to pinch\nand zoom and pan around just to read each line was a real burden.\n\nIt's a relief to resolve it!\n"},{"id":"536636","messageId":"CAPig+cSnD+jopFfgjYU+vv=DudcyFwpKLHaEfu5McS5hdViqWg@mail.gmail.com","threadId":"64964","inReplyTo":"xmqqo6ljujkl.fsf@gitster.g","subject":"Re: [PATCH v2 0/5] gitweb: fix broken mobile layouts across views","fromName":"Eric Sunshine","fromEmail":"sunshine@sunshineco.com","sentAt":"2026-02-22T08:39:33Z","receivedAt":"2026-02-22T08:39:45Z","isPatch":true,"sender":{"key":"sunshine@sunshineco.com","avatar":"https://avatars.githubusercontent.com/u/163641?v=4"},"body":"On Fri, Feb 20, 2026 at 5:38 PM Junio C Hamano <gitster@pobox.com> wrote:\n> \"Rito via GitGitGadget\" <gitgitgadget@gmail.com> writes:\n> > This patch series fixes mobile responsiveness bugs that currently break page\n> > layouts in gitweb. The approach is adaptive rather than transformative:\n> > preserve legacy desktop layout, add targeted mobile constraints at ≤768, and\n> > prevent content from escaping its containers and breaking the layout.\n>\n> The latest round of these patches have seen no reactions; is\n> everybody happy with them, or do we have too small number of people\n> who care about gitweb or feel competent enough in the area to review?\n>\n> I am inclined to say that we should just merge it down and see who\n> screams.  Maybe we hear nothing, or complaints, or praises.\n\nI'm neither a gitweb user nor a CSS expert, but the structure of v2\nseems more sensible than v1, thus addressing my earlier comments[*],\nand the changes overall make sense (given a superficial reading).\n\n[*]: https://lore.kernel.org/git/CAPig+cSb=zzDJCoo91detBgfAi9p4a3R8sVc6iTXfzpbNxsNrg@mail.gmail.com/\n"}]}