From 1f0541780538d03108fc741399480851759275bd Mon Sep 17 00:00:00 2001
From: Gusted <williamzijl7@hotmail.com>
Date: Sat, 23 Apr 2022 16:56:33 +0000
Subject: Use horizontal tabs for repo header on mobile (#19468)

* 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.

* Fix lint
---
 web_src/less/_repository.less | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

(limited to 'web_src')

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 9a2ae99462..70f8b077de 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 {
@@ -3227,3 +3237,18 @@ td.blob-excerpt {
   transform: scale(105%);
   box-shadow: 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;
+      }
+    }
+  }
+}
-- 
cgit v1.2.3