From 3eb41d4c66119fc0e948267243a25c4f0f2d6314 Mon Sep 17 00:00:00 2001
From: mhoennig <michael@hoennig.de>
Date: Tue, 11 Aug 2026 06:59:52 +0200
Subject: [PATCH] Stack page title and repository name in the mobile header

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>
---
 src/main/resources/static/gittally.css      | 12 +++++++++++-
 src/main/resources/templates/fragments.html |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/main/resources/static/gittally.css b/src/main/resources/static/gittally.css
index 89e777a..d727455 100644
--- a/src/main/resources/static/gittally.css
+++ b/src/main/resources/static/gittally.css
@@ -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;
diff --git a/src/main/resources/templates/fragments.html b/src/main/resources/templates/fragments.html
index 8339644..ab8407c 100644
--- a/src/main/resources/templates/fragments.html
+++ b/src/main/resources/templates/fragments.html
@@ -13,7 +13,7 @@
 
 <h1 th:fragment="header(title)">
     <a class="title-home" href="/" aria-label="Open latest builds"><img src="/favicon.svg" alt=""></a>
-    <span th:text="${title}">Latest Builds</span>
+    <span class="title-text" th:text="${title}">Latest Builds</span>
     <span class="repo-name" th:unless="${#strings.isEmpty(repoName)}" th:text="${repoName}">owner/repo</span>
 </h1>