From ecdcda6d2fadc2e26eb1325ae280f8bc3dce51f6 Mon Sep 17 00:00:00 2001 From: Bryce Kwon Date: Sun, 1 Nov 2026 21:16:11 -1000 Subject: Wrap long names on phones A ref label, email address or path longer than a phone screen pushed main.content sideways by up to 340px. In the log and summary the label also widened the shared table until the age column left the screen. Below 640px a label becomes an inline-block capped at its cell, so it still moves to the next line whole and breaks inside only when it is wider than the cell. line-height: normal keeps the box the height of the inline label it replaces. That holds exactly in Chromium and Firefox, while WebKit's box grows by a third of a pixel at each edge. Commit details and diffstat paths break at the cell edge, as listing cells already do. --- assets/cgit.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/assets/cgit.css b/assets/cgit.css index 816f763..57658c8 100644 --- a/assets/cgit.css +++ b/assets/cgit.css @@ -1375,6 +1375,18 @@ div#cgit form.login input[type="password"] { white-space: normal; } + div#cgit a.branch-deco, + div#cgit a.tag-deco, + div#cgit a.tag-annotated-deco, + div#cgit a.remote-deco, + div#cgit a.deco { + display: inline-block; + max-width: 100%; + line-height: normal; + white-space: normal; + overflow-wrap: anywhere; + } + div#cgit table.list td { overflow-wrap: anywhere; } @@ -1400,6 +1412,13 @@ div#cgit form.login input[type="password"] { float: none; margin-left: 0; } + + div#cgit table.commit-info td, + div#cgit table.diffstat td.add, + div#cgit table.diffstat td.del, + div#cgit table.diffstat td.upd { + overflow-wrap: anywhere; + } } @media (forced-colors: active) { -- cgit 2.12.1