From df4d839577b69d90246f494949783ce212677db8 Mon Sep 17 00:00:00 2001
From: David Hill <iamdavidhill@gmail.com>
Date: Sat, 24 Jan 2026 21:05:10 +0000
Subject: [PATCH] fix(app): position status circle inside input wrapper and fix
 dialog padding

---
 .../src/components/dialog-select-server.tsx   | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/components/dialog-select-server.tsx b/packages/app/src/components/dialog-select-server.tsx
index f15b68457..99fd22162 100644
--- a/packages/app/src/components/dialog-select-server.tsx
+++ b/packages/app/src/components/dialog-select-server.tsx
@@ -54,14 +54,25 @@ async function checkHealth(url: string, platform: ReturnType<typeof usePlatform>
 function AddRow(props: AddRowProps) {
   return (
     <div class="flex items-center px-4 min-h-14 py-3 min-w-0 flex-1">
-      <div class="relative flex-1 min-w-0">
+      <div class="flex-1 min-w-0 [&_[data-slot=input-wrapper]]:relative">
         <div
           classList={{
-            "size-1.5 rounded-full absolute left-3 top-1/2 -translate-y-1/2": true,
+            "size-1.5 rounded-full absolute left-3 z-10 pointer-events-none": true,
             "bg-icon-success-base": props.status === true,
             "bg-icon-critical-base": props.status === false,
             "bg-border-weak-base": props.status === undefined,
           }}
+          style={{ top: "50%", transform: "translateY(-50%)" }}
+          ref={(el) => {
+            // Position relative to input-wrapper
+            requestAnimationFrame(() => {
+              const wrapper = el.parentElement?.querySelector('[data-slot="input-wrapper"]')
+              if (wrapper instanceof HTMLElement) {
+                wrapper.style.position = "relative"
+                wrapper.appendChild(el)
+              }
+            })
+          }}
         />
         <TextField
           type="text"
@@ -346,7 +357,7 @@ export function DialogSelectServer() {
 
   return (
     <Dialog title={language.t("dialog.server.title")}>
-      <div class="flex flex-col gap-2 pb-5">
+      <div class="flex flex-col gap-2">
         <List
           search={{ placeholder: language.t("dialog.server.search.placeholder"), autofocus: false }}
           noInitialSelection
@@ -546,7 +557,7 @@ export function DialogSelectServer() {
           }}
         </List>
 
-        <div class="px-5">
+        <div class="px-5 pb-5">
           <Button
             variant="secondary"
             icon="plus-small"