[PER-10673] Soften the focus ring on form controls

[aasandei-vsp]

Manual test cases — softer focus ring on form controls

Setup: Any account with an archive you can edit. No feature flags. You need: one archive whose Archive profile has a person type, one folder or record with editable metadata, and a browser you can tab around in. Run this on a build of PER-10673-fix-bootstrap-input-shadow.

Focusing any text field, dropdown or checkbox now draws a soft fading halo instead of a flat grey rectangle. Nothing moves, resizes or changes colour otherwise.

---

Archive profile and person information ⭐

(the surface the bug was reported on — the fields here show no border until focused, which is why it looked worst)

Scenario — the reported field

1. Open Archive profile and scroll to Group Information.
2. Click into This Person's Full Name.
   • EXPECTED: A soft shadow fades outward from the field edge. It reads as a halo, not as a solid grey band.
3. Click into the phone number field below it.
   • EXPECTED: The same soft shadow, identical in size and colour to step 2.
4. Click on empty space to blur the field.
   • EXPECTED: The shadow disappears cleanly and the field returns to having no visible border.

Scenario — a dropdown beside a text field

1. On the same screen, focus a text field, then focus a dropdown.
   • EXPECTED: Both show the same soft halo. They must not differ — a hard-edged ring on the dropdown is the specific bug this revision fixes.

---

Every other form in the app

(spot checks — the change is global, so pick surfaces you already have data in)

Scenario — sidebar and dialogs

1. Open a record's info sidebar and focus a metadata field.
   • EXPECTED: Soft halo, same as the profile screens.

---

Login, signup and onboarding ⭐

(these use a different input component and must be completely unchanged — if anything moves here, the fix has leaked past its intended scope)

Scenario — auth fields keep their own treatment

1. Log out and focus the email field on the login screen.
   • EXPECTED: No halo at all. The field shows a pale blue background and a grey border, exactly as on main.
2. Do the same on Sign up, Forgot password and the MFA code screen.
   • EXPECTED: Same as step 1 on all three — no shadow.
3. Start creating an archive and focus the archive name field on the naming screen.
   • EXPECTED: No halo.

---

Regression sweep

Cheap sanity checks; these were traced as unchanged by this PR but are worth 30 seconds.

1. Open a form and compare field heights and spacing against production side by side.
   • EXPECTED: Identical. Nothing has moved or resized.
2. Open the mobile nav on a narrow window and focus the toggler.
   • EXPECTED: It still shows a focus ring, slightly thinner than before.
3. Reload a form-heavy page with a hard refresh.
   • EXPECTED: No flash of unstyled or differently-styled focus, and no console errors.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 53.86%. Comparing base (8f4a06a) to head (6d66ee6).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1174      +/-   ##
==========================================
+ Coverage   53.79%   53.86%   +0.07%     
==========================================
  Files         359      359              
  Lines       12384    12384              
  Branches     2256     2256              
==========================================
+ Hits         6662     6671       +9     
+ Misses       5485     5477       -8     
+ Partials      237      236       -1     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.