From c67ccd76907e07d57f9817d26fb6f2dbf792cb92 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 22 Oct 2022 12:58:04 +0200
Subject: [PATCH 1/2] fix: PR status layout on mobile

---
 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 5dee3fccdd4db..1d1bcc14e63c6 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -773,6 +773,44 @@
           padding: 1em 0 1em 3.8em;
         }
       }
+
+      .pr-status {
+        padding: 0;
+        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
+          }
+        }
+      }
     }
 
     .comment-list {

From b54f18bf47f585e50a9ef1bb9f06d0c995558225 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 22 Oct 2022 13:35:51 +0200
Subject: [PATCH 2/2] chore: move pr status classes to less root to avoid
 unnecessary nested css selectors

---
 web_src/less/_repository.less | 76 +++++++++++++++++------------------
 1 file changed, 38 insertions(+), 38 deletions(-)

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 1d1bcc14e63c6..3ffe0e08b1747 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -773,44 +773,6 @@
           padding: 1em 0 1em 3.8em;
         }
       }
-
-      .pr-status {
-        padding: 0;
-        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
-          }
-        }
-      }
     }
 
     .comment-list {
@@ -3506,3 +3468,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
+    }
+  }
+}