Update the design of change request filters to be one contiguous element (#10857)

Removes spacing between the filters, making them stick together.

This is in prep for adding a new set of filters, which will make each
group visually separated.

Also handles the bolding of text that happens when a filter is selected
by a little css `::before` trick.
 
Before:
<img width="367" height="199" alt="image"
src="https://github.com/user-attachments/assets/107e5f8d-a59b-46c9-ab86-18b240d3eb15"
/>

After:
<img width="379" height="179" alt="image"
src="https://github.com/user-attachments/assets/a02f2810-33a6-40fe-837f-3a3b01243da9"
/>

frontend/src/component/changeRequest/ChangeRequests/ChangeRequestFilters.tsx

@@ -1,22 +1,48 @@
-import { Box, Chip, styled } from '@mui/material';
+import { Box, Chip, styled, type ChipProps } from '@mui/material';
 import { useState, type FC } from 'react';
 
-const StyledChip = styled(Chip)(({ theme }) => ({
-    borderRadius: `${theme.shape.borderRadius}px`,
-    padding: theme.spacing(0.5),
-    fontSize: theme.typography.body2.fontSize,
-    height: 'auto',
-    '&[aria-current="true"]': {
-        backgroundColor: theme.palette.secondary.light,
-        fontWeight: 'bold',
-        borderColor: theme.palette.primary.main,
-        color: theme.palette.primary.main,
-    },
-    ':focus-visible': {
-        outline: `1px solid ${theme.palette.primary.main}`,
-        borderColor: theme.palette.primary.main,
-    },
-}));
+const makeStyledChip = (ariaControlTarget: string) =>
+    styled(({ ...props }: ChipProps) => (
+        <Chip variant='outlined' aria-controls={ariaControlTarget} {...props} />
+    ))<ChipProps>(({ theme, label }) => ({
+        padding: theme.spacing(0.5),
+        fontSize: theme.typography.body2.fontSize,
+        height: 'auto',
+        '&[aria-current="true"]': {
+            backgroundColor: theme.palette.secondary.light,
+            fontWeight: 'bold',
+            borderColor: theme.palette.primary.main,
+            color: theme.palette.primary.main,
+        },
+        ':focus-visible': {
+            outline: `1px solid ${theme.palette.primary.main}`,
+            borderColor: theme.palette.primary.main,
+        },
+
+        borderRadius: 0,
+        '&:first-of-type': {
+            borderTopLeftRadius: theme.shape.borderRadius,
+            borderBottomLeftRadius: theme.shape.borderRadius,
+        },
+        '&:last-of-type': {
+            borderTopRightRadius: theme.shape.borderRadius,
+            borderBottomRightRadius: theme.shape.borderRadius,
+        },
+
+        '& .MuiChip-label': {
+            position: 'relative',
+            textAlign: 'center',
+            '&::before': {
+                content: `'${label}'`,
+                fontWeight: 'bold',
+                visibility: 'hidden',
+                height: 0,
+                display: 'block',
+                overflow: 'hidden',
+                userSelect: 'none',
+            },
+        },
+    }));
 
 export type ChangeRequestQuickFilter = 'Created' | 'Approval Requested';
 
@@ -34,12 +60,11 @@ const Wrapper = styled(Box)(({ theme }) => ({
     gap: theme.spacing(2),
 }));
 
-const StyledContainer = styled(Box)(({ theme }) => ({
+const StyledContainer = styled(Box)({
     display: 'flex',
     alignItems: 'center',
     flexWrap: 'wrap',
-    gap: theme.spacing(1),
-}));
+});
 
 export const ChangeRequestFilters: FC<IChangeRequestFiltersProps> = ({
     onSelectionChange,
@@ -57,22 +82,20 @@ export const ChangeRequestFilters: FC<IChangeRequestFiltersProps> = ({
         onSelectionChange(value);
     };
 
+    const StyledChip = makeStyledChip(ariaControlTarget);
+
     return (
         <Wrapper>
             <StyledContainer>
                 <StyledChip
                     label={'Created'}
-                    variant='outlined'
                     aria-current={selected === 'Created'}
-                    aria-controls={ariaControlTarget}
                     onClick={handleSelectionChange('Created')}
                     title={'Show change requests created by you'}
                 />
                 <StyledChip
                     label={'Approval Requested'}
-                    variant='outlined'
                     aria-current={selected === 'Approval Requested'}
-                    aria-controls={ariaControlTarget}
                     onClick={handleSelectionChange('Approval Requested')}
                     title={'Show change requests requesting your approval'}
                 />