From 5c46a55ba69406efe441af48b40bdedf56345c79 Mon Sep 17 00:00:00 2001
From: Alexander Leonhardt <equinox.salexander@gmail.com>
Date: Sun, 16 Aug 2026 13:34:13 +0200
Subject: fix: Updated the structure in the header to resemble the original
 design, updated css to adapt to mobile phones

---
 cgit.css    | 60 +++++++++++++++++++++++++++++++++++++++++++++++++-----------
 ui-shared.c | 37 +++++++++++++++++--------------------
 2 files changed, 66 insertions(+), 31 deletions(-)

diff --git a/cgit.css b/cgit.css
index 1db3571..3996db4 100644
--- a/cgit.css
+++ b/cgit.css
@@ -42,20 +42,56 @@ div#cgit table#header td.logo {
 }
 
 div#cgit table#header td.main {
+	display: inline-flex;
+	justify-content: center;
 	font-size: 200%;
-	padding-left: 10px;
+	padding-left: 1rem;
+	padding-right: 1rem;
 	white-space: nowrap;
 	color: #777;
-	width: 1rem;
 }
 
+
+div#cgit table#header tr:nth-child(2) {
+	border-top: solid 1px #777;
+}
+
+div#cgit table#header tr {
+  display: flex;
+}
+@media(width <= 40rem) {
+div#cgit table#header tr {
+  justify-content: center;
+}
+div#cgit table#header tr:nth-child(2) {
+	flex-direction: column-reverse;
+}
+div#cgit table#header tr {
+	flex-direction: column;
+}
+div#cgit table#header tbody td.form {
+	padding-top: 0.1rem;
+}
+}
+@media(width > 40rem) {
+div#cgit table#header tr {
+  justify-content: space-between;
+}
+}
+
+
 div#cgit table#header td.main span#root-title {
 	color: #eee;
 	font-variant: small-caps;
+	min-width: 15rem;
+	font-family: serif;
 }
 
 div#cgit table#header td.main span.separator {
 	font-size: 2rem;
+	padding-left: 0.4em;
+	padding-right: 0.4em;
+	line-height: 1.1em;
 	color: #999;
 }
 
@@ -64,28 +100,30 @@ div#cgit table#header td.main a {
 }
 
 div#cgit table#header td.form {
-	padding-top: 1em;
+	display: inline-flex;
+	justify-content: center;
+	padding: 0.8rem 1rem 0.2rem 1rem;
 	vertical-align: bottom;
-	padding-right: 1em;
-	padding-bottom: 0.2rem;
 	white-space: nowrap;
 	text-align: right;
 }
 
 
 div#cgit table#header td.subem {
+	display: inline-flex;
 	color: #777;
-	padding-top: 1em;
-	padding-right: 10px;
+	padding-right: 1em;
+	padding-left: 1em;
+	justify-content: center;
 	font-size: 80%;
-	text-align: right;
 }
 div#cgit table#header td.sub {
+	display: inline-flex;
+	justify-content: center;
 	color: #777;
-	border-top: solid 1px #777;
-	padding-left: 10px;
+	padding-left: 1em;
+	padding-right: 1em;
 	white-space: wrap;
-	width: 1rem;
 }
 
 div#cgit table.tabs::-webkit-scrollbar {
diff --git a/ui-shared.c b/ui-shared.c
index 9a33806..d8d5d76 100644
--- a/ui-shared.c
+++ b/ui-shared.c
@@ -1022,17 +1022,30 @@ static void print_header(void)
 		cgit_index_link("index", NULL, NULL, NULL, NULL, 0, 1);
 		html("<span class=\"separator\"> ❧ </span>");
 		cgit_summary_link(ctx.repo->name, NULL, NULL, NULL);
+		if (ctx.env.authenticated) {
+			html("</td><td class='form'>");
+			html("<form method='get'>\n");
+			cgit_add_hidden_formfields(0, 1, ctx.qry.page);
+			html("<select name='h' onchange='this.form.submit();'>\n");
+			refs_for_each_branch_ref(get_main_ref_store(the_repository),
+						 print_branch_option, ctx.qry.head);
+			if (ctx.repo->enable_remote_branches)
+				refs_for_each_remote_ref(get_main_ref_store(the_repository),
+							 print_branch_option, ctx.qry.head);
+			html("</select> ");
+			html("<input type='submit' value='switch'/>");
+			html("</form>");
+		}
 	} else {
 		html("<span id='root-title'>");
 		html_txt(ctx.cfg.root_title);
 		html("</span>");
 	}
-	html("</td></tr>\n");
 
-	html("<tr><td colspan='2' class='sub'>");
+	html("</td></tr><tr><td class='sub'>");
 	if (ctx.repo) {
 		html_txt(ctx.repo->desc);
-		html("</td></tr><tr><td colspan='2' class='subem'>");
+		html("</td><td class='subem'>");
 		if (ctx.repo->owner_filter) {
 			cgit_open_filter(ctx.repo->owner_filter);
 			html_txt(ctx.repo->owner);
@@ -1040,28 +1053,12 @@ static void print_header(void)
 		} else {
 			html_txt(ctx.repo->owner);
 		}
-		html("</td></tr><tr>");
-		if (ctx.env.authenticated) {
-			html("<td></td><td class='form'>");
-			html("<form method='get'>\n");
-			cgit_add_hidden_formfields(0, 1, ctx.qry.page);
-			html("<select name='h' onchange='this.form.submit();'>\n");
-			refs_for_each_branch_ref(get_main_ref_store(the_repository),
-						 print_branch_option, ctx.qry.head);
-			if (ctx.repo->enable_remote_branches)
-				refs_for_each_remote_ref(get_main_ref_store(the_repository),
-							 print_branch_option, ctx.qry.head);
-			html("</select> ");
-			html("<input type='submit' value='switch'/>");
-			html("</form>");
-		}
-		html("</td>");
 
 	} else {
 		if (ctx.cfg.root_desc)
 			html_txt(ctx.cfg.root_desc);
 	}
-	html("</tr></table>\n");
+	html("</td></tr></table>\n");
 }
 
 void cgit_print_pageheader(void)
-- 
cgit