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)

diff --git a/templates/repo/pulls/tab_menu.tmpl b/templates/repo/pulls/tab_menu.tmpl
index c91d09d9e1ab6ec6e752b011a4683c6b6fdd5962..fe1d4e4de02e17f6ab4a16d8a5261d6e5539b9ed 100644 (file)
--- a/templates/repo/pulls/tab_menu.tmpl
+++ b/templates/repo/pulls/tab_menu.tmpl
@@ -1,23 +1,26 @@
-<div class="ui top attached pull tabular stackable menu">
-       <a class="item {{if .PageIsPullConversation}}active{{end}}" href="{{.Issue.Link}}">
-               {{svg "octicon-comment-discussion"}}
-               {{$.locale.Tr "repo.pulls.tab_conversation"}}
-               <span class="ui small label">{{.Issue.NumComments}}</span>
-       </a>
-       <a class="item {{if .PageIsPullCommits}}active{{end}}" {{if .NumCommits}}href="{{.Issue.Link}}/commits"{{end}}>
-               {{svg "octicon-git-commit"}}
-               {{$.locale.Tr "repo.pulls.tab_commits"}}
-               <span class="ui small label">{{if .NumCommits}}{{.NumCommits}}{{else}}-{{end}}</span>
-       </a>
-       <a class="item {{if .PageIsPullFiles}}active{{end}}" href="{{.Issue.Link}}/files">
-               {{svg "octicon-diff"}}
-               {{$.locale.Tr "repo.pulls.tab_files"}}
-               <span class="ui small label">{{if .NumFiles}}{{.NumFiles}}{{else}}-{{end}}</span>
-       </a>
-       <span class="item gt-ml-auto gt-pr-0 gt-font-bold gt-df gt-ac gt-gap-3">
-               <span><span class="text green">{{if .Diff.TotalAddition}}+{{.Diff.TotalAddition}}{{end}}</span> <span class="text red">{{if .Diff.TotalDeletion}}-{{.Diff.TotalDeletion}}{{end}}</span></span>
-               <span class="diff-stats-bar">
-                       <div class="diff-stats-add-bar" style="width: {{Eval 100 "*" .Diff.TotalAddition "/" "(" .Diff.TotalAddition "+" .Diff.TotalDeletion "+" 0.0 ")"}}%"></div>
+<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"}}
+                       <span class="ui small label">{{.Issue.NumComments}}</span>
+               </a>
+               <a class="item {{if .PageIsPullCommits}}active{{end}}" {{if .NumCommits}}href="{{.Issue.Link}}/commits"{{end}}>
+                       {{svg "octicon-git-commit"}}
+                       {{$.locale.Tr "repo.pulls.tab_commits"}}
+                       <span class="ui small label">{{if .NumCommits}}{{.NumCommits}}{{else}}-{{end}}</span>
+               </a>
+               <a class="item {{if .PageIsPullFiles}}active{{end}}" href="{{.Issue.Link}}/files">
+                       {{svg "octicon-diff"}}
+                       {{$.locale.Tr "repo.pulls.tab_files"}}
+                       <span class="ui small label">{{if .NumFiles}}{{.NumFiles}}{{else}}-{{end}}</span>
+               </a>
+               <span class="item gt-ml-auto gt-pr-0 gt-font-bold gt-df gt-ac gt-gap-3">
+                       <span><span class="text green">{{if .Diff.TotalAddition}}+{{.Diff.TotalAddition}}{{end}}</span> <span class="text red">{{if .Diff.TotalDeletion}}-{{.Diff.TotalDeletion}}{{end}}</span></span>
+                       <span class="diff-stats-bar">
+                               <div class="diff-stats-add-bar" style="width: {{Eval 100 "*" .Diff.TotalAddition "/" "(" .Diff.TotalAddition "+" .Diff.TotalDeletion "+" 0.0 ")"}}%"></div>
+                       </span>
                </span>
-       </span>
+       </div>
+       <div class="ui tabs divider"></div>
 </div>

diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index ff539228f56ac9c0086a42a268de6a4a9b08097e..877f0d9c1734e45565aaddc7faf43bfd780729fe 100644 (file)
--- 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 {