Fix new issue/pull request btn margin when it is next to sort (#23647)

Close #23627 

Added margin left to the button when it is next to the svg, which has a
margin-right of `-0.5rem`

And here it might be better if `white-space: nowrap;` is added because
otherwise it might look like below on pull requests page on smaller
screen

<img width="945" alt="截屏2023-03-23 09 57 41"
src="https://user-images.githubusercontent.com/17645053/227079613-71c696ab-55ec-4641-acb9-622a8baebb31.png">

After:
<img width="936" alt="截屏2023-03-23 10 08 27"
src="https://user-images.githubusercontent.com/17645053/227080971-6bf2588e-40dd-4770-b0d1-45d7c63e0f48.png">

Pull Request on smaller screen
<img width="922" alt="截屏2023-03-23 10 25 16"
src="https://user-images.githubusercontent.com/17645053/227084144-0c2ed3e6-5c11-4252-bba2-b5f971b70f4a.png">
This commit is contained in:
Hester Gong 2023-03-24 02:07:04 +08:00 committed by GitHub
parent 95818adb71
commit 9cefb7be73
Signed by: GitHub
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 3 deletions

@ -88,7 +88,7 @@
<div class="column right aligned gt-df gt-ac gt-je">
<!-- Sort -->
<div class="ui dropdown type jump item">
<span class="text">
<span class="text gt-whitespace-nowrap">
{{.locale.Tr "repo.issues.filter_sort"}}
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</span>
@ -105,9 +105,9 @@
</div>
{{if .SingleRepoLink}}
{{if eq .SingleRepoAction "issue"}}
<a class="ui green button" href="{{.SingleRepoLink}}/issues/new/choose">{{.locale.Tr "repo.issues.new"}}</a>
<a class="ui green button gt-ml-4" href="{{.SingleRepoLink}}/issues/new/choose">{{.locale.Tr "repo.issues.new"}}</a>
{{else if eq .SingleRepoAction "pull"}}
<a class="ui green button" href="{{.SingleRepoLink}}/compare">{{.locale.Tr "repo.pulls.new"}}</a>
<a class="ui green button gt-ml-4" href="{{.SingleRepoLink}}/compare">{{.locale.Tr "repo.pulls.new"}}</a>
{{end}}
{{end}}
</div>

@ -197,6 +197,8 @@
.gt-content-center { align-content: center !important; }
.gt-whitespace-nowrap { white-space: nowrap !important; }
@media (max-width: 767px) {
.gt-db-small { display: block !important; }
.gt-w-100-small { width: 100% !important; }