gitweb: fix mobile page overflow across log/commit/blob/diff views

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>
Signed-off-by: Junio C Hamano <gitster@pobox.com>

diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css
index 0b63acc0e29e9c65d31e93b17704de146dc40451..135590b64cbe76da5a19b206ee9f1c43df106cea 100644 (file)
--- 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;
+       }
 }