diff --git a/templates/repo/pulls/status_items.tmpl b/templates/repo/pulls/status_items.tmpl
index fa2a5f80bf..f3dc1bb23f 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 4b489362af..92b82e9d89 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 16337a9ead..e5c293a4d6 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 {