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/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>