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)
pull/25819/head^2
sebastian-sauer 1 year ago committed by GitHub
parent e53390d88f
commit b81c013057
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 5
      templates/repo/pulls/tab_menu.tmpl
  2. 9
      web_src/css/repo.css

@ -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}}"> <a class="item {{if .PageIsPullConversation}}active{{end}}" href="{{.Issue.Link}}">
{{svg "octicon-comment-discussion"}} {{svg "octicon-comment-discussion"}}
{{$.locale.Tr "repo.pulls.tab_conversation"}} {{$.locale.Tr "repo.pulls.tab_conversation"}}
@ -21,3 +22,5 @@
</span> </span>
</span> </span>
</div> </div>
<div class="ui tabs divider"></div>
</div>

@ -747,8 +747,15 @@
right: 1px; right: 1px;
} }
.repository.view.issue .pull.tabs.container {
width: 100%;
max-width: 100%;
}
.repository.view.issue .pull.tabular.menu { .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 { .repository.view.issue .pull.tabular.menu .svg {

Loading…
Cancel
Save