From 6492944c8f78ca60d0e44d0cfb78b032e9de88b2 Mon Sep 17 00:00:00 2001
From: "alexei.dolgolyov" <dolgolyov.alexei@gmail.com>
Date: Mon, 8 Jun 2026 16:13:30 +0300
Subject: [PATCH] fix(web): keep the image-ref conflict indicator from
 reflowing the form
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Move the conflict-checking hint inside the image-ref field as an
absolutely-positioned overlay so a blur→check→clear cycle no longer
shifts the rows below it on the /apps/new wizard.
---
 .../workload/ImageSourceForm.svelte           | 102 ++++++++++++------
 1 file changed, 72 insertions(+), 30 deletions(-)

diff --git a/web/src/lib/components/workload/ImageSourceForm.svelte b/web/src/lib/components/workload/ImageSourceForm.svelte
index 343f135..da58168 100644
--- a/web/src/lib/components/workload/ImageSourceForm.svelte
+++ b/web/src/lib/components/workload/ImageSourceForm.svelte
@@ -219,18 +219,34 @@
 			>{$t('apps.new.imageRefLabel')}<span class="req-star" aria-label={$t('apps.new.fieldRequired')}>*</span></span
 		>
 		<div class="input-with-button">
-			<input
-				id="app-image-ref"
-				type="text"
-				class="input mono"
-				bind:value={form.ref}
-				oninput={onImageRefInput}
-				onblur={onImageRefBlur}
-				placeholder={$t('apps.new.imageRefPlaceholder')}
-				autocomplete="off"
-				spellcheck="false"
-				required
-			/>
+			<div class="input-wrap">
+				<input
+					id="app-image-ref"
+					type="text"
+					class="input mono"
+					bind:value={form.ref}
+					oninput={onImageRefInput}
+					onblur={onImageRefBlur}
+					placeholder={$t('apps.new.imageRefPlaceholder')}
+					autocomplete="off"
+					spellcheck="false"
+					required
+				/>
+				<!--
+					Conflict-lookup affordance lives INSIDE the field as an
+					absolutely-positioned overlay, so a blur → check → clear
+					cycle never reflows the rows below it. (The old inline hint
+					sat in normal flow and flashed in/out, shifting the whole
+					form.) A left fade masks ref text behind it; the aria-live
+					region still announces the lookup to assistive tech.
+				-->
+				{#if enableConflicts && conflictLoading}
+					<span class="conflict-checking" role="status" aria-live="polite">
+						<IconLoader size={12} />
+						<span>{$t('apps.new.imageConflictChecking')}</span>
+					</span>
+				{/if}
+			</div>
 			<button
 				type="button"
 				class="discover-btn"
@@ -265,18 +281,6 @@
 		{:else if inspectStatus === 'error'}
 			<span class="discover-pill discover-pill-bad inline">{$t('apps.new.errors.inspectFailed')}</span>
 		{/if}
-		<!--
-			Conflict-checking indicator. Reserves no layout when idle and is a
-			quiet inline hint (not the full panel) while a lookup is in flight,
-			so a no-conflict blur no longer flashes the warning panel in then
-			out. The panel itself renders only for REAL conflicts below.
-		-->
-		{#if enableConflicts && conflictLoading}
-			<span class="conflict-checking" role="status" aria-live="polite">
-				<IconLoader size={12} />
-				<span>{$t('apps.new.imageConflictChecking')}</span>
-			</span>
-		{/if}
 	</label>
 	{#if enableConflicts && conflicts.length > 0}
 		<div class="conflict-panel" role="status" aria-live="polite">
@@ -551,7 +555,18 @@
 		align-items: stretch;
 		gap: 0.4rem;
 	}
-	.input-with-button > .input {
+	.input-with-button > .input-wrap {
+		flex: 1;
+		min-width: 0;
+	}
+	/* Wrapper exists only to anchor the absolute conflict-checking overlay to
+	   the field's box (inputs can't host positioned children themselves). */
+	.input-wrap {
+		position: relative;
+		display: flex;
+		min-width: 0;
+	}
+	.input-wrap > .input {
 		flex: 1;
 		min-width: 0;
 	}
@@ -649,20 +664,32 @@
 		border-radius: var(--radius-sm);
 		line-height: 1;
 	}
-	/* Quiet inline "checking…" hint shown near the image-ref input while a
-	   conflict lookup is in flight. Deliberately NOT the full panel, so a
-	   no-conflict blur doesn't flash a panel in and out. Self-aligned so it
-	   sits with the inspect status pills without shifting form layout. */
+	/* Quiet "checking…" affordance shown while a conflict lookup is in flight.
+	   Pinned as an absolute overlay inside the image-ref field's right edge so
+	   it sits ENTIRELY out of document flow — toggling it on a blur → check →
+	   clear cycle can no longer reflow the form rows beneath it (the old
+	   in-flow hint flashed in/out and shifted the whole form). The left fade
+	   lets a long ref scroll cleanly under the pill instead of hard-cutting,
+	   and pointer-events:none keeps the field fully clickable underneath. */
 	.conflict-checking {
+		position: absolute;
+		top: 50%;
+		right: 0.5rem;
+		transform: translateY(-50%);
 		display: inline-flex;
 		align-items: center;
 		gap: 0.35rem;
-		align-self: flex-start;
+		padding: 0.28rem 0.55rem 0.28rem 1.6rem;
+		border-radius: var(--radius-md);
+		background: linear-gradient(90deg, transparent, var(--surface-input) 1.1rem);
 		font-family: var(--forge-mono);
 		font-size: 0.62rem;
 		font-weight: 600;
 		letter-spacing: 0.06em;
 		color: var(--text-tertiary);
+		white-space: nowrap;
+		pointer-events: none;
+		animation: cc-fade-in 140ms ease-out;
 	}
 	.conflict-checking :global(svg) {
 		animation: spin 0.9s linear infinite;
@@ -672,6 +699,21 @@
 			transform: rotate(360deg);
 		}
 	}
+	@keyframes cc-fade-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+	/* Respect users who opt out of motion: no spin, no fade. */
+	@media (prefers-reduced-motion: reduce) {
+		.conflict-checking,
+		.conflict-checking :global(svg) {
+			animation: none;
+		}
+	}
 	.conflict-heading {
 		margin: 0;
 		font-size: 0.84rem;