From 9b551d2fafc2889a674f596eccadfca97e6365fc Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Fri, 8 May 2026 17:19:04 +0100
Subject: [PATCH 1/2] feat(website): make error tooltip direction configurable
 in AdvancedQueryFilter

Adds an optional `errorTooltipClass` prop to `AdvancedQueryFilter` (and
the internal `ErrorIconWithTooltip`) so callers can control which
direction the validation error tooltip opens. Defaults to the original
`tooltip-left lg:tooltip-right` so existing usages are unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../genspectrum/AdvancedQueryFilter.tsx       | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/website/src/components/genspectrum/AdvancedQueryFilter.tsx b/website/src/components/genspectrum/AdvancedQueryFilter.tsx
index 3a51bf488..27925709a 100644
--- a/website/src/components/genspectrum/AdvancedQueryFilter.tsx
+++ b/website/src/components/genspectrum/AdvancedQueryFilter.tsx
@@ -19,9 +19,17 @@ type AdvancedQueryFilterProps = {
     onInput?: (newValue: string | undefined) => void;
     enabled: boolean;
     lapisUrl: string;
+    /**
+     * Tailwind classes controlling the direction of the validation error tooltip.
+     * Defaults to `'tooltip-left lg:tooltip-right'`.
+     *
+     * Common values: `tooltip-left`, `tooltip-right`, `tooltip-top`, `tooltip-bottom`.
+     * Responsive variants are also valid, e.g. `'tooltip-left lg:tooltip-right'`.
+     */
+    errorTooltipClass?: string;
 };
 
-export const AdvancedQueryFilter: FC<AdvancedQueryFilterProps> = ({ value, onInput, enabled, lapisUrl }) => {
+export const AdvancedQueryFilter: FC<AdvancedQueryFilterProps> = ({ value, onInput, enabled, lapisUrl, errorTooltipClass }) => {
     const [inputValue, setInputValue] = useState(value);
     const [validationState, setValidationState] = useState<ValidationState>({ type: 'idle' });
     const userEditedRef = useRef(false);
@@ -94,17 +102,20 @@ export const AdvancedQueryFilter: FC<AdvancedQueryFilterProps> = ({ value, onInp
                 />
                 {isValidating && <span className='loading loading-spinner loading-xs' title='Validating' />}
                 {isValid && <div className='iconify mdi--check text-success size-4' title='Advanced query is valid' />}
-                {isError && <ErrorIconWithTooltip message={validationState.message} />}
+                {isError && <ErrorIconWithTooltip message={validationState.message} tooltipClass={errorTooltipClass} />}
             </label>
         </div>
     );
 };
 
-const ErrorIconWithTooltip: FC<{ message: string }> = ({ message }) => {
+const ErrorIconWithTooltip: FC<{ message: string; tooltipClass?: string }> = ({
+    message,
+    tooltipClass = 'tooltip-left lg:tooltip-right',
+}) => {
     const [isOpen, setIsOpen] = useState(false);
 
     return (
-        <div className={`tooltip tooltip-left lg:tooltip-right z-1000 ${isOpen ? 'tooltip-open' : ''}`}>
+        <div className={`tooltip ${tooltipClass} z-1000 ${isOpen ? 'tooltip-open' : ''}`}>
             <div className='tooltip-content z-1000'>
                 <div className='flex items-start gap-1'>
                     <span>{message}</span>

From 14bfcb7befafabe3b849911aa777a0f42703a2e5 Mon Sep 17 00:00:00 2001
From: Felix Hennig <mail@felixhennig.com>
Date: Fri, 8 May 2026 17:29:50 +0100
Subject: [PATCH 2/2] format

---
 .../src/components/genspectrum/AdvancedQueryFilter.tsx    | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/website/src/components/genspectrum/AdvancedQueryFilter.tsx b/website/src/components/genspectrum/AdvancedQueryFilter.tsx
index 27925709a..c398ab5ee 100644
--- a/website/src/components/genspectrum/AdvancedQueryFilter.tsx
+++ b/website/src/components/genspectrum/AdvancedQueryFilter.tsx
@@ -29,7 +29,13 @@ type AdvancedQueryFilterProps = {
     errorTooltipClass?: string;
 };
 
-export const AdvancedQueryFilter: FC<AdvancedQueryFilterProps> = ({ value, onInput, enabled, lapisUrl, errorTooltipClass }) => {
+export const AdvancedQueryFilter: FC<AdvancedQueryFilterProps> = ({
+    value,
+    onInput,
+    enabled,
+    lapisUrl,
+    errorTooltipClass,
+}) => {
     const [inputValue, setInputValue] = useState(value);
     const [validationState, setValidationState] = useState<ValidationState>({ type: 'idle' });
     const userEditedRef = useRef(false);