feat(1-3379): add stale badge to the new header (#9320)

Without this, there's no way to tell if a flag is stale or not on the
flag page, so we're adding it back in. However, we'll only show the
badge if it's stale, not if it's an active flag.

Stale flag with badge:

![image](https://github.com/user-attachments/assets/eded97ab-0bba-41e5-8e1c-37cc90684c63)

When it wraps:

![image](https://github.com/user-attachments/assets/223eb672-20d2-4f3c-a5d9-34c3b739ce5e)

To make the badge line up properly when it wraps, I removed the
hard-coded margin in the badge. To counteract that, I've also removed
the hard-coded margin in the "copy name" button and switched to using
flex gaps to sort that.

It still looks right.

Before:

![image](https://github.com/user-attachments/assets/d945b067-c182-4448-967f-5505cf2e47ca)

After:

![image](https://github.com/user-attachments/assets/3b78b9fc-82b9-4d21-a53a-a3849819e916)

frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.tsx

@@ -19,7 +19,7 @@ export const FeatureStatusChip = ({
     const value = stale ? 'Stale' : 'Active';
 
     return (
-        <div data-loading style={{ marginLeft: '8px' }}>
+        <div data-loading>
             <Badge color={stale ? 'error' : 'success'} title={title}>
                 {value}
             </Badge>

frontend/src/component/feature/FeatureView/FeatureViewHeader.tsx

@@ -51,11 +51,15 @@ const NewStyledHeader = styled('div')(({ theme }) => ({
     borderBottom: `1px solid ${theme.palette.divider}`,
 }));
 
-const LowerHeaderRow = styled('div')(({ theme }) => ({
+const UpperHeaderRow = styled('div')(({ theme }) => ({
     display: 'flex',
     flexFlow: 'row wrap',
-    justifyContent: 'space-between',
     columnGap: theme.spacing(4),
+    alignItems: 'center',
+}));
+
+const LowerHeaderRow = styled(UpperHeaderRow)(({ theme }) => ({
+    justifyContent: 'space-between',
 }));
 
 const HeaderActions = styled('div')(({ theme }) => ({
@@ -99,10 +103,11 @@ const StyledInnerContainer = styled('div')(({ theme }) => ({
     },
 }));
 
-const StyledFlagInfoContainer = styled('div')({
+const StyledFlagInfoContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
-});
+    columnGap: theme.spacing(1),
+}));
 
 const StyledDependency = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -259,7 +264,12 @@ export const FeatureViewHeader: FC<Props> = ({ feature }) => {
         <>
             {flagOverviewRedesign ? (
                 <NewStyledHeader>
-                    <Typography variant='h1'>{feature.name}</Typography>
+                    <UpperHeaderRow>
+                        <Typography variant='h1'>{feature.name}</Typography>
+                        {feature.stale ? (
+                            <FeatureStatusChip stale={true} />
+                        ) : null}
+                    </UpperHeaderRow>
                     <LowerHeaderRow>
                         <Tabs
                             value={activeTab.path}
@@ -357,7 +367,6 @@ export const FeatureViewHeader: FC<Props> = ({ feature }) => {
                                     >
                                         <IconButton
                                             onClick={handleCopyToClipboard}
-                                            style={{ marginLeft: 8 }}
                                         >
                                             {isFeatureNameCopied ? (
                                                 <Check