From 7e7683d3a2dd495104aa84ff6361ab99de3f9ba4 Mon Sep 17 00:00:00 2001
From: Gusted <williamzijl7@hotmail.com>
Date: Fri, 22 Apr 2022 23:09:18 +0200
Subject: [PATCH 1/2] Use horizontal tabs for repo header on mobile

- The current behavior of the repo header on mobile is to display them
vertically column-by-column. I've only experience annoyance due to this
while trying to visit gitea instanced on mobile. This commit changes
this behavior to use horizontal tabs, it uses less tabs and doesn't
bloat 60% of your mobile screen with the repo headers.
- A small fix added in this commit is to give some space around the repo
buttons, current behavior is that they are too "close" to the repo
title.
---
 templates/repo/header.tmpl    |  2 +-
 web_src/less/_repository.less | 27 ++++++++++++++++++++++++++-
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index 83ad79e12d59b..198b05b4ba561 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -144,7 +144,7 @@
 		</div><!-- end grid -->
 	</div><!-- end container -->
 {{end}}
-	<div class="ui tabs container">
+	<div class="ui tabs container repo-header-container">
 		{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
 			<div class="ui tabular stackable menu navbar">
 				{{if .Permission.CanRead $.UnitTypeCode}}
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 9a2ae994625e9..68877eeea44b5 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -2956,11 +2956,21 @@ tbody.commit-list {
   justify-content: space-between;
   flex-wrap: wrap;
   word-break: break-word;
+
+  @media @mediaSm {
+    + .container {
+      margin-top: 7px;
+    }
+  }
 }
 
 .repo-buttons {
   display: flex;
   align-items: center;
+
+  @media @mediaSm {
+    margin-top: 1em;
+  }
 }
 
 .repo-buttons .ui.labeled.button > .label:hover {
@@ -3225,5 +3235,20 @@ td.blob-excerpt {
 
 .repository.migrate .card:hover {
   transform: scale(105%);
-  box-shadow: 0 .5rem 1rem var(--color-shadow) !important;
+  box-shadow: 0 0.5rem 1rem var(--color-shadow) !important;
+}
+
+@media @mediaSm {
+  .repo-header-container {
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    .ui.stackable.menu {
+      flex-direction: row;
+
+      .item {
+        width: initial !important;
+      }
+    }
+  }
 }

From cd07d90c9708dcad3c1fc0b138f15cd3f7e03279 Mon Sep 17 00:00:00 2001
From: Gusted <williamzijl7@hotmail.com>
Date: Fri, 22 Apr 2022 23:21:09 +0200
Subject: [PATCH 2/2] Fix lint

---
 web_src/less/_repository.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 68877eeea44b5..70f8b077ded85 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -3235,7 +3235,7 @@ td.blob-excerpt {
 
 .repository.migrate .card:hover {
   transform: scale(105%);
-  box-shadow: 0 0.5rem 1rem var(--color-shadow) !important;
+  box-shadow: 0 .5rem 1rem var(--color-shadow) !important;
 }
 
 @media @mediaSm {