chore: add spacing to playground header + style segment's no constraints text (#9561)

This adds two small visual changes:
1. Add some spacing to the playground header (so that the custom
strategies info box (or other alerts) get some breathing room. (It
slightly increases the text between the header and the flag result text,
but I'll leave that as is unless we get told otherwise. It's partially
because of extra padding on the close button etc, and will be more work
than I wanna put in right now).

2. Style the "this segment has no constraints" text for empty segments
to use a smaller, less prominent font.


Playground header before:

![image](https://github.com/user-attachments/assets/821b2711-8ab4-4390-8f6b-718c7bd97731)


Playground header after:

![image](https://github.com/user-attachments/assets/08a446a7-7d8f-4c69-b539-b662a6c7be54)


Segments text before:

![image](https://github.com/user-attachments/assets/b5ad60f8-3423-406c-8b48-e28c5190f956)

Segments text after:

![image](https://github.com/user-attachments/assets/f23a640e-dcfd-441d-8fc0-c7a31c6054af)

frontend/src/component/common/SegmentItem/SegmentItem.tsx

@@ -7,7 +7,6 @@ import {
     AccordionSummary,
     Button,
     styled,
-    Typography,
 } from '@mui/material';
 import { StrategyEvaluationItem } from 'component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem';
 import { ConstraintItem } from 'component/common/ConstraintsList/ConstraintItem/ConstraintItem';
@@ -64,6 +63,11 @@ const StyledButton = styled(Button)(({ theme }) => ({
     fontSize: theme.typography.body2.fontSize,
 }));
 
+const StyledNoConstraintsText = styled('p')(({ theme }) => ({
+    fontSize: theme.typography.body2.fontSize,
+    color: theme.palette.text.secondary,
+}));
+
 export const SegmentItem: FC<SegmentItemProps> = ({
     segment,
     isExpanded,
@@ -90,7 +94,11 @@ export const SegmentItem: FC<SegmentItemProps> = ({
             );
         }
 
-        return <Typography>This segment has no constraints.</Typography>;
+        return (
+            <StyledNoConstraintsText>
+                This segment has no constraints.
+            </StyledNoConstraintsText>
+        );
     }, [constraintList, segment.constraints]);
 
     return (

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx

@@ -77,6 +77,9 @@ const LegacyFeatureResultInfoPopoverCell = ({
 const DetailsPadding = styled('div')(({ theme }) => ({
     paddingInline: `var(--popover-inline-padding, ${theme.spacing(4)})`,
     paddingTop: theme.spacing(2.5),
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2),
 }));
 
 export const NewFeatureResultInfoPopoverCell = ({