From 2b77a27c9916de8a2866a566e5eea26f788612a9 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 28 Oct 2022 15:49:42 +0200
Subject: [PATCH] fix: PR status layout on mobile (#21547)

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: Lunny Xiao <xiaolunwen@gmail.com>
---
 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 b68802cd56ff9..ca090ee843e4f 100644
--- 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 c57bfea4347ca..3b828b2a8279e 100644
--- 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
+    }
+  }
+}