fix: PR status layout on mobile (#21547) (#22441)

Backport #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: kolaente <k@knt.li>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

diff --git a/templates/repo/pulls/status.tmpl b/templates/repo/pulls/status.tmpl
index b68802cd56ff9312d751b6660e1b1a93fd3e54b7..ca090ee843e4f9dab8b71711645bb7603c81017d 100644 (file)
--- a/templates/repo/pulls/status.tmpl
+++ b/templates/repo/pulls/status.tmpl
@@ -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}}

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index c57bfea4347caf579ff2c187c444fe998a30da41..3b828b2a8279e530fe6ef52b4dafeafdfd0dd597 100644 (file)
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -3494,3 +3494,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
+    }
+  }
+}