Repository: Sage/carbon (ts)

Issue:
DialogFullScreen - size of header element
### Description

If I use a StepFlow component in the header of a DialogFullScreen and the title used is very small, the progess indicator can't expand to the whole width.
In a standard Dialog, it takes all the space.
I would like the same behaviour.

### Reproduction

https://stackblitz.com/edit/parsium-carbon-starter-17vmoj?file=src%2FApp.tsx

### Steps to reproduce

_No response_

### JIRA ticket numbers (Sage only)

_No response_

### Suggested solution

_No response_

### Carbon version

133.0.0

### Design tokens version

4.34.0

### Relevant browsers

Chrome

### Relevant OSs

MacOS

### Additional context

_No response_

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.

Pull request:
fix(dialog-full-screen): fix flex title layout
fixes #6740

Fixes issue in the full screen heading allowing it to use the entire width. This allows any components included in the title to use all the available width.

### Proposed behaviour

The header container now has `min-width: 100%;`  so that any potential components included in the title can use the entire available width.
![proposed](https://github.com/Sage/carbon/assets/101639841/a588893a-2aa4-41c4-8fff-8b48bf1abfb1)



<!--
A clear and concise description of what changes this PR makes. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->

### Current behaviour

Currently any components included in the title are limited to the auto width of the title.
![current](https://github.com/Sage/carbon/assets/101639841/c4fe5de3-09b4-4213-b112-e47b2ac774e1)



<!--
A clear and concise description of the behaviour before this change. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->

### Checklist

<!-- Each PR should include the following -->

- [X] Commits follow our style guide
- [X] Related issues linked in commit messages if required
- [X] Screenshots are included in the PR if useful
- [ ] All themes are supported if required
- [ ] Unit tests added or updated if required
- [ ] Playwright automation tests added or updated if required
- [X] Storybook added or updated if required
- [ ] Translations added or updated (including creating or amending translation keys table in storybook) if required
- [ ] Typescript `d.ts` file added or updated if required
- [ ] Related docs have been updated if required

#### QA

- [ ] Tested in provided StackBlitz sandbox/Storybook
- [ ] Add new Playwright test coverage if required
- [ ] Carbon implementation matches Design System/designs
- [ ] UI Tests GitHub check reviewed if required

### Additional context

<!-- Add any other context or links about the pull request here. -->

### Testing instructions

<!--
How can a reviewer test this PR?

If this PR addresses a pre-existing bug, please include a link to a sandbox that reproduces the original bug. A starter template has been provided to help you do this:
<https://stackblitz.com/fork/github/Parsium/carbon-starter>
-->


Patch:
diff --git a/src/__internal__/full-screen-heading/full-screen-heading.style.ts b/src/__internal__/full-screen-heading/full-screen-heading.style.ts
index bb4bfc9e8..bbf77f1af 100644
--- a/src/__internal__/full-screen-heading/full-screen-heading.style.ts
+++ b/src/__internal__/full-screen-heading/full-screen-heading.style.ts
@@ -11,6 +11,7 @@ export interface StyledFullScreenHeadingProps {
 export const StyledHeaderContainer = styled.div`
   display: flex;
   flex-wrap: wrap;
+  min-width: 100%;
 `;
 
 const StyledFullScreenHeading = styled.div<StyledFullScreenHeadingProps>`
diff --git a/src/components/dialog-full-screen/dialog-full-screen.spec.tsx b/src/components/dialog-full-screen/dialog-full-screen.spec.tsx
index 07c1e79b5..21a4fb3c4 100644
--- a/src/components/dialog-full-screen/dialog-full-screen.spec.tsx
+++ b/src/components/dialog-full-screen/dialog-full-screen.spec.tsx
@@ -2,7 +2,9 @@ import React, { useRef } from "react";
 import { mount, ReactWrapper } from "enzyme";
 import Modal from "../modal";
 import FullScreenHeading from "../../__internal__/full-screen-heading";
-import StyledFullScreenHeading from "../../__internal__/full-screen-heading/full-screen-heading.style";
+import StyledFullScreenHeading, {
+  StyledHeaderContainer,
+} from "../../__internal__/full-screen-heading/full-screen-heading.style";
 import StyledDialogFullScreen from "./dialog-full-screen.style";
 import DialogFullScreen from "./dialog-full-screen.component";
 import StyledContent from "./content.style";
@@ -345,6 +347,29 @@ describe("DialogFullScreen", () => {
         wrapper.unmount();
       });
     });
+
+    describe("when the component is rendered", () => {
+      it("the title container min width should be 100%", () => {
+        wrapper = mount(
+          <DialogFullScreen
+            open
+            title="This is test title"
+            help="this is help text"
+          />
+        );
+
+        const headerContainer = wrapper.find(StyledHeaderContainer);
+
+        assertStyleMatch(
+          {
+            minWidth: "100%",
+          },
+          headerContainer
+        );
+
+        wrapper.unmount();
+      });
+    });
   });
 
   describe("tags", () => {


Test patch:
diff --git a/src/components/dialog-full-screen/dialog-full-screen-test.stories.tsx b/src/components/dialog-full-screen/dialog-full-screen-test.stories.tsx
index acbd02145..ef67d2936 100644
--- a/src/components/dialog-full-screen/dialog-full-screen-test.stories.tsx
+++ b/src/components/dialog-full-screen/dialog-full-screen-test.stories.tsx
@@ -7,6 +7,8 @@ import Button from "../button";
 import Form from "../form";
 import Icon from "../icon";
 import Textbox from "../textbox";
+import Box from "../box";
+import { StepFlow } from "../step-flow";
 
 export default {
   title: "Dialog Full Screen/Test",
@@ -141,6 +143,38 @@ Nested.parameters = {
   },
 };
 
+export const WithStepFlowInHeader: StoryType = {
+  render: (args) => {
+    const { children, ...rest } = args;
+    return <DialogFullScreen {...rest}>{children}</DialogFullScreen>;
+  },
+  args: {
+    children: "Content",
+    open: true,
+    title: (
+      <Box maxWidth="750px" width="100%" data-testid="test">
+        <StepFlow
+          category="category"
+          title="title"
+          currentStep={1}
+          totalSteps={6}
+          showProgressIndicator
+        />
+      </Box>
+    ),
+    showCloseIcon: false,
+    onCancel: () => {},
+  },
+  decorators: [
+    (Story) => (
+      <Box height="900px" width="100%">
+        <Story />
+      </Box>
+    ),
+  ],
+};
+WithStepFlowInHeader.storyName = "with StepFlow in header";
+
 export const WithTwoDifferentNodes: StoryType = ({
   ...props
 }: Partial<DialogFullScreenProps>) => {