FlatTableHeader does not allow for content wrapping

[johnb-sage]

Description

I'm using FlatTable and have some long header text that causes overflow at small viewports widths, such as 320px. Currently FlatTableHeader has white-space: nowrap so is not responsive.

Reproduction

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

Steps to reproduce

No response

JIRA ticket numbers (Sage only)

No response

Suggested solution

Ideally all components are responsive by default and we opt out of the native behaviour explicitly, so my preference is to remove the 'white-space: nowrap'.

Carbon version

128.3.1

Design tokens version

No response

Relevant browsers

Chrome

Relevant OSs

MacOS

Additional context

No response

Confidentiality

• I confirm there is no confidential or commercially sensitive information included.

[DipperTheDan]

Current work around is to use Typography.

<FlatTableHeader>
   <Typography
     as="span"
     whiteSpace="normal"
     fontWeight="700"
    >
    Some very long text that will need to wrap on a small screen
   </Typography>
</FlatTableHeader>

[nicktitchmarsh]

FE-6422