Diff options
| author | Bryce Kwon <bryce@brycekwon.com> | |
|---|---|---|
| committer | Bryce Kwon <bryce@brycekwon.com> | |
| commit | ||
| parent | ||
| tree | ||
| download | ||
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.
| -rw-r--r-- | assets/cgit.css | 19 |
1 file changed, 19 insertions, 0 deletions
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) { |