From dc57587d7bd78f45d9d816d9e2d5509b203ef0c9 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 21 May 2026 10:59:26 +0000
Subject: [PATCH 1/5] fix(website): make floating placeholder label transparent
 in reference selector fields

Agent-Logs-Url: https://github.com/loculus-project/loculus/sessions/33de4b38-0a73-4382-8eff-d9c0fe896295

Co-authored-by: corneliusroemer <25161793+corneliusroemer@users.noreply.github.com>
---
 .../components/SearchPage/fields/TextField.spec.tsx    |  7 +++++++
 website/src/components/SearchPage/fields/TextField.tsx | 10 +++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/website/src/components/SearchPage/fields/TextField.spec.tsx b/website/src/components/SearchPage/fields/TextField.spec.tsx
index f8de47f0dc..2accb0747b 100644
--- a/website/src/components/SearchPage/fields/TextField.spec.tsx
+++ b/website/src/components/SearchPage/fields/TextField.spec.tsx
@@ -31,6 +31,13 @@ describe('TextField', () => {
         expect(handleChange).toHaveBeenCalled();
     });
 
+    it('uses transparent label background in placeholder state', () => {
+        render(<TextField label='Test Field' />);
+
+        const label = screen.getByText('Test Field');
+        expect(label).toHaveClass('peer-placeholder-shown:bg-transparent');
+    });
+
     it('strips newlines on paste in single-line input', () => {
         const handleChange = vi.fn();
         render(<TextField label='Test Field' onChange={handleChange} />);
diff --git a/website/src/components/SearchPage/fields/TextField.tsx b/website/src/components/SearchPage/fields/TextField.tsx
index ba99511c18..0392260ccc 100644
--- a/website/src/components/SearchPage/fields/TextField.tsx
+++ b/website/src/components/SearchPage/fields/TextField.tsx
@@ -27,6 +27,7 @@ interface TextFieldProps {
 
 const helperTextClasses = getTheme().floatingLabel.helperText.default;
 const inputClasses = getTheme().floatingLabel.input.default.outlined.md;
+const labelClasses = getTheme().floatingLabel.label.default.outlined.md;
 
 export const TextField = forwardRef<HTMLInputElement | HTMLTextAreaElement, TextFieldProps>(function (props, ref) {
     const { label, disabled, onChange, autoComplete, fieldValue, className, onFocus, multiline, onBlur } = props;
@@ -138,6 +139,13 @@ export const TextField = forwardRef<HTMLInputElement | HTMLTextAreaElement, Text
                                 },
                             },
                         },
+                        label: {
+                            default: {
+                                outlined: {
+                                    md: `${labelClasses} peer-placeholder-shown:bg-transparent peer-placeholder-shown:dark:bg-transparent`,
+                                },
+                            },
+                        },
                     }}
                     {...inputProps}
                     variant='outlined'
@@ -173,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-white dark:bg-gray-900 px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 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:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:bg-transparent peer-placeholder-shown:dark: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>

From 3bce784763de6746d4fc4ad97034d70d38a9d094 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 21 May 2026 11:01:14 +0000
Subject: [PATCH 2/5] test(website): strengthen text field placeholder label
 class assertion

Agent-Logs-Url: https://github.com/loculus-project/loculus/sessions/33de4b38-0a73-4382-8eff-d9c0fe896295

Co-authored-by: corneliusroemer <25161793+corneliusroemer@users.noreply.github.com>
---
 website/src/components/SearchPage/fields/TextField.spec.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/website/src/components/SearchPage/fields/TextField.spec.tsx b/website/src/components/SearchPage/fields/TextField.spec.tsx
index 2accb0747b..e7bee7eea3 100644
--- a/website/src/components/SearchPage/fields/TextField.spec.tsx
+++ b/website/src/components/SearchPage/fields/TextField.spec.tsx
@@ -31,11 +31,12 @@ describe('TextField', () => {
         expect(handleChange).toHaveBeenCalled();
     });
 
-    it('uses transparent label background in placeholder state', () => {
+    it('applies transparent background classes to label 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('peer-placeholder-shown:dark:bg-transparent');
     });
 
     it('strips newlines on paste in single-line input', () => {

From 8aa37c5724db9e0ccf47150df7480a62f3b205d2 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 21 May 2026 11:22:30 +0000
Subject: [PATCH 3/5] fix(website): keep floated TextField label background
 opaque on focus

Agent-Logs-Url: https://github.com/loculus-project/loculus/sessions/7d2b8a07-dd6a-44da-bd63-3d0493768f9e

Co-authored-by: corneliusroemer <25161793+corneliusroemer@users.noreply.github.com>
---
 website/src/components/SearchPage/fields/TextField.spec.tsx | 2 ++
 website/src/components/SearchPage/fields/TextField.tsx      | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/website/src/components/SearchPage/fields/TextField.spec.tsx b/website/src/components/SearchPage/fields/TextField.spec.tsx
index e7bee7eea3..c3e635312a 100644
--- a/website/src/components/SearchPage/fields/TextField.spec.tsx
+++ b/website/src/components/SearchPage/fields/TextField.spec.tsx
@@ -37,6 +37,8 @@ describe('TextField', () => {
         const label = screen.getByText('Test Field');
         expect(label).toHaveClass('peer-placeholder-shown:bg-transparent');
         expect(label).toHaveClass('peer-placeholder-shown:dark:bg-transparent');
+        expect(label).toHaveClass('peer-focus:bg-white');
+        expect(label).toHaveClass('peer-focus:dark:bg-gray-900');
     });
 
     it('strips newlines on paste in single-line input', () => {
diff --git a/website/src/components/SearchPage/fields/TextField.tsx b/website/src/components/SearchPage/fields/TextField.tsx
index 0392260ccc..bacf7e464d 100644
--- a/website/src/components/SearchPage/fields/TextField.tsx
+++ b/website/src/components/SearchPage/fields/TextField.tsx
@@ -142,7 +142,7 @@ export const TextField = forwardRef<HTMLInputElement | HTMLTextAreaElement, Text
                         label: {
                             default: {
                                 outlined: {
-                                    md: `${labelClasses} peer-placeholder-shown:bg-transparent peer-placeholder-shown:dark:bg-transparent`,
+                                    md: `${labelClasses} peer-placeholder-shown:bg-transparent peer-placeholder-shown:dark: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-white dark:bg-gray-900 px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:bg-transparent peer-placeholder-shown:dark: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:dark: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>

From d4b0b0da03b3c7ba23a5e8b13dda10598dc3768a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 21 May 2026 11:29:34 +0000
Subject: [PATCH 4/5] fix(website): use bg-inherit for floated TextField label
 to match parent container background

Agent-Logs-Url: https://github.com/loculus-project/loculus/sessions/80e0b6ea-a7d4-474b-aceb-05f7e1ffed43

Co-authored-by: corneliusroemer <25161793+corneliusroemer@users.noreply.github.com>
---
 website/src/components/SearchPage/fields/TextField.spec.tsx | 6 ++----
 website/src/components/SearchPage/fields/TextField.tsx      | 4 ++--
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/website/src/components/SearchPage/fields/TextField.spec.tsx b/website/src/components/SearchPage/fields/TextField.spec.tsx
index c3e635312a..c9a5f26efe 100644
--- a/website/src/components/SearchPage/fields/TextField.spec.tsx
+++ b/website/src/components/SearchPage/fields/TextField.spec.tsx
@@ -35,10 +35,8 @@ describe('TextField', () => {
         render(<TextField label='Test Field' />);
 
         const label = screen.getByText('Test Field');
-        expect(label).toHaveClass('peer-placeholder-shown:bg-transparent');
-        expect(label).toHaveClass('peer-placeholder-shown:dark:bg-transparent');
-        expect(label).toHaveClass('peer-focus:bg-white');
-        expect(label).toHaveClass('peer-focus:dark:bg-gray-900');
+        expect(label).toHaveClass('peer-placeholder-shown:!bg-transparent');
+        expect(label).toHaveClass('!bg-inherit');
     });
 
     it('strips newlines on paste in single-line input', () => {
diff --git a/website/src/components/SearchPage/fields/TextField.tsx b/website/src/components/SearchPage/fields/TextField.tsx
index bacf7e464d..7c0f6e6203 100644
--- a/website/src/components/SearchPage/fields/TextField.tsx
+++ b/website/src/components/SearchPage/fields/TextField.tsx
@@ -142,7 +142,7 @@ export const TextField = forwardRef<HTMLInputElement | HTMLTextAreaElement, Text
                         label: {
                             default: {
                                 outlined: {
-                                    md: `${labelClasses} peer-placeholder-shown:bg-transparent peer-placeholder-shown:dark:bg-transparent peer-focus:bg-white peer-focus:dark:bg-gray-900`,
+                                    md: `${labelClasses} !bg-inherit peer-placeholder-shown:!bg-transparent peer-focus:!bg-inherit`,
                                 },
                             },
                         },
@@ -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-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:dark: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-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:dark: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>

From 6381b076ac6256790a588f98aa868e324917be30 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 21 May 2026 11:30:22 +0000
Subject: [PATCH 5/5] fix(website): use !bg-inherit consistently for multiline
 label to match single-line

Agent-Logs-Url: https://github.com/loculus-project/loculus/sessions/80e0b6ea-a7d4-474b-aceb-05f7e1ffed43

Co-authored-by: corneliusroemer <25161793+corneliusroemer@users.noreply.github.com>
---
 website/src/components/SearchPage/fields/TextField.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/website/src/components/SearchPage/fields/TextField.tsx b/website/src/components/SearchPage/fields/TextField.tsx
index 7c0f6e6203..f840e0c636 100644
--- a/website/src/components/SearchPage/fields/TextField.tsx
+++ b/website/src/components/SearchPage/fields/TextField.tsx
@@ -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:dark: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-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`}
             >
                 {label}
             </label>