Repository: Sage/carbon (ts)

Issue:
Form validation summary unresponsive at 320px
### Description

When I am using a small screen the form error validation isn't shown in full. I expect the full text to be visible on the page. 

### Reproduction

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

### Steps to reproduce

_No response_

### JIRA ticket numbers (Sage only)

_No response_

### Suggested solution

_No response_

### Carbon version

125.12.1

### Design tokens version

_No response_

### 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(form): allow form-footer content to be responsive
fix #6658

### Proposed behaviour

<!--
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.
-->


Allows the form-footer content to be responsive - the buttons and validation message will wrap in smaller screen sizes. When buttons are `fullWidth` the `rightSideButtons` will now render underneath the `saveButton` instead of above.

![image](https://github.com/user-attachments/assets/c586f41e-abaa-4c77-a16c-ebd6eabb38ef)

![image](https://github.com/user-attachments/assets/5c7204dc-29a8-4db5-a2ba-4639d6a1042d)

### Current behaviour

<!--
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.
-->

Form-footer content does not wrap in smaller screen sizes and overflows outside the page. 
`rightSideButtons` render above the `saveButton` when buttons are `fullWidth`. 

![image](https://github.com/user-attachments/assets/6e400b29-54de-485e-8a20-87d01ff27665)

![image](https://github.com/user-attachments/assets/0832e150-e5b0-44c4-9881-c58ca039a863)

### 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
- [x] 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/components/form/__internal__/form-summary.style.ts b/src/components/form/__internal__/form-summary.style.ts
index 2990bf211..40ca7b041 100644
--- a/src/components/form/__internal__/form-summary.style.ts
+++ b/src/components/form/__internal__/form-summary.style.ts
@@ -1,6 +1,5 @@
 import styled, { css } from "styled-components";
 import StyledIcon from "../../icon/icon.style";
-import StyledButton from "../../button/button.style";
 
 type StyledFormSummaryProps = {
   showSummary?: boolean;
@@ -9,12 +8,11 @@ type StyledFormSummaryProps = {
 
 export const StyledFormSummary = styled.div<StyledFormSummaryProps>`
   display: inline-flex;
+  flex-wrap: wrap;
   align-items: center;
-  font-size: 13px;
+  justify-content: end;
+  font-size: var(--fontSizes100);
   font-weight: 500;
-  margin: -8px;
-  padding: 8px;
-  white-space: nowrap;
 
   ${({ fullWidth }) =>
     fullWidth &&
@@ -25,21 +23,27 @@ export const StyledFormSummary = styled.div<StyledFormSummaryProps>`
       justify-content: flex-start;
     `}
 
-  ${({ showSummary }) =>
+  ${({ showSummary, fullWidth }) =>
     showSummary &&
     css`
       background-color: var(--colorsUtilityMajor025);
+      border: solid var(--borderWidth100) var(--colorsActionMinor250);
+      border-radius: var(--borderRadius100);
+      margin: calc(-1 * var(--sizing100)) 0;
+      padding: var(--sizing100);
+      gap: var(--sizing125);
+
+      ${fullWidth &&
+      css`
+        margin: 0 calc(-1 * var(--sizing100));
+      `}
     `}
-  ${StyledButton} {
-    margin-right: 0;
-  }
 `;
 
 export const StyledMessagePrefix = styled.div`
   &:first-of-type {
-    margin-left: 4px;
+    margin-left: var(--sizing100);
   }
-  margin-right: 4px;
 `;
 
 export type StyledInternalSummaryProps = {
@@ -49,10 +53,7 @@ export type StyledInternalSummaryProps = {
 export const StyledInternalSummary = styled.div<StyledInternalSummaryProps>`
   display: flex;
   align-items: center;
-  margin-right: 8px;
-  &:last-of-type {
-    margin-right: 16px;
-  }
+  gap: var(--sizing100);
   ${({ type }) =>
     type === "warning" &&
     css`
@@ -65,7 +66,6 @@ export const StyledInternalSummary = styled.div<StyledInternalSummaryProps>`
     `}
 
   ${StyledIcon} {
-    margin-right: 4px;
     ${({ type }) =>
       type === "warning" &&
       css`
diff --git a/src/components/form/form.component.tsx b/src/components/form/form.component.tsx
index d11cf96b3..6e1cb502e 100644
--- a/src/components/form/form.component.tsx
+++ b/src/components/form/form.component.tsx
@@ -10,7 +10,6 @@ import {
   StyledFormFooter,
   StyledLeftButtons,
   StyledRightButtons,
-  StyledFullWidthButtons,
 } from "./form.style";
 import { FormButtonAlignment, formSpacing } from "./form.config";
 import FormSpacingProvider from "../../__internal__/form-spacing-provider";
@@ -106,7 +105,7 @@ export const Form = ({
           {children}
         </FormSpacingProvider>
       </StyledFormContent>
-      {!fullWidthButtons && renderFooter && (
+      {renderFooter && (
         <StyledFormFooter
           data-element="form-footer"
           data-role="form-footer"
@@ -114,6 +113,7 @@ export const Form = ({
           ref={formFooterRef}
           stickyFooter={stickyFooter}
           buttonAlignment={buttonAlignment}
+          fullWidthButtons={fullWidthButtons}
           isInModal={isInModal}
           {...footerPadding}
         >
@@ -126,7 +126,11 @@ export const Form = ({
             </StyledLeftButtons>
           )}
 
-          <FormSummary errorCount={errorCount} warningCount={warningCount}>
+          <FormSummary
+            fullWidth={fullWidthButtons}
+            errorCount={errorCount}
+            warningCount={warningCount}
+          >
             {saveButton}
           </FormSummary>
 
@@ -140,38 +144,6 @@ export const Form = ({
           )}
         </StyledFormFooter>
       )}
-      {fullWidthButtons && renderFooter && (
-        <StyledFormFooter
-          data-element="form-footer"
-          data-role="form-footer"
-          className={classNames}
-          ref={formFooterRef}
-          stickyFooter={stickyFooter}
-          buttonAlignment={buttonAlignment}
-          fullWidthButtons={fullWidthButtons}
-          {...footerPadding}
-        >
-          {leftSideButtons && (
-            <StyledLeftButtons fullWidthButtons={fullWidthButtons}>
-              {leftSideButtons}
-            </StyledLeftButtons>
-          )}
-          {rightSideButtons && (
-            <StyledRightButtons fullWidthButtons={fullWidthButtons}>
-              {rightSideButtons}
-            </StyledRightButtons>
-          )}
-          <StyledFullWidthButtons>
-            <FormSummary
-              fullWidth={fullWidthButtons}
-              errorCount={errorCount}
-              warningCount={warningCount}
-            >
-              {saveButton}
-            </FormSummary>
-          </StyledFullWidthButtons>
-        </StyledFormFooter>
-      )}
     </StyledForm>
   );
 };
diff --git a/src/components/form/form.stories.tsx b/src/components/form/form.stories.tsx
index b584fcc51..d2e71b0c7 100644
--- a/src/components/form/form.stories.tsx
+++ b/src/components/form/form.stories.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable no-console */
 import React, { useState } from "react";
 import { Meta, StoryObj } from "@storybook/react";
-import { allModes } from "../../../.storybook/modes";
 import isChromatic from "../../../.storybook/isChromatic";
 import generateStyledSystemProps from "../../../.storybook/utils/styled-system-props";
 
@@ -36,11 +35,6 @@ const meta: Meta<typeof Form> = {
   },
   parameters: {
     controls: { disable: true },
-    chromatic: {
-      modes: {
-        desktop: allModes.chromatic,
-      },
-    },
   },
   decorators: [
     (Story) => (
@@ -94,7 +88,7 @@ export const WithFullWidthButtons: Story = () => (
       onSubmit={() => console.log("submit")}
       stickyFooter
       leftSideButtons={
-        <Button mb={3} onClick={() => console.log("cancel")} fullWidth>
+        <Button onClick={() => console.log("cancel")} fullWidth>
           Cancel
         </Button>
       }
@@ -179,6 +173,9 @@ export const WithErrorsSummary: Story = () => (
   </Form>
 );
 WithErrorsSummary.storyName = "With Errors Summary";
+WithErrorsSummary.parameters = {
+  chromatic: { viewports: [1200, 900, 320] },
+};
 
 export const WithWarningsSummary: Story = () => (
   <Form
@@ -197,6 +194,9 @@ export const WithWarningsSummary: Story = () => (
   </Form>
 );
 WithWarningsSummary.storyName = "With Warnings Summary";
+WithWarningsSummary.parameters = {
+  chromatic: { viewports: [1200, 900, 320] },
+};
 
 export const WithBothErrorsAndWarningsSummary: Story = () => (
   <Form
@@ -217,6 +217,9 @@ export const WithBothErrorsAndWarningsSummary: Story = () => (
 );
 WithBothErrorsAndWarningsSummary.storyName =
   "With Both Errors and Warnings Summary";
+WithBothErrorsAndWarningsSummary.parameters = {
+  chromatic: { viewports: [1200, 900, 320] },
+};
 
 export const WithAdditionalButtons: Story = () => (
   <Form
@@ -224,9 +227,7 @@ export const WithAdditionalButtons: Story = () => (
     leftSideButtons={
       <>
         <Button onClick={() => console.log("cancel")}>Other</Button>
-        <Button onClick={() => console.log("cancel")} ml={2}>
-          Cancel
-        </Button>
+        <Button onClick={() => console.log("cancel")}>Cancel</Button>
       </>
     }
     saveButton={
@@ -237,9 +238,7 @@ export const WithAdditionalButtons: Story = () => (
     rightSideButtons={
       <>
         <Button onClick={() => console.log("cancel")}>Reset</Button>
-        <Button onClick={() => console.log("cancel")} ml={2}>
-          Other
-        </Button>
+        <Button onClick={() => console.log("cancel")}>Other</Button>
       </>
     }
   >
@@ -254,9 +253,7 @@ export const WithButtonsAlignedToTheLeft: Story = () => (
     leftSideButtons={
       <>
         <Button onClick={() => console.log("cancel")}>Other</Button>
-        <Button onClick={() => console.log("cancel")} ml={2}>
-          Cancel
-        </Button>
+        <Button onClick={() => console.log("cancel")}>Cancel</Button>
       </>
     }
     saveButton={
@@ -267,9 +264,7 @@ export const WithButtonsAlignedToTheLeft: Story = () => (
     rightSideButtons={
       <>
         <Button onClick={() => console.log("cancel")}>Reset</Button>
-        <Button onClick={() => console.log("cancel")} ml={2}>
-          Other
-        </Button>
+        <Button onClick={() => console.log("cancel")}>Other</Button>
       </>
     }
     buttonAlignment="left"
diff --git a/src/components/form/form.style.ts b/src/components/form/form.style.ts
index 2a22cdee8..359bb3d3e 100644
--- a/src/components/form/form.style.ts
+++ b/src/components/form/form.style.ts
@@ -3,7 +3,6 @@ import styled, { css } from "styled-components";
 import { space, padding } from "styled-system";
 import StyledFormField from "../../__internal__/form-field/form-field.style";
 
-import StyledButton from "../button/button.style";
 import baseTheme from "../../style/themes/base";
 import { FormButtonAlignment } from "./form.config";
 import StyledSearch from "../search/search.style";
@@ -33,6 +32,8 @@ interface ButtonProps extends StyledFormContentProps {
 export const StyledFormFooter = styled.div<ButtonProps>`
   align-items: center;
   display: flex;
+  flex-wrap: wrap;
+  gap: var(--sizing200);
 
   ${({ buttonAlignment }) =>
     buttonAlignment === "right" &&
@@ -119,30 +120,17 @@ export const StyledForm = styled.form<StyledFormProps>`
 
 export const StyledRightButtons = styled.div<ButtonProps>`
   display: flex;
-  ${({ fullWidthButtons }) =>
-    fullWidthButtons ? `margin-left: 0px;` : `margin-left: 16px;`}
-  ${({ buttonAlignment }) => buttonAlignment === "left" && "flex-grow: 1"};
+  gap: var(--sizing200);
 
-  ${StyledButton}:last-child {
-    margin-right: 0;
-  }
-`;
-
-export const StyledFullWidthButtons = styled.div`
-  width: 100%;
-  display: flex;
+  ${({ buttonAlignment }) => buttonAlignment === "left" && "flex-grow: 1;"}
 `;
 
 export const StyledLeftButtons = styled.div<ButtonProps>`
   display: flex;
   justify-content: flex-end;
-  ${({ fullWidthButtons }) =>
-    fullWidthButtons ? `margin-right: 0px;` : `margin-right: 16px;`}
-  ${({ buttonAlignment }) => buttonAlignment === "right" && "flex-grow: 1"};
+  gap: var(--sizing200);
 
-  ${StyledButton}:last-child {
-    margin-right: 0;
-  }
+  ${({ buttonAlignment }) => buttonAlignment === "right" && "flex-grow: 1;"}
 `;
 
 StyledForm.defaultProps = {


Test patch:
diff --git a/src/components/form/form-test.stories.tsx b/src/components/form/form-test.stories.tsx
index fc21a6928..14e41d623 100644
--- a/src/components/form/form-test.stories.tsx
+++ b/src/components/form/form-test.stories.tsx
@@ -37,7 +37,7 @@ export default {
   },
 };
 
-export const DefaultWithStickyFooter = () => (
+export const DefaultWithStickyFooter = ({ ...props }) => (
   <Form
     onSubmit={() => console.log("submit")}
     leftSideButtons={
@@ -48,7 +48,7 @@ export const DefaultWithStickyFooter = () => (
         Save
       </Button>
     }
-    stickyFooter
+    {...props}
   >
     <Tabs mb={2}>
       <Tab
@@ -72,6 +72,12 @@ export const DefaultWithStickyFooter = () => (
 );
 
 DefaultWithStickyFooter.storyName = "default";
+DefaultWithStickyFooter.args = {
+  stickyFooter: true,
+  errorCount: 0,
+  warningCount: 0,
+  buttonAlignment: "right",
+};
 
 export const FormAlignmentCustomMarginsTextInputs = () => {
   return (
@@ -485,3 +491,40 @@ MarginTest.parameters = {
   },
   themeProvider: { chromatic: { theme: "sage" } },
 };
+
+export const FullWidthWithLeftAndRight = () => {
+  return (
+    <Form
+      fullWidthButtons
+      onSubmit={() => console.log("submit")}
+      leftSideButtons={
+        <Button onClick={() => console.log("cancel")} fullWidth>
+          Cancel
+        </Button>
+      }
+      saveButton={
+        <Button buttonType="primary" type="submit" fullWidth>
+          Save
+        </Button>
+      }
+      rightSideButtons={
+        <Button onClick={() => console.log("other")} fullWidth>
+          Other
+        </Button>
+      }
+      errorCount={3}
+      warningCount={2}
+    >
+      <Textbox label="Textbox" />
+      <Textbox label="Textbox" />
+    </Form>
+  );
+};
+
+FullWidthWithLeftAndRight.storyName = "left and right fullWith buttons";
+FullWidthWithLeftAndRight.parameters = {
+  chromatic: {
+    disableSnapshot: false,
+  },
+  themeProvider: { chromatic: { theme: "sage" }, viewports: [1200, 900, 320] },
+};
diff --git a/src/components/form/form.test.tsx b/src/components/form/form.test.tsx
index 4ef254e97..8768d1ff2 100644
--- a/src/components/form/form.test.tsx
+++ b/src/components/form/form.test.tsx
@@ -162,7 +162,7 @@ test("form summary and footer have correct styles when the `fullWidthButtons` pr
 });
 
 // for coverage: stickyFooter prop styles are covered by Chromatic and Playwright
-test("has the corrrect styles when the `stickyFooter` prop is set", () => {
+test("has the correct styles when the `stickyFooter` prop is set", () => {
   render(
     <Form
       aria-label="form-example"