fix(website): center svg icon on review card (#6611)

Resolves #6612 svg icon not centered.

Before:

<img width="350" height="132" alt="iTerm2 2026-06-03 11 30 54"
src="https://github.com/user-attachments/assets/4054f96b-68a7-4aa7-b6fc-06af33e825c8"
/>

After:

<img width="182" height="62" alt="Google Chrome 2026-06-03 11 36 06"
src="https://github.com/user-attachments/assets/244a0841-c557-4a13-942f-009f76d5a152"
/>

Also fixes that we add the literal css class `undefined` when
`extraStyle` is not passed to `KeyValueComponent` (and hence
`undefined`) on the review page.

🚀 Preview: https://fix-undefined-style.loculus.org

Author: corneliusroemer

website/src/components/ReviewPage/ReviewCard.tsx

@@ -461,18 +461,21 @@ const KeyValueComponent: FC<KeyValueComponentProps> = ({
     return (
         <div className={`flex flex-col m-2 `}>
             <span className={keyStyle ?? 'text-gray-500 uppercase text-xs'}>{keyName}</span>
-            <span className={`text-base ${extraStyle}`}>
+            <span className={`text-base ${extraStyle ?? ''}`}>
                 <span
                     ref={textRef}
-                    className={`${textColor} ${disableTruncate ? '' : 'truncate max-w-xs inline-block'}`}
+                    className={`${textColor} ${disableTruncate ? '' : 'truncate max-w-xs inline-block align-middle'}`}
                     data-tooltip-id={showTooltip ? textTooltipId : undefined}
                 >
                     {value}
                 </span>
                 {showTooltip && <CustomTooltip id={textTooltipId} content={tooltipContent} />}
                 {secondaryMessages !== undefined && (
                     <>
-                        <Note className='text-yellow-500 inline-block' data-tooltip-id={noteTooltipId} />
+                        <Note
+                            className='text-yellow-500 inline-block align-middle ml-1'
+                            data-tooltip-id={noteTooltipId}
+                        />
                         <CustomTooltip
                             id={noteTooltipId}
                             content={secondaryMessages.map((annotation) => annotation.message).join(', ')}