fix(v3-uplift): align the delegation rows to the label's first line

The radio and the amount both centred against the whole label, so on the
combined AAVE + stkAAVE + aAAVE row — the only one that wraps — they sat
between its two lines.

The amount takes align="flex-start". The radio needs more than that:
switching FormControlLabel to flex-start puts the radio's box top at the
label's top, but the control is 36px (an 18px icon inside SwitchBase's
unconditional 9px padding, which size="small" does not shrink once the
theme substitutes a fixed icon) against a 20px text line, so the glyph
would sit 8px low. The label carries that 8px as a top margin instead,
which centres the first line on the glyph. The single-token rows render
identically — centring a 20px label in a 36px box already put its top at
8px.

Also stops the wrap splitting a token from its icon. The icon, the label
and the "+" were three sibling flex items, so each was its own break
opportunity and aAAVE's icon stayed behind on the first line. Each
icon+label pair is now one item; the "+" still breaks freely.

Author: abjt14

src/components/transactions/GovDelegation/DelegationTokenSelector.tsx

@@ -1,5 +1,5 @@
 import { DelegationType } from '@aave/contract-helpers';
-import { FormControlLabel, Radio, RadioGroup, Typography } from '@mui/material';
+import { Box, FormControlLabel, Radio, RadioGroup, Typography } from '@mui/material';
 import FormControl from '@mui/material/FormControl';
 import { Fragment, useEffect } from 'react';
 import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
@@ -43,16 +43,19 @@ export const TokenRow: React.FC<TokenRowProps> = ({ symbol, amount }) => {
 
   return (
     <Row
+      align="flex-start"
       sx={{ width: '100%' }}
       captionSx={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 2 }}
       caption={symbols.map((token, index) => (
         <Fragment key={token}>
-          <TokenIcon
-            aToken={token === 'aAAVE'}
-            symbol={token === 'aAAVE' ? 'aave' : token}
-            sx={{ width: 16, height: 16 }}
-          />
-          <Typography variant="subheader1">{token}</Typography>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+            <TokenIcon
+              aToken={token === 'aAAVE'}
+              symbol={token === 'aAAVE' ? 'aave' : token}
+              sx={{ width: 16, height: 16 }}
+            />
+            <Typography variant="subheader1">{token}</Typography>
+          </Box>
           {index < symbols.length - 1 && <Typography variant="subheader1">+</Typography>}
         </Fragment>
       ))}
@@ -106,8 +109,8 @@ export const DelegationTokenSelector = ({
           setDelegationTokenType(Number(e.target.value) as unknown as DelegationTokenType)
         }
         sx={{
-          '& .MuiFormControlLabel-root': { mr: 0 },
-          '& .MuiFormControlLabel-label': { width: '100%', minWidth: 0 },
+          '& .MuiFormControlLabel-root': { mr: 0, alignItems: 'flex-start' },
+          '& .MuiFormControlLabel-label': { width: '100%', minWidth: 0, mt: '0.5rem' },
         }}
       >
         <FormControlLabel