From aab9737651ce3d2ab61bf8559133dbe154f86cea Mon Sep 17 00:00:00 2001
From: bircni <bircni@icloud.com>
Date: Sat, 13 Jun 2026 12:14:02 +0200
Subject: [PATCH] fix(ui): prevent commit status popup overflowing its row
 (#38081)

Fixes #38079

## Regression path

The layout previously had `.commit-status-item .status-context { flex: 1
}`,
which let the context fill remaining space and ellipsize. That rule was
dropped in #37517 ("Refactor pull request view (5)") when the row markup
moved to nested `.flex-text-block` wrappers, so nothing constrained the
left block anymore.

After:
<img width="832" height="242" alt="image"
src="https://github.com/user-attachments/assets/a20019f8-6016-40f7-8901-2808280dc093"
/>

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
---
 templates/repo/pulls/status_items.tmpl | 8 ++++----
 web_src/css/base.css                   | 5 ++++-
 web_src/css/repo.css                   | 4 ++--
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/templates/repo/pulls/status_items.tmpl b/templates/repo/pulls/status_items.tmpl
index fa2a5f80bf7..f3dc1bb23f9 100644
--- a/templates/repo/pulls/status_items.tmpl
+++ b/templates/repo/pulls/status_items.tmpl
@@ -6,14 +6,14 @@
 {{$commitActionsStatuses :=  ctx.ActionsUtils.CommitStatusesToActionsStatuses $.CommitStatuses}}
 {{range $cs := $.CommitStatuses}}
 	<div class="item commit-status-item">
-		<div class="flex-text-block">
+		<div class="flex-text-block tw-flex-1">
 			{{$actionStatus := $commitActionsStatuses.IconStatus $cs}}
 			{{if $actionStatus}}
 				{{template "repo/icons/action_status" (dict "Status" $actionStatus "Size" 18 "ClassName" "commit-status icon")}}
 			{{else}}
 				{{template "repo/icons/commit_status" $cs}}
 			{{end}}
-			<div class="status-context gt-ellipsis">
+			<div class="gt-ellipsis">
 				{{$cs.Context}} <span class="tw-text-text-light-2">{{$cs.Description}}</span>
 			</div>
 		</div>
@@ -29,9 +29,9 @@
 {{end}}
 {{range $missingCheck := $statusCheckData.MissingRequiredChecks}}
 	<div class="item commit-status-item">
-		<div class="flex-text-block">
+		<div class="flex-text-block tw-flex-1">
 			{{svg "octicon-dot-fill" 16 "commit-status icon tw-text-yellow"}}
-			<div class="status-context gt-ellipsis">{{$missingCheck}}</div>
+			<div class="gt-ellipsis">{{$missingCheck}}</div>
 		</div>
 		<div class="ui label">{{ctx.Locale.Tr "repo.pulls.status_checks_requested"}}</div>
 	</div>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index 4b489362afb..92b82e9d89a 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -840,7 +840,8 @@ table th[data-sortt-desc] .svg {
   align-items: center;
   gap: var(--gap-inline);
   vertical-align: middle;
-  min-width: 0; /* make ellipsis work */
+  max-width: 100%; /* the inner part might have "gt-ellipsis" */
+  min-width: 0; /* if it is the top flex container, "max-width" works; but if it is inside another flex container, the parent needs to handle the x-axis and here also needs "min-width" */
 }
 
 .ui.ui.labeled.button {
@@ -856,6 +857,7 @@ table th[data-sortt-desc] .svg {
   justify-content: space-between;
   align-items: center;
   gap: var(--gap-block);
+  max-width: 100%;
   min-width: 0;
 }
 
@@ -868,6 +870,7 @@ table th[data-sortt-desc] .svg {
   align-items: center;
   gap: var(--gap-block);
   max-width: 100%;
+  min-width: 0;
 }
 
 .flex-left-right > .ui.button,
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 16337a9eadb..e5c293a4d69 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -1863,11 +1863,11 @@ tbody.commit-list {
 }
 
 .username-display {
-  max-width: 100%; /* the inner part might have "gt-ellipsis" */
-  min-width: 0; /* if it is the top flex container, "max-width" works; but if it is inside another flex container, the parent needs to handle the x-axis and here also needs "min-width" */
   display: inline-flex;
   gap: var(--gap-inline);
   align-items: center;
+  max-width: 100%; /* min/max widths are for "gt-ellipsis", see the comment of other "flex-xxx" family classes */
+  min-width: 0;
 }
 
 .username-display > .username-fullname {