fix(web): keep the image-ref conflict indicator from reflowing the form
Build / build (push) Successful in 11m30s
Build / build (push) Successful in 11m30s
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.
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user