From cd5c067abe6b3d33a35ec6904abc91a0b18edfd9 Mon Sep 17 00:00:00 2001 From: kolaente Date: Fri, 28 Oct 2022 15:49:42 +0200 Subject: [PATCH] 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 --- templates/repo/pulls/status.tmpl | 18 ++++++++------- web_src/less/_repository.less | 38 ++++++++++++++++++++++++++++++++ 2 files changed, 48 insertions(+), 8 deletions(-) diff --git a/templates/repo/pulls/status.tmpl b/templates/repo/pulls/status.tmpl index b68802cd5..ca090ee84 100644 --- a/templates/repo/pulls/status.tmpl +++ b/templates/repo/pulls/status.tmpl @@ -18,14 +18,16 @@ {{end}} {{range $.LatestCommitStatuses}} -
- {{template "repo/commit_status" .}} - {{.Context}} {{.Description}} -
- {{if $.is_context_required}} - {{if (call $.is_context_required .Context)}}
{{$.locale.Tr "repo.pulls.status_checks_requested"}}
{{end}} - {{end}} - {{if .TargetURL}}{{$.locale.Tr "repo.pulls.status_checks_details"}}{{end}} +
+ {{template "repo/commit_status" .}} +
+ {{.Context}} {{.Description}} +
+ {{if $.is_context_required}} + {{if (call $.is_context_required .Context)}}
{{$.locale.Tr "repo.pulls.status_checks_requested"}}
{{end}} + {{end}} + {{if .TargetURL}}{{$.locale.Tr "repo.pulls.status_checks_details"}}{{end}} +
{{end}} diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 039c47130..193a73c70 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -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 + } + } +}