From 90053ce27930f36e6272ac6dd411b0a4ae639e5e Mon Sep 17 00:00:00 2001
From: sebastian-sauer <sauer.sebastian@gmail.com>
Date: Fri, 14 Jul 2023 03:54:20 +0200
Subject: [PATCH] Don't stack PR tab menu on small screens (#25789)

the stacking takes up screen space - display the tabs as the navigation
bar. github uses the same layout.

Screenshots (left before, right after):

![image](https://github.com/go-gitea/gitea/assets/1135157/d7e2aaec-c67b-403d-8d56-d4c824b04eed)
![image](https://github.com/go-gitea/gitea/assets/1135157/9e150881-c265-4074-afd7-407bb52e1934)

Large screen:

![image](https://github.com/go-gitea/gitea/assets/1135157/d5cbdaa3-2962-4c4f-9595-5938981ff99e)

(cherry picked from commit b81c01305714ceca818ccb91d19dada6469e658c)
---
 templates/repo/pulls/tab_menu.tmpl | 5 ++++-
 web_src/css/repo.css               | 9 ++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/templates/repo/pulls/tab_menu.tmpl b/templates/repo/pulls/tab_menu.tmpl
index b55b3b0040..ef6bc4e082 100644
--- a/templates/repo/pulls/tab_menu.tmpl
+++ b/templates/repo/pulls/tab_menu.tmpl
@@ -1,4 +1,5 @@
-<div class="ui top attached pull tabular stackable menu">
+<div class="ui pull tabs container">
+	<div class="ui top attached pull tabular menu">
 	<a class="item {{if .PageIsPullConversation}}active{{end}}" href="{{.Issue.Link}}">
 		{{svg "octicon-comment-discussion"}}
 		{{$.locale.Tr "repo.pulls.tab_conversation"}}
@@ -15,3 +16,5 @@
 		<span class="ui small label">{{if .NumFiles}}{{.NumFiles}}{{else}}-{{end}}</span>
 	</a>
 </div>
+<div class="ui tabs divider"></div>
+</div>
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 676d748184..b5a14e8f72 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -747,8 +747,15 @@
   right: 1px;
 }
 
+.repository.view.issue .pull.tabs.container {
+  width: 100%;
+  max-width: 100%;
+}
+
 .repository.view.issue .pull.tabular.menu {
-  margin-bottom: 1rem;
+  margin-bottom: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 
 .repository.view.issue .pull.tabular.menu .svg {