Repository: Sage/carbon (ts)

Issue:
subTitle prop, of Accordion, hasn't margin right with the arrow button
### Description

In the Accordion component when subTitle prop has a long text, this text doesn't have enough space to the right with the arrow button

### Reproduction

https://stackblitz.com/edit/accordion-bxecc9hn?file=src%2FApp.tsx

### Steps to reproduce

_No response_

### JIRA ticket numbers (Sage only)

_No response_

### Suggested solution

_No response_

### Carbon version

147.3.0

### 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 description:
fix(accordion): add padding-right to accordion heading container
fix #7203

### 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.
-->

adds a padding-right to the accordion heading container, so ample space is provided between a subtitle and the accordion chevron

### 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.
-->

Currently, there is not enough space between the subtitle and the accordion chevron, so if there is a long subtitle or the accordion has a set width there will not be enough space between the two.

### Checklist

<!-- Each PR should include the following -->

- [x] Commits follow our style guide
- [x] Related issues linked in commit messages if required
- [ ] 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/components/accordion/accordion.style.ts b/src/components/accordion/accordion.style.ts
index dbedd765b..5a3a3ef2d 100644
--- a/src/components/accordion/accordion.style.ts
+++ b/src/components/accordion/accordion.style.ts
@@ -109,6 +109,7 @@ interface StyledAccordionHeadingsContainerProps {
 }
 
 const StyledAccordionHeadingsContainer = styled.div<StyledAccordionHeadingsContainerProps>`
+  padding-right: var(--sizing300);
   ${({ hasValidationIcon }) => css`
     display: grid;
     ${hasValidationIcon &&


Test patch:
diff --git a/src/components/accordion/accordion-test.stories.tsx b/src/components/accordion/accordion-test.stories.tsx
index 895231448..6e5e62856 100644
--- a/src/components/accordion/accordion-test.stories.tsx
+++ b/src/components/accordion/accordion-test.stories.tsx
@@ -183,6 +183,19 @@ export const AccordionWithDefinitionList = () => {
 };
 AccordionWithDefinitionList.storyName = "Accordion With Definition List";
 
+export const AccordionWithLongSubtitle = () => (
+  <Accordion
+    title="Heading"
+    subTitle="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"
+    width="514px"
+  />
+);
+
+AccordionWithLongSubtitle.storyName = "Accordion With Long Subtitle";
+AccordionWithLongSubtitle.parameters = {
+  chromatic: { disableSnapshot: false },
+};
+
 export const AccordionWithValidations = () => {
   const [validationKey, setValidationKey] = useState<string>("error");
   const props = useMemo(() => {