Repository: Sage/carbon (ts)

Issue:
Contents of FlatTable visible behind header when inside a Drawer
### Description

I am using a `FlatTable` within a `Drawer` and the contents of the table are visible behind and beyond the table header. 

### Reproduction

https://stackblitz.com/edit/carbon-select-labelinline-f9yvku?file=src%2FApp.tsx

### Steps to reproduce

_No response_

### JIRA ticket numbers (Sage only)

_No response_

### Suggested solution

_No response_

### Carbon version

130.0.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(flat-table): flat table contents visible behind sticky header/footer
closes #6782

### 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.
-->

When the `FlatTable` is inside a `Drawer` and it has a sticky header/footer `overflow: auto;` should be applied.

https://github.com/user-attachments/assets/3f284380-20e0-4d7e-b55e-5fc4fe680217

### Current behaviour

`overflow: auto;` is not currently being applied when the table is inside a drawer leading to the content being seen while scrolling behind the sticky header and/or footer and to wrong focus behavior.


https://github.com/user-attachments/assets/43604fa5-6d27-405e-8cbd-34e82da0ad9d



<!--
A clear and concise description of the behavior 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
- [ ] 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/components/flat-table/flat-table.component.tsx b/src/components/flat-table/flat-table.component.tsx
index 61626be18..4960bd499 100644
--- a/src/components/flat-table/flat-table.component.tsx
+++ b/src/components/flat-table/flat-table.component.tsx
@@ -221,9 +221,7 @@ export const FlatTable = ({
       hasStickyHead={hasStickyHead}
       colorTheme={colorTheme}
       minHeight={minHeight}
-      overflowY={
-        !isInSidebar && (hasStickyHead || hasStickyFooter) ? "auto" : undefined
-      }
+      overflowY={hasStickyHead || hasStickyFooter ? "auto" : undefined}
       height={addDefaultHeight && !hasMaxHeight ? "99%" : height}
       maxHeight={hasMaxHeight ? "100%" : undefined}
       display="flex"


Test patch:
diff --git a/src/components/flat-table/flat-table-test.stories.tsx b/src/components/flat-table/flat-table-test.stories.tsx
index d0982607d..b92fdbb59 100644
--- a/src/components/flat-table/flat-table-test.stories.tsx
+++ b/src/components/flat-table/flat-table-test.stories.tsx
@@ -20,6 +20,9 @@ import Link from "../../../src/components/link";
 import guid from "../../__internal__/utils/helpers/guid";
 import { FLAT_TABLE_THEMES } from "./flat-table.config";
 import { WithSortingHeaders } from "./flat-table.stories";
+import Heading from "../../../src/components/heading";
+import Pager from "../../../src/components/pager";
+import Drawer from "../../../src/components/drawer";
 import Textbox from "../textbox/textbox.component";
 import DateInput from "../date/date.component";
 
@@ -31,6 +34,7 @@ export default {
     "SortableStory",
     "SubRowsAsAComponentStory",
     "FlatTableSizeFocus",
+    "FlatTableInsideDrawer",
     "FlatRowHeaderWithNoPaddingAndButtons",
   ],
   parameters: {
@@ -501,6 +505,112 @@ export const FlatTableSizeFocus = () => {
   );
 };
 
+export const FlatTableInsideDrawer = () => {
+  return (
+    <Drawer
+      height="calc(100vh - 122px)"
+      expandedWidth="640px"
+      animationDuration="0s"
+      expanded
+      sidebar={
+        <Box
+          height="100%"
+          display="flex"
+          flexDirection="column"
+          overflow="hidden"
+        >
+          <Box mx={5} mb={3} mt={3}>
+            <Heading divider={false} title="Title title" mb={2} />
+          </Box>
+          <Box flex={1} overflowY="auto" padding={4}>
+            <FlatTable
+              hasStickyHead
+              hasStickyFooter
+              colorTheme="transparent-base"
+              height="100%"
+              footer={
+                <Pager
+                  currentPage="1"
+                  onFirst={() => {}}
+                  onLast={() => {}}
+                  onNext={() => {}}
+                  onPagination={() => {}}
+                  onPrevious={() => {}}
+                  pageSizeSelectionOptions={[
+                    {
+                      id: "1",
+                      name: 1,
+                    },
+                    {
+                      id: "10",
+                      name: 10,
+                    },
+                    {
+                      id: "25",
+                      name: 25,
+                    },
+                    {
+                      id: "50",
+                      name: 50,
+                    },
+                    {
+                      id: "100",
+                      name: 100,
+                    },
+                  ]}
+                  totalRecords="100"
+                />
+              }
+            >
+              <FlatTableHead>
+                <FlatTableRow>
+                  <FlatTableHeader pl={5}>Name</FlatTableHeader>
+                  <FlatTableHeader>Location</FlatTableHeader>
+                  <FlatTableHeader>Relationship Status</FlatTableHeader>
+                  <FlatTableHeader>Dependents</FlatTableHeader>
+                </FlatTableRow>
+              </FlatTableHead>
+              <FlatTableBody>
+                {new Array(25)
+                  .fill("")
+                  .map((_, index) => index)
+                  .map((key) => {
+                    return (
+                      <FlatTableRow
+                        key={key}
+                        expandable
+                        subRows={[
+                          <FlatTableRow key="sub-row-1">
+                            <FlatTableCell>Child one</FlatTableCell>
+                            <FlatTableCell>York</FlatTableCell>
+                            <FlatTableCell>Single</FlatTableCell>
+                            <FlatTableCell>2</FlatTableCell>
+                          </FlatTableRow>,
+                          <FlatTableRow key="sub-row-2">
+                            <FlatTableCell>Child two</FlatTableCell>
+                            <FlatTableCell>Edinburgh</FlatTableCell>
+                            <FlatTableCell>Single</FlatTableCell>
+                            <FlatTableCell>1</FlatTableCell>
+                          </FlatTableRow>,
+                        ]}
+                      >
+                        <FlatTableCell>John Doe</FlatTableCell>
+                        <FlatTableCell>London</FlatTableCell>
+                        <FlatTableCell>Single</FlatTableCell>
+                        <FlatTableCell>0</FlatTableCell>
+                      </FlatTableRow>
+                    );
+                  })}
+              </FlatTableBody>
+            </FlatTable>
+          </Box>
+        </Box>
+      }
+    >
+      <div />
+    </Drawer>
+  );
+};
 export const FlatRowHeaderWithNoPaddingAndButtons = () => {
   const SubRows = [
     <FlatTableRow key="sub-row-1">