Prevent state badge from drifting away from short resource names (#17645)

* Prevent state badge from drifting away from short resource names

Stop .resource-name from growing to fill available space so the
BadgeState indicator stays adjacent to the title text.

Fixes #17479

* Add E2E test for state badge positioning on resource detail pages

Verifies the state badge stays adjacent to the resource name for both
short and long ConfigMap names by comparing bounding rects.

Fixes #17479

Author: codyrancher

cypress/e2e/tests/pages/explorer2/storage/configmap-detail-title-bar.spec.ts

@@ -0,0 +1,53 @@
+import { ConfigMapCreateEditPagePo } from '@/cypress/e2e/po/pages/explorer/config-map.po';
+
+const localCluster = 'local';
+const namespace = 'default';
+const shortName = `a`;
+const longName = `e2e-test-long-configmap-name-that-should-truncate-with-ellipsis`;
+
+describe('ConfigMap Detail Title Bar', { testIsolation: 'off', tags: ['@explorer2', '@adminUser'] }, () => {
+  before(() => {
+    cy.login();
+    cy.createConfigMap(namespace, shortName);
+    cy.createConfigMap(namespace, longName);
+  });
+
+  it('should keep the state badge adjacent to a short resource name', () => {
+    const detailPage = new ConfigMapCreateEditPagePo(localCluster, namespace, shortName);
+
+    detailPage.goTo();
+    detailPage.waitForPage();
+
+    cy.get('.title-bar h1.title .resource-name').then(($name) => {
+      cy.get('.title-bar h1.title .badge-state').then(($badge) => {
+        const nameRect = $name[0].getBoundingClientRect();
+        const badgeRect = $badge[0].getBoundingClientRect();
+        const gap = badgeRect.left - nameRect.right;
+
+        expect(gap).to.be.lessThan(20);
+      });
+    });
+  });
+
+  it('should keep the state badge adjacent to a long resource name', () => {
+    const detailPage = new ConfigMapCreateEditPagePo(localCluster, namespace, longName);
+
+    detailPage.goTo();
+    detailPage.waitForPage();
+
+    cy.get('.title-bar h1.title .resource-name').then(($name) => {
+      cy.get('.title-bar h1.title .badge-state').then(($badge) => {
+        const nameRect = $name[0].getBoundingClientRect();
+        const badgeRect = $badge[0].getBoundingClientRect();
+        const gap = badgeRect.left - nameRect.right;
+
+        expect(gap).to.be.lessThan(20);
+      });
+    });
+  });
+
+  after('clean up', () => {
+    cy.deleteRancherResource('v1', 'configmaps', `${ namespace }/${ shortName }`);
+    cy.deleteRancherResource('v1', 'configmaps', `${ namespace }/${ longName }`);
+  });
+});

shell/components/Resource/Detail/TitleBar/index.vue

@@ -204,7 +204,7 @@ const showAdditionalActionButtons = computed(() => isArray(additionalActions));
 
   .resource-name {
     display: inline-block;
-    flex: 1 1 auto;
+    flex: 0 1 auto;
     min-width: 0;
     white-space: nowrap;
     overflow-x: hidden;