fix: PR status layout on mobile (#21547)

This PR fixes the layout of PR status layouts on mobile. For longer
status context names or on very small screens the text would overflow
and push the "Details" and "Required" badges out of the container.

Before:

![Screen Shot 2022-10-22 at 12 27
46](https://user-images.githubusercontent.com/13721712/197335454-e4decf09-4778-43e8-be88-9188fabbec23.png)

After:

![Screen Shot 2022-10-22 at 12 53
24](https://user-images.githubusercontent.com/13721712/197335449-2c731a6c-7fd6-4b97-be0e-704a99fd3d32.png)

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
kolaente 2022-10-28 15:49:42 +02:00 committed by GitHub
parent 5f0cbb3e80
commit cd5c067abe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 8 deletions

View file

@ -18,14 +18,16 @@
{{end}}
{{range $.LatestCommitStatuses}}
<div class="ui attached segment">
<span>{{template "repo/commit_status" .}}</span>
<span class="ui">{{.Context}} <span class="text grey">{{.Description}}</span></span>
<div class="ui right">
{{if $.is_context_required}}
{{if (call $.is_context_required .Context)}}<div class="ui label">{{$.locale.Tr "repo.pulls.status_checks_requested"}}</div>{{end}}
{{end}}
<span class="ui">{{if .TargetURL}}<a href="{{.TargetURL}}">{{$.locale.Tr "repo.pulls.status_checks_details"}}</a>{{end}}</span>
<div class="ui attached segment pr-status">
{{template "repo/commit_status" .}}
<div class="status-context">
<span>{{.Context}} <span class="text grey">{{.Description}}</span></span>
<div class="ui status-details">
{{if $.is_context_required}}
{{if (call $.is_context_required .Context)}}<div class="ui label">{{$.locale.Tr "repo.pulls.status_checks_requested"}}</div>{{end}}
{{end}}
<span class="ui">{{if .TargetURL}}<a href="{{.TargetURL}}">{{$.locale.Tr "repo.pulls.status_checks_details"}}</a>{{end}}</span>
</div>
</div>
</div>
{{end}}

View file

@ -3477,3 +3477,41 @@ td.blob-excerpt {
max-width: 165px;
}
}
.pr-status {
padding: 0 !important; // To clear fomantic's padding on .ui.segment elements
display: flex;
align-items: center;
.commit-status {
margin: 1em;
flex-shrink: 0;
}
.status-context {
display: flex;
justify-content: space-between;
width: 100%;
> span {
padding: 1em 0;
}
}
.status-details {
display: flex;
padding-right: .5em;
align-items: center;
justify-content: flex-end;
@media @mediaSm {
flex-direction: column;
align-items: flex-end;
justify-content: center;
}
> span {
padding-right: .5em; // To match the alignment with the "required" label
}
}
}