mi/werkator
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Stack page title and repository name in the mobile header

Browse Source 
On narrow screens the page title and the repository name shared one flex
line and wrapped unreadably. Below 680px the h1 now becomes a grid: the
logo spans both rows on the left, the title takes the first line and the
repository name the second (slightly smaller, wrapping anywhere so long
owner/repo names cannot overflow). The desktop layout is unchanged.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
mhoennig
2026-08-11 06:59:52 +02:00
co-authored by Claude
parent daba7f6acc
commit 3eb41d4c66
2 changed files with 12 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/resources/static/gittally.css
+11 -1
View File
@@ -146,7 +146,17 @@ th.num { font-family: inherit; font-size: 12px; }
/* small screens: stack table rows as cards, like legacy */
@media (max-width: 680px) {
main { margin: 16px auto; }
h1 { font-size: 22px; }
/* title on the first line, repo name below it, logo left of both */
h1 {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 10px;
row-gap: 1px;
font-size: 22px;
}
h1 .title-home { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
h1 .title-text { grid-column: 2; grid-row: 1; align-self: end; }
h1 .repo-name { grid-column: 2; grid-row: 2; align-self: start; font-size: 15px; overflow-wrap: anywhere; }
.view-row { flex-wrap: wrap; }
.view-toggle a, .view-toggle span { min-width: 0; padding: 6px 9px; font-size: 13px; }
/* the live indicator collapses to a colored state dot so it cannot squeeze the menu;