From b4519526403f0df6949673296f327af605cce975 Mon Sep 17 00:00:00 2001
From: Alexander Medvednikov <alexander@medvednikov.com>
Date: Sun, 17 May 2026 09:07:07 +0300
Subject: [PATCH] tree: rearrange repo header layout

Move star/watch buttons into the top-right of the title bar, place the
settings link directly after the Public/Private tag, and group Code and
+ on the right of the branch row so they align with the language bar
edge. Swap + before Code and shrink the branch select max-width from
200px to 150px.
---
 static/css/tree.scss            | 30 ++++++++++-
 templates/layout/repo_menu.html | 11 ++--
 templates/tree.html             | 90 ++++++++++++++++++---------------
 3 files changed, 82 insertions(+), 49 deletions(-)

diff --git a/static/css/tree.scss b/static/css/tree.scss
index c3922cf..822807a 100644
--- a/static/css/tree.scss
+++ b/static/css/tree.scss
@@ -22,7 +22,17 @@
 .repo-settings-link {
 	font-size: 14px;
 	line-height: 1;
-	margin-left: auto;
+}
+
+.repo-header-area {
+	position: relative;
+
+	.repo-actions {
+		position: absolute;
+		top: 11px;
+		right: 0;
+		z-index: 5;
+	}
 }
 
 /* 1. The repo stats panel */
@@ -85,11 +95,23 @@ a.repo-stat-item:hover {
 	gap: 10px;
 }
 
+.repo-wrapper--with-sidebar {
+	padding-right: 184px;
+}
+
 .branch-specific-container {
 	display: flex;
 	align-items: center;
 	gap: 10px;
 	flex-wrap: wrap;
+	width: 100%;
+}
+
+.branch-right-actions {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	margin-left: auto;
 }
 
 .add-file-btn {
@@ -126,7 +148,7 @@ a.repo-stat-item:hover {
 	font-size: 14px;
 	font-weight: 500;
 	line-height: 20px;
-	max-width: 200px;
+	max-width: 150px;
 	padding: 5px 35px 5px 12px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
@@ -504,6 +526,10 @@ a.repo-mode-link:hover {
 	.repo-layout {
 		grid-template-columns: minmax(0, 1fr);
 	}
+
+	.repo-wrapper--with-sidebar {
+		padding-right: 0;
+	}
 }
 
 /* Common style for Star/Watch buttons */
diff --git a/templates/layout/repo_menu.html b/templates/layout/repo_menu.html
index 981dd37..a85ea22 100644
--- a/templates/layout/repo_menu.html
+++ b/templates/layout/repo_menu.html
@@ -18,12 +18,11 @@
 		@else
 			<span class="repo-visibility repo-visibility--private">Private</span>
 		@end
-	@end
-
-	@if repo.user_id == ctx.user.id
-		<a class='repo-settings-link' href="/@repo.user_name/@repo.name/settings">
-			Settings
-		</a>
+		@if repo.user_id == ctx.user.id
+			<a class='repo-settings-link' href="/@repo.user_name/@repo.name/settings">
+				Settings
+			</a>
+		@end
 	@end
 </div>
 
diff --git a/templates/tree.html b/templates/tree.html
index d6425b8..e9c2ecb 100644
--- a/templates/tree.html
+++ b/templates/tree.html
@@ -19,47 +19,8 @@
 		</script>
 
 		<div class="content">
-			@include 'layout/repo_menu.html'
-
-			<div class="repo-wrapper">
-				<span class="branch-specific-container">
-					<select class="branch-select" name="branch">
-						@for name in app.get_all_repo_branch_names(repo.id)
-							<option value="@name">@name</option>
-						@end
-					</select>
-
-					<a class="branches-link" href="/@repo.user_name/@repo.name/branches">
-						<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M384 144c0-44.2-35.8-80-80-80s-80 35.8-80 80c0 36.4 24.3 67.1 57.5 76.8-.6 16.1-4.2 28.5-11 36.9-15.4 19.2-49.3 22.4-85.2 25.7-28.2 2.6-57.4 5.4-81.3 16.9v-144c32.5-10.2 56-40.5 56-76.3 0-44.2-35.8-80-80-80S0 35.8 0 80c0 35.8 23.5 66.1 56 76.3v199.3C23.5 365.9 0 396.2 0 432c0 44.2 35.8 80 80 80s80-35.8 80-80c0-34-21.2-63.1-51.2-74.6 3.1-5.2 7.8-9.8 14.9-13.4 16.2-8.2 40.4-10.4 66.1-12.8 42.2-3.9 90-8.4 118.2-43.4 14-17.4 21.1-39.8 21.6-67.9 31.6-10.8 54.4-40.7 54.4-75.9zM80 64c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16zm0 384c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16zm224-320c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16z"></path></svg>
-						@repo.format_nr_branches(ctx.lang)
-					</a>
-
-					<div class="repo-mode-switch">
-						@if is_top_files_mode
-							<a class="repo-mode-link" href="@tree_url">Tree</a>
-							<span class="repo-mode-link active">Top files</span>
-						@else
-							<span class="repo-mode-link active">Tree</span>
-							<a class="repo-mode-link" href="@top_files_url">Top files</a>
-						@end
-					</div>
-
-					<div class="repo-code-container">
-						<div class="repo-code-button">Code</div>
-
-						<div class="repo-clone-dropdown">
-							Clone with HTTPS:
-							<div class="clone-input-group">
-								<input disabled value="@{app.generate_clone_url(repo)}">
-								<button class="copy-clone-url-button">Copy</button>
-							</div>
-						</div>
-					</div>
-
-					@if repo.user_id == ctx.user.id
-						<a class="add-file-btn" href="/@repo.user_name/@repo.name/new/@branch_name">+</a>
-					@end
-				</span>
+			<div class="repo-header-area">
+				@include 'layout/repo_menu.html'
 
 				@if is_top_directory
 					<div class="repo-actions">
@@ -90,6 +51,53 @@
 				@end
 			</div>
 
+			@if is_top_directory
+				<div class="repo-wrapper repo-wrapper--with-sidebar">
+			@else
+				<div class="repo-wrapper">
+			@end
+				<span class="branch-specific-container">
+					<select class="branch-select" name="branch">
+						@for name in app.get_all_repo_branch_names(repo.id)
+							<option value="@name">@name</option>
+						@end
+					</select>
+
+					<a class="branches-link" href="/@repo.user_name/@repo.name/branches">
+						<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M384 144c0-44.2-35.8-80-80-80s-80 35.8-80 80c0 36.4 24.3 67.1 57.5 76.8-.6 16.1-4.2 28.5-11 36.9-15.4 19.2-49.3 22.4-85.2 25.7-28.2 2.6-57.4 5.4-81.3 16.9v-144c32.5-10.2 56-40.5 56-76.3 0-44.2-35.8-80-80-80S0 35.8 0 80c0 35.8 23.5 66.1 56 76.3v199.3C23.5 365.9 0 396.2 0 432c0 44.2 35.8 80 80 80s80-35.8 80-80c0-34-21.2-63.1-51.2-74.6 3.1-5.2 7.8-9.8 14.9-13.4 16.2-8.2 40.4-10.4 66.1-12.8 42.2-3.9 90-8.4 118.2-43.4 14-17.4 21.1-39.8 21.6-67.9 31.6-10.8 54.4-40.7 54.4-75.9zM80 64c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16zm0 384c-8.8 0-16-7.2-16-16s7.2-16 16-16 16 7.2 16 16-7.2 16-16 16zm224-320c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16z"></path></svg>
+						@repo.format_nr_branches(ctx.lang)
+					</a>
+
+					<div class="repo-mode-switch">
+						@if is_top_files_mode
+							<a class="repo-mode-link" href="@tree_url">Tree</a>
+							<span class="repo-mode-link active">Top files</span>
+						@else
+							<span class="repo-mode-link active">Tree</span>
+							<a class="repo-mode-link" href="@top_files_url">Top files</a>
+						@end
+					</div>
+
+					<div class="branch-right-actions">
+						@if repo.user_id == ctx.user.id
+							<a class="add-file-btn" href="/@repo.user_name/@repo.name/new/@branch_name">+</a>
+						@end
+
+						<div class="repo-code-container">
+							<div class="repo-code-button">Code</div>
+
+							<div class="repo-clone-dropdown">
+								Clone with HTTPS:
+								<div class="clone-input-group">
+									<input disabled value="@{app.generate_clone_url(repo)}">
+									<button class="copy-clone-url-button">Copy</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</span>
+			</div>
+
 			@if is_top_directory
 				<div class="repo-layout">
 					<div class="repo-main">
-- 
2.39.5