From 1b07495946f69fc772b0debb0cbb3a09d93a0c16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Fri, 9 Oct 2026 09:44:35 +0200
Subject: [PATCH] Show label validation in a popover

So it looks the same as the assignee input. Both popovers now open
above the input when there's room for the full list and below it
otherwise, instead of switching sides depending on how many results
there are.
---
 src/components/AssigneeInput.svelte | 38 ++---------------------
 src/components/LabelInput.svelte    | 48 ++++++++++++++++++++---------
 src/lib/inputPopover.ts             | 44 ++++++++++++++++++++++++++
 3 files changed, 80 insertions(+), 50 deletions(-)
 create mode 100644 src/lib/inputPopover.ts

diff --git a/src/components/AssigneeInput.svelte b/src/components/AssigneeInput.svelte
index b1583e924..0bb8462ee 100644
--- a/src/components/AssigneeInput.svelte
+++ b/src/components/AssigneeInput.svelte
@@ -1,15 +1,6 @@
 <script lang="ts">
   import type { Author } from "@bindings/cob/Author";
 
-  import {
-    autoUpdate,
-    computePosition,
-    flip,
-    hide,
-    offset,
-    shift,
-    size,
-  } from "@floating-ui/dom";
   import debounce from "lodash/debounce";
 
   import type { AssigneeSuggestion } from "@app/lib/assigneeSuggestions";
@@ -17,6 +8,7 @@
     matchesAssignee,
     rankAssigneeSuggestions,
   } from "@app/lib/assigneeSuggestions";
+  import { positionInputPopover } from "@app/lib/inputPopover";
   import { parseAssignee } from "@app/lib/inputValidation";
   import { cachedSearchAliases, invoke } from "@app/lib/invoke";
   import { portal } from "@app/lib/portal";
@@ -131,33 +123,7 @@
 
   $effect(() => {
     if (!panelVisible || !floatingEl || !anchorEl) return;
-    const reference = anchorEl;
-    const floating = floatingEl;
-
-    return autoUpdate(reference, floating, () => {
-      void computePosition(reference, floating, {
-        placement: "bottom-start",
-        middleware: [
-          offset(8),
-          flip(),
-          shift({ padding: 8 }),
-          hide({ padding: 8 }),
-          size({
-            padding: 8,
-            apply({ availableHeight, rects, elements }) {
-              elements.floating.style.minWidth = `${rects.reference.width}px`;
-              elements.floating.style.maxHeight = `${Math.min(availableHeight, 384)}px`;
-            },
-          }),
-        ],
-      }).then(({ x, y, middlewareData }) => {
-        floating.style.left = `${x}px`;
-        floating.style.top = `${y}px`;
-        floating.style.visibility = middlewareData.hide?.referenceHidden
-          ? "hidden"
-          : "visible";
-      });
-    });
+    return positionInputPopover(anchorEl, floatingEl);
   });
 
   $effect(() => {
diff --git a/src/components/LabelInput.svelte b/src/components/LabelInput.svelte
index 94da1228b..ba43397da 100644
--- a/src/components/LabelInput.svelte
+++ b/src/components/LabelInput.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
+  import { positionInputPopover } from "@app/lib/inputPopover";
   import { labelError } from "@app/lib/inputValidation";
+  import { portal } from "@app/lib/portal";
 
   import Button from "@app/components/Button.svelte";
   import Icon from "@app/components/Icon.svelte";
@@ -31,6 +33,16 @@
 
   let removeToggles: Record<string, boolean> = $state({});
 
+  let anchorEl: HTMLDivElement | undefined = $state();
+  let floatingEl: HTMLDivElement | undefined = $state();
+
+  const panelVisible = $derived(showInput && validationMessage !== undefined);
+
+  $effect(() => {
+    if (!panelVisible || !floatingEl || !anchorEl) return;
+    return positionInputPopover(anchorEl, floatingEl);
+  });
+
   $effect(() => {
     // Reset component state whenever the labels change in the parent. This
     // happens when the issue ID changes for example when the user navigates
@@ -64,13 +76,23 @@
     flex-wrap: wrap;
     gap: 0.5rem;
   }
+  .popover {
+    position: fixed;
+    top: 0;
+    left: 0;
+    visibility: hidden;
+    z-index: 400;
+    max-width: 28rem;
+    padding: 0.25rem;
+    border: 1px solid var(--color-border-subtle);
+    border-radius: var(--border-radius-md);
+    background-color: var(--color-surface-canvas);
+    box-shadow: var(--elevation-low);
+  }
   .validation-message {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    color: var(--color-feedback-error-text);
-    position: relative;
-    margin-top: 0.5rem;
+    padding: 0.375rem 0.5rem;
+    color: var(--color-text-secondary);
+    font: var(--txt-body-m-regular);
   }
   .removable-label {
     display: flex;
@@ -113,15 +135,19 @@
   <div class="row">
     {#if showInput}
       <div class="input-row">
-        <div style:flex="1" style:min-width="0">
+        <div style:flex="1" style:min-width="0" bind:this={anchorEl}>
           <TextInput
             autofocus
-            {valid}
             disabled={submitInProgress}
             placeholder="Add label"
             bind:value={inputValue}
             onSubmit={addLabel} />
         </div>
+        {#if panelVisible}
+          <div class="popover" bind:this={floatingEl} use:portal>
+            <div class="validation-message">{validationMessage}</div>
+          </div>
+        {/if}
         <Button
           variant="outline"
           onclick={() => {
@@ -160,10 +186,4 @@
       {/if}
     {/each}
   </div>
-
-  {#if !valid && validationMessage}
-    <div class="validation-message">
-      <Icon name="warning" />{validationMessage}
-    </div>
-  {/if}
 {/if}
diff --git a/src/lib/inputPopover.ts b/src/lib/inputPopover.ts
new file mode 100644
index 000000000..2e458a048
--- /dev/null
+++ b/src/lib/inputPopover.ts
@@ -0,0 +1,44 @@
+import {
+  autoUpdate,
+  computePosition,
+  hide,
+  offset,
+  shift,
+  size,
+} from "@floating-ui/dom";
+
+const gap = 8;
+const padding = 8;
+const maxHeight = 384;
+
+export function positionInputPopover(
+  reference: HTMLElement,
+  floating: HTMLElement,
+): () => void {
+  return autoUpdate(reference, floating, () => {
+    const spaceAbove = reference.getBoundingClientRect().top - gap - padding;
+    const placement = spaceAbove >= maxHeight ? "top-start" : "bottom-start";
+
+    void computePosition(reference, floating, {
+      placement,
+      middleware: [
+        offset(gap),
+        shift({ padding }),
+        hide({ padding }),
+        size({
+          padding,
+          apply({ availableHeight, rects, elements }) {
+            elements.floating.style.minWidth = `${rects.reference.width}px`;
+            elements.floating.style.maxHeight = `${Math.min(availableHeight, maxHeight)}px`;
+          },
+        }),
+      ],
+    }).then(({ x, y, middlewareData }) => {
+      floating.style.left = `${x}px`;
+      floating.style.top = `${y}px`;
+      floating.style.visibility = middlewareData.hide?.referenceHidden
+        ? "hidden"
+        : "visible";
+    });
+  });
+}