From cd5c067abe6b3d33a35ec6904abc91a0b18edfd9 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)

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 039c471309ff6..193a73c706e93 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
+    }
+  }
+}