From b5677daf55b3878d3a642bfb91a9a330e4765f1f Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 23 Apr 2024 22:38:23 +0200
Subject: [PATCH 1/3] Repo button row tweaks

---
 templates/repo/clone_buttons.tmpl |  2 +-
 templates/repo/home.tmpl          | 12 ++++-----
 web_src/css/modules/input.css     |  4 +--
 web_src/css/repo.css              | 41 +++++++++++++++++++++++--------
 4 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/templates/repo/clone_buttons.tmpl b/templates/repo/clone_buttons.tmpl
index 89daba9dc9827..91952c8a06db2 100644
--- a/templates/repo/clone_buttons.tmpl
+++ b/templates/repo/clone_buttons.tmpl
@@ -9,7 +9,7 @@
 		SSH
 	</button>
 {{end}}
-<input id="repo-clone-url" size="20" class="js-clone-url" value="{{$.CloneButtonOriginLink.HTTPS}}" readonly>
+<input id="repo-clone-url" size="10" class="js-clone-url" value="{{$.CloneButtonOriginLink.HTTPS}}" readonly>
 <button class="ui small icon button" id="clipboard-btn" data-tooltip-content="{{ctx.Locale.Tr "copy_url"}}" data-clipboard-target="#repo-clone-url" aria-label="{{ctx.Locale.Tr "copy_url"}}">
 	{{svg "octicon-copy" 14}}
 </button>
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 7b37ac10118db..489f39695da4a 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -46,7 +46,7 @@
 		{{$l := Eval $n "-" 1}}
 		{{$isHomepage := (eq $n 0)}}
 		<div class="repo-button-row">
-			<div class="tw-flex tw-items-center tw-flex-wrap tw-gap-y-2">
+			<div class="repo-button-row-left tw-flex tw-flex-1 tw-items-center tw-gap-2">
 				{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "tw-mr-1"}}
 				{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
 					{{$cmpBranch := ""}}
@@ -66,7 +66,7 @@
 				{{end}}
 
 				{{if and .CanWriteCode .IsViewBranch (not .Repository.IsMirror) (not .Repository.IsArchived) (not .IsViewFile)}}
-					<button class="ui dropdown basic compact jump button tw-mr-1"{{if not .Repository.CanEnableEditor}} disabled{{end}}>
+					<button class="ui dropdown basic compact jump button"{{if not .Repository.CanEnableEditor}} disabled{{end}}>
 						{{ctx.Locale.Tr "repo.editor.add_file"}}
 						{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 						<div class="menu">
@@ -104,14 +104,14 @@
 					</span>
 				{{end}}
 
-				<form class="ignore-dirty" action="{{.RepoLink}}/search" method="get">
-					<div class="ui small action input">
-						<input name="q" value="{{.Keyword}}" placeholder="{{ctx.Locale.Tr "search.code_kind"}}">
+				<form class="tw-flex tw-flex-1" class="ignore-dirty" action="{{.RepoLink}}/search" method="get">
+					<div class="ui small action input tw-flex-1">
+						<input name="q" value="{{.Keyword}}" size="10" placeholder="{{ctx.Locale.Tr "search.code_kind"}}">
 						{{template "shared/search/button"}}
 					</div>
 				</form>
 			</div>
-			<div class="tw-flex tw-items-center">
+			<div class="repo-button-row-right tw-flex tw-flex-1 tw-items-center">
 				<!-- Only show clone panel in repository home page -->
 				{{if $isHomepage}}
 					<div class="clone-panel ui action tiny input">
diff --git a/web_src/css/modules/input.css b/web_src/css/modules/input.css
index 18b785ac8246c..d39377b4e1f7b 100644
--- a/web_src/css/modules/input.css
+++ b/web_src/css/modules/input.css
@@ -188,8 +188,8 @@
 .ui.action.input:not([class*="left action"]) > input:focus + .ui.dropdown.selection:hover,
 .ui.action.input:not([class*="left action"]) > input:focus + .button,
 .ui.action.input:not([class*="left action"]) > input:focus + .button:hover,
-.ui.action.input:not([class*="left action"]) > input:focus + .icon + .button,
-.ui.action.input:not([class*="left action"]) > input:focus + .icon + .button:hover {
+.ui.action.input:not([class*="left action"]) > input:focus + i.icon + .button,
+.ui.action.input:not([class*="left action"]) > input:focus + i.icon + .button:hover {
   border-left-color: var(--color-primary);
 }
 .ui.action.input:not([class*="left action"]) > input:focus {
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 62a72abaf968d..e1baaf76c4e1f 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -128,15 +128,22 @@
   margin-bottom: 12px;
 }
 
-.repository .clone-panel #repo-clone-url {
-  width: 320px;
-  border-radius: 0;
+.repository .clone-panel {
+  display: flex;
+  flex: 1;
 }
 
-@media (max-width: 991.98px) {
-  .repository .clone-panel #repo-clone-url {
-    width: 200px;
-  }
+.repository.wiki .clone-panel {
+  flex: 0;
+}
+
+.repository.wiki .clone-panel input {
+  width: 20ch;
+}
+
+.repository .clone-panel #repo-clone-url {
+  border-radius: 0;
+  flex: 1;
 }
 
 .repository .ui.action.input.clone-panel > button + button,
@@ -2234,17 +2241,25 @@ td .commit-summary {
 }
 
 .repo-button-row {
-  margin: 10px 0;
+  margin: 8px 0;
   display: flex;
   align-items: center;
-  gap: 0.5em;
-  flex-wrap: wrap;
+  gap: 8px;
   justify-content: space-between;
 }
 
+@media (max-width: 991px) {
+  .repository:not(.wiki) .repo-button-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+
 .repo-button-row .button {
   padding: 6px 10px !important;
   height: 30px;
+  flex-shrink: 0;
+  margin: 0;
 }
 
 .repo-button-row .button.dropdown:not(.icon) {
@@ -2255,6 +2270,12 @@ td .commit-summary {
   height: 30px;
 }
 
+@media (max-width: 600px) {
+  .repo-button-row-left {
+    flex-wrap: wrap;
+  }
+}
+
 tbody.commit-list {
   vertical-align: baseline;
 }

From 6760c5b34761b95a8ac48dd47276a4049763cff6 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 23 Apr 2024 22:44:42 +0200
Subject: [PATCH 2/3] fix lint

---
 templates/repo/home.tmpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 489f39695da4a..b33b4bbb20c5f 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -104,7 +104,7 @@
 					</span>
 				{{end}}
 
-				<form class="tw-flex tw-flex-1" class="ignore-dirty" action="{{.RepoLink}}/search" method="get">
+				<form class="ignore-dirty tw-flex tw-flex-1" action="{{.RepoLink}}/search" method="get">
 					<div class="ui small action input tw-flex-1">
 						<input name="q" value="{{.Keyword}}" size="10" placeholder="{{ctx.Locale.Tr "search.code_kind"}}">
 						{{template "shared/search/button"}}

From c1f213daca2eb2ec8776f3cb8418dc3e21310bcb Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 30 Apr 2024 16:35:57 +0200
Subject: [PATCH 3/3] move styles to css and fix alignment

---
 templates/repo/home.tmpl |  4 ++--
 web_src/css/repo.css     | 12 ++++++++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 516ff2b04d864..6df9f7d72a952 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -46,7 +46,7 @@
 		{{$l := Eval $n "-" 1}}
 		{{$isHomepage := (eq $n 0)}}
 		<div class="repo-button-row">
-			<div class="repo-button-row-left tw-flex tw-flex-1 tw-items-center tw-gap-2">
+			<div class="repo-button-row-left">
 				{{template "repo/branch_dropdown" dict "root" . "ContainerClasses" "tw-mr-1"}}
 				{{if and .CanCompareOrPull .IsViewBranch (not .Repository.IsArchived)}}
 					{{$cmpBranch := ""}}
@@ -113,7 +113,7 @@
 					</span>
 				{{end}}
 			</div>
-			<div class="repo-button-row-right tw-flex tw-flex-1 tw-items-center">
+			<div class="repo-button-row-right">
 				<!-- Only show clone panel in repository home page -->
 				{{if $isHomepage}}
 					<div class="clone-panel ui action tiny input">
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 143cd6112c5e5..f19b35907b31e 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2249,6 +2249,18 @@ td .commit-summary {
   justify-content: space-between;
 }
 
+.repo-button-row-left,
+.repo-button-row-right {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.repo-button-row-right {
+  justify-content: flex-end;
+}
+
 @media (max-width: 991px) {
   .repository:not(.wiki) .repo-button-row {
     flex-direction: column;