RocketChat · juliajforesti · Jan 26, 2026 · Jan 23, 2026 · Jan 23, 2026 · Jan 23, 2026
diff --git a/.changeset/legal-pets-rest.md b/.changeset/legal-pets-rest.md
@@ -0,0 +1,5 @@
+---
+'@rocket.chat/fuselage': patch
+---
+
+fix(fuselage): `ContextualbarHeader` style overlapping with button focus style
diff --git a/packages/fuselage/src/components/ContextualbarV2/Contextualbar.spec.tsx b/packages/fuselage/src/components/ContextualbarV2/Contextualbar.spec.tsx
@@ -7,6 +7,8 @@ import * as stories from './Contextualbar.stories';
 
 expect.extend(toHaveNoViolations);
 
+const { WithLongTitle } = composeStories(stories);
+
 const testCases = Object.values(composeStories(stories)).map((Story) => [
   Story.storyName || 'Story',
   Story,
@@ -30,4 +32,18 @@ describe('[Contextualbar Rendering]', () => {
       expect(results).toHaveNoViolations();
     },
   );
+
+  test('WithLongTitle should truncate long titles', () => {
+    const { getByRole } = render(<WithLongTitle />);
+    const titleElement = getByRole('heading');
+
+    const titleStyle = window.getComputedStyle(titleElement);
+    expect(titleStyle.overflow).toBe('hidden');
+    expect(titleStyle.textOverflow).toBe('ellipsis');
+    expect(titleStyle.whiteSpace).toBe('nowrap');
+
+    const flexContainer = titleElement.parentElement;
+    const containerStyle = window.getComputedStyle(flexContainer!);
+    expect(containerStyle.overflow).toBe('hidden');
+  });
 });
diff --git a/packages/fuselage/src/components/ContextualbarV2/Contextualbar.stories.tsx b/packages/fuselage/src/components/ContextualbarV2/Contextualbar.stories.tsx
@@ -115,3 +115,57 @@ export const Empty: StoryFn<typeof ContextualbarV2> = () => (
     <ContextualbarV2Footer>Footer</ContextualbarV2Footer>
   </ContextualbarV2>
 );
+
+export const WithLongTitle: StoryFn<typeof ContextualbarV2> = () => (
+  <ContextualbarV2 position='static' height='x540'>
+    <ContextualbarV2Header>
+      <ContextualbarV2Action
+        title='Back'
+        name='arrow-back'
+        onClick={action('click')}
+      />
+      <ContextualbarV2Title>
+        ContextualbarV2 Long Title ContextualbarV2 Long Title ContextualbarV2
+        Long Title ContextualbarV2 Long Title ContextualbarV2 Long Title
+        ContextualbarV2 Long Title ContextualbarV2 Long Title ContextualbarV2
+        Long Title ContextualbarV2 Long Title
+      </ContextualbarV2Title>
+      <ContextualbarV2Actions>
+        <ContextualbarV2Action
+          title='Title'
+          name='new-window'
+          onClick={action('click')}
+        />
+        <ContextualbarV2Action
+          title='Add user'
+          name='add-user'
+          onClick={action('click')}
+        />
+        <ContextualbarV2Action
+          title='Close'
+          name='cross'
+          onClick={action('click')}
+        />
+      </ContextualbarV2Actions>
+    </ContextualbarV2Header>
+    <ContextualbarV2Section>
+      <InputBox
+        type='text'
+        placeholder='Search'
+        addon={<Icon name='magnifier' size='x20' />}
+      />
+    </ContextualbarV2Section>
+    <ContextualbarV2Content />
+    <ContextualbarV2Footer>
+      <ButtonGroup>
+        <ContextualbarV2Button width='full' secondary>
+          Cancel
+        </ContextualbarV2Button>
+        <Button width='full' primary>
+          Save
+        </Button>
+        <IconButton title='More' icon='menu' secondary />
+      </ButtonGroup>
+    </ContextualbarV2Footer>
+  </ContextualbarV2>
+);
diff --git a/packages/fuselage/src/components/ContextualbarV2/ContextualbarHeader.tsx b/packages/fuselage/src/components/ContextualbarV2/ContextualbarHeader.tsx
@@ -26,6 +26,8 @@ const ContextualbarHeader = ({
       flexGrow={1}
       height='100%'
       overflow='hidden'
+      mi={-4}
+      pi={4}
       className={css`
         gap: 8px;
       `}

diff --git a/packages/fuselage/src/components/ContextualbarV2/ContextualbarTitle.tsx b/packages/fuselage/src/components/ContextualbarV2/ContextualbarTitle.tsx
@@ -10,6 +10,7 @@ const ContextualbarTitle = (props: ContextualbarTitleProps) => (
     flexGrow={1}
     fontScale='h5'
     withTruncatedText
+    is='h5'
     {...props}
   />
 );

diff --git a/packages/fuselage/src/components/ContextualbarV2/__snapshots__/Contextualbar.spec.tsx.snap b/packages/fuselage/src/components/ContextualbarV2/__snapshots__/Contextualbar.spec.tsx.snap
@@ -13,7 +13,7 @@ exports[`[Contextualbar Rendering] renders Default without crashing 1`] = `
           class="rcx-box rcx-box--full rcx-css-1usi2qo"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1tmbvtv"
+            class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1l4fxfb"
           >
             <button
               class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-ue04py"
@@ -27,11 +27,11 @@ exports[`[Contextualbar Rendering] renders Default without crashing 1`] = `
                 ⦉
               </i>
             </button>
-            <div
+            <h5
               class="rcx-box rcx-box--full rcx-css-1spko5i"
             >
               ContextualbarV2 Title
-            </div>
+            </h5>
             <div
               class="rcx-button-group rcx-button-group--align-start"
               role="group"
@@ -162,7 +162,7 @@ exports[`[Contextualbar Rendering] renders Empty without crashing 1`] = `
           class="rcx-box rcx-box--full rcx-css-1usi2qo"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1tmbvtv"
+            class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1l4fxfb"
           >
             <button
               class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-ue04py"
@@ -176,11 +176,11 @@ exports[`[Contextualbar Rendering] renders Empty without crashing 1`] = `
                 ⦉
               </i>
             </button>
-            <div
+            <h5
               class="rcx-box rcx-box--full rcx-css-1spko5i"
             >
               ContextualbarV2 Empty
-            </div>
+            </h5>
             <div
               class="rcx-button-group rcx-button-group--align-start"
               role="group"
@@ -243,7 +243,7 @@ exports[`[Contextualbar Rendering] renders Skeleton without crashing 1`] = `
           class="rcx-box rcx-box--full rcx-css-1usi2qo"
         >
           <div
-            class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1tmbvtv"
+            class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1l4fxfb"
           >
             <span
               class="rcx-skeleton rcx-skeleton--text rcx-css-1qcz93u"
@@ -277,3 +277,152 @@ exports[`[Contextualbar Rendering] renders Skeleton without crashing 1`] = `
   </div>
 </body>
 `;
+
+exports[`[Contextualbar Rendering] renders WithLongTitle without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-css-k3k951"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-vertical-bar rcx-css-37ac0e"
+      >
+        <div
+          class="rcx-box rcx-box--full rcx-css-1usi2qo"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-css-1bdyjik rcx-css-1l4fxfb"
+          >
+            <button
+              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-ue04py"
+              title="Back"
+              type="button"
+            >
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-arrow-back rcx-icon rcx-css-4pvxx3"
+              >
+                ⦉
+              </i>
+            </button>
+            <h5
+              class="rcx-box rcx-box--full rcx-css-1spko5i"
+            >
+              ContextualbarV2 Long Title ContextualbarV2 Long Title ContextualbarV2 Long Title ContextualbarV2 Long Title ContextualbarV2 Long Title ContextualbarV2 Long Title ContextualbarV2 Long Title ContextualbarV2 Long Title ContextualbarV2 Long Title
+            </h5>
+            <div
+              class="rcx-button-group rcx-button-group--align-start"
+              role="group"
+            >
+              <button
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-ue04py"
+                title="Title"
+                type="button"
+              >
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-new-window rcx-icon rcx-css-4pvxx3"
+                >
+                  ⁽
+                </i>
+              </button>
+              <button
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-ue04py"
+                title="Add user"
+                type="button"
+              >
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-add-user rcx-icon rcx-css-4pvxx3"
+                >
+                  
+                </i>
+              </button>
+              <button
+                class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-button-group__item rcx-css-ue04py"
+                title="Close"
+                type="button"
+              >
+                <i
+                  aria-hidden="true"
+                  class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+                >
+                  
+                </i>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-vertical-bar__section rcx-css-16mbly4"
+        >
+          <label
+            class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+          >
+            <input
+              class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-text rcx-input-box"
+              placeholder="Search"
+              size="1"
+              type="text"
+            />
+            <span
+              class="rcx-box rcx-box--full rcx-input-box__addon"
+            >
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+              >
+                
+              </i>
+            </span>
+          </label>
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-vertical-bar__content rcx-css-1ptgac4"
+        />
+        <div
+          class="rcx-box rcx-box--full rcx-css-f51umh"
+        >
+          <div
+            class="rcx-button-group rcx-button-group--align-start"
+            role="group"
+          >
+            <button
+              class="rcx-box rcx-box--full rcx-button--secondary rcx-button rcx-button-group__item rcx-css-1qcz93u"
+              type="button"
+            >
+              <span
+                class="rcx-button--content"
+              >
+                Cancel
+              </span>
+            </button>
+            <button
+              class="rcx-box rcx-box--full rcx-button--primary rcx-button rcx-button-group__item rcx-css-1qcz93u"
+              type="button"
+            >
+              <span
+                class="rcx-button--content"
+              >
+                Save
+              </span>
+            </button>
+            <button
+              class="rcx-box rcx-box--full rcx-button--large-square rcx-button--icon-secondary rcx-button--square rcx-button--icon rcx-button rcx-button-group__item"
+              title="More"
+              type="button"
+            >
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-menu rcx-icon rcx-css-1x2l7ts"
+              >
+                
+              </i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;