From b7b0de100ff4a5ce32ea37ef3000319b68fbe403 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 4 Nov 2026 06:46:22 -0800
Subject: [PATCH] Fix: prevent ID badge wrapping under title on mobile (#14682)

---
 .../page-header/page-header.component.html    | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src-ui/src/app/components/common/page-header/page-header.component.html b/src-ui/src/app/components/common/page-header/page-header.component.html
index cd573a6987..d8f66308ba 100644
--- a/src-ui/src/app/components/common/page-header/page-header.component.html
+++ b/src-ui/src/app/components/common/page-header/page-header.component.html
@@ -1,16 +1,18 @@
 <div class="row pt-3 pb-2 align-items-center">
   <div class="col-md text-truncate">
     <h3 class="d-flex align-items-center mb-2 mb-md-1" style="line-height: 1.4">
-      <span class="text-truncate">{{title()}}</span>
-      @if (id()) {
-        <button type="button" class="badge border-0 bg-primary text-primary-text-contrast ms-3 small fs-normal" (click)="copyID()" title="Copy ID" i18n-title>
-          @if (copied()) {
-            <pngx-bs-icon width="1em" height="1em" name="clipboard-check" class="me-1"></pngx-bs-icon><ng-container i18n>Copied!</ng-container>
-          } @else {
-            ID: {{id()}}
-          }
-        </button>
-      }
+      <span class="d-flex align-items-center mw-100">
+        <span class="text-truncate">{{title()}}</span>
+        @if (id()) {
+          <button type="button" class="badge border-0 bg-primary text-primary-text-contrast ms-3 small fs-normal flex-shrink-0 text-nowrap" (click)="copyID()" title="Copy ID" i18n-title>
+            @if (copied()) {
+              <pngx-bs-icon width="1em" height="1em" name="clipboard-check" class="me-1"></pngx-bs-icon><ng-container i18n>Copied!</ng-container>
+            } @else {
+              ID: {{id()}}
+            }
+          </button>
+        }
+      </span>
       @if (subTitle()) {
         <span class="page-subtitle h6 mb-0 mt-1 fw-normal ms-md-3 text-truncate" style="line-height: 1.4">{{subTitle()}}</span>
       }