fix(ui): prevent slug field error tooltip from hiding lock button (#15885)

Moves the slug field's `Generate` / `Lock` / `Unlock` buttons inside the
input (via `TextInput`'s `AfterInput` slot) so the validation error
tooltip - which renders above the field - no longer covers them and
locks the user out of unlocking the input.

The input reserves space with `padding-inline-end` so long values don't
run under the buttons.

Fixes #14827.

#### Before
<img width="1079" height="127" alt="before"
src="https://github.com/user-attachments/assets/e4184308-7a92-421b-b9a1-76470e9b8132"
/>

### After
<img width="652" height="195" alt="Screenshot 2026-07-07 at 10 43 14 AM"
src="https://github.com/user-attachments/assets/e4a2d1b9-f0fc-4d5a-933d-48ac1e082bff"
/>

<img width="647" height="197" alt="Screenshot 2026-07-07 at 10 43 31 AM"
src="https://github.com/user-attachments/assets/d0fbaf69-06ba-43c9-b3a9-85488c7347e5"
/>

##### With long text
<img width="420" height="202" alt="Screenshot 2026-07-07 at 11 53 47 AM"
src="https://github.com/user-attachments/assets/3c2b8707-a6b1-43cb-82d1-ac14f71d9806"
/>

---------

Co-authored-by: Patrik Kozak <35232443+PatrikKozak@users.noreply.github.com>

Author: noahbachmann

packages/ui/src/fields/Slug/index.scss

@@ -9,9 +9,25 @@
       gap: calc(var(--base) / 2);
     }
 
+    // Buttons sit inside the input, pinned to the right.
+    &__actions {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      inset-inline-end: calc(var(--base) / 2);
+      display: flex;
+      align-items: center;
+      gap: calc(var(--base) / 2);
+    }
+
+    // Reserve room for the buttons so long values never run under them.
+    .field-type.text:not(.has-many) input {
+      padding-inline-end: calc(var(--base) * 6);
+    }
+
     .lock-button {
       margin: 0;
-      padding-bottom: 0.3125rem;
+      padding: 0;
     }
   }
 }

packages/ui/src/fields/Slug/index.tsx

@@ -27,7 +27,7 @@ export const SlugField: React.FC<SlugFieldClientProps> = ({ field, path, useAsSl
 
   const { slugify } = useServerFunctions()
 
-  const { setValue, value } = useField<string>({ path: path || field.name })
+  const { setValue, showError, value } = useField<string>({ path: path || field.name })
 
   const { getData, getDataByPath } = useForm()
 
@@ -75,21 +75,36 @@ export const SlugField: React.FC<SlugFieldClientProps> = ({ field, path, useAsSl
     <div className="field-type slug-field-component">
       <div className="label-wrapper">
         <FieldLabel htmlFor={`field-${path}`} label={label} />
-        {!readOnlyFromProps && !isLocked && (
-          <Button buttonStyle="none" className="lock-button" onClick={handleGenerate}>
-            {t('authentication:generate')}
-          </Button>
-        )}
-        {!readOnlyFromProps && (
-          <Button buttonStyle="none" className="lock-button" onClick={toggleLock}>
-            {isLocked ? t('general:unlock') : t('general:lock')}
-          </Button>
-        )}
       </div>
       <TextInput
+        AfterInput={
+          readOnlyFromProps ? undefined : (
+            <div className="slug-field-component__actions">
+              {!isLocked && (
+                <Button
+                  buttonStyle="none"
+                  className="lock-button"
+                  id={`field-${path}-generate`}
+                  onClick={handleGenerate}
+                >
+                  {t('authentication:generate')}
+                </Button>
+              )}
+              <Button
+                buttonStyle="none"
+                className="lock-button"
+                id={`field-${path}-lock`}
+                onClick={toggleLock}
+              >
+                {isLocked ? t('general:unlock') : t('general:lock')}
+              </Button>
+            </div>
+          )
+        }
         onChange={setValue}
         path={path || field.name}
         readOnly={Boolean(readOnlyFromProps || isLocked)}
+        showError={showError}
         value={value}
       />
     </div>

test/fields/collections/SlugField/e2e.spec.ts

@@ -186,6 +186,27 @@ describe('SlugField', () => {
     })
   })
 
+  describe('validation error', () => {
+    test('should keep the lock button clickable when the slug field has a validation error', async () => {
+      await page.goto(url.create)
+      await page.locator('#field-title').waitFor()
+
+      const slugFieldComponent = page
+        .locator('.slug-field-component')
+        .filter({ has: page.locator('#field-slug') })
+
+      // Save without filling required fields to surface validation errors
+      await page.locator('#action-save').click()
+
+      // The slug field error tooltip should render
+      await expect(slugFieldComponent.locator('.field-error')).toBeVisible()
+
+      await slugFieldComponent.locator('.lock-button').click()
+
+      await expect(page.locator('#field-slug')).toBeEnabled()
+    })
+  })
+
   describe('A11y', () => {
     test('Edit view should have no accessibility violations', async ({}, testInfo) => {
       await page.goto(url.create)