fix(website): restore floated text field label background (#6505)

Fixes regression from #6482, where labels became transparent in the
floated state for wrapped search text fields.

Before:

<img width="305" height="102" alt="Google Chrome 2026-05-27 15 37 28"
src="https://github.com/user-attachments/assets/da19b6ad-49ad-42b0-9c87-7aa97a08a9dc"
/>

After:

<img width="268" height="74" alt="Google Chrome 2026-05-27 15 39 52"
src="https://github.com/user-attachments/assets/14f24589-3743-4bef-b1df-f514890a53bd"
/>

🚀 Preview: https://fix-label-transp.loculus.org

Author: corneliusroemer

website/src/components/SearchPage/fields/TextField.spec.tsx

@@ -31,12 +31,22 @@ describe('TextField', () => {
         expect(handleChange).toHaveBeenCalled();
     });
 
-    it('applies transparent background classes to label in placeholder state', () => {
+    it('applies transparent background only in placeholder state', () => {
         render(<TextField label='Test Field' />);
 
         const label = screen.getByText('Test Field');
         expect(label).toHaveClass('peer-placeholder-shown:!bg-transparent');
-        expect(label).toHaveClass('!bg-inherit');
+        expect(label).toHaveClass('!bg-white');
+        expect(label).toHaveClass('peer-focus:!bg-white');
+    });
+
+    it('applies transparent background only in placeholder state for multiline labels', () => {
+        render(<TextField label='Test Field' multiline={true} />);
+
+        const label = screen.getByText('Test Field');
+        expect(label).toHaveClass('peer-placeholder-shown:!bg-transparent');
+        expect(label).toHaveClass('!bg-white');
+        expect(label).toHaveClass('peer-focus:!bg-white');
     });
 
     it('strips newlines on paste in single-line input', () => {

website/src/components/SearchPage/fields/TextField.tsx

@@ -142,7 +142,7 @@ export const TextField = forwardRef<HTMLInputElement | HTMLTextAreaElement, Text
                         label: {
                             default: {
                                 outlined: {
-                                    md: `${labelClasses} !bg-inherit peer-placeholder-shown:!bg-transparent peer-focus:!bg-inherit`,
+                                    md: `${labelClasses} !bg-white dark:!bg-gray-900 peer-placeholder-shown:!bg-transparent peer-focus:!bg-white peer-focus:dark:!bg-gray-900`,
                                 },
                             },
                         },
@@ -181,7 +181,7 @@ export const TextField = forwardRef<HTMLInputElement | HTMLTextAreaElement, Text
                 htmlFor={id}
                 className={`absolute text-sm text-gray-500 dark:text-gray-400 pointer-events-none ${
                     isTransitionEnabled ? 'duration-300' : ''
-                } transform -translate-y-3 scale-75 top-1 z-10 origin-[0] !bg-inherit px-2 peer-focus:px-2 peer-focus:!bg-inherit peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:!bg-transparent peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-1 peer-focus:scale-75 peer-focus:-translate-y-3 start-1 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto`}
+                } transform -translate-y-3 scale-75 top-1 z-10 origin-[0] !bg-white dark:!bg-gray-900 px-2 peer-focus:px-2 peer-focus:!bg-white peer-focus:dark:!bg-gray-900 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:!bg-transparent peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-1 peer-focus:scale-75 peer-focus:-translate-y-3 start-1 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto`}
             >
                 {label}
             </label>