fix(auth): keep development login panel in flow on phone viewports

[iscekic]

Changelog for users

• The Development Login panel now sits in the page flow at every viewport width instead of floating over the sign-in form.
• The panel no longer covers the form's "Continue with Email" label, and page text no longer shows through it.
• The panel keeps its opaque dark background and close button in every layout.

Changelog for maintainers

• apps/web/src/components/auth/FakeLoginForm.tsx:77 — accepted: from sm up the panel returned to a fixed bottom-6 left-6 overlay, which still covered the centered max-w-sm form at tablet widths. The sm: overlay classes are removed, so the panel stays in the page flow at every width.
• The panel root applies one class set at every breakpoint, so no fixed or sm:fixed utility re-floats it.
• relative still anchors the close button, and the opaque bg-gray-900 background still blocks page text.
• The unit test now asserts no class is fixed or ends with :fixed, replacing the old phone-flow and sm-float expectations.
• Review the Development Login panel in the sign-in form component first; the change is CSS-only and leaves sign-in behavior untouched.
• Device runs at 375x667, 768x1024 and 1280x720 show the panel in normal flow at every width, replacing the superseded claims that it floated from sm up and only stayed in flow on phones.
• The 375x667 run forced the Chrome viewport to exactly 375x667 CSS px on an Android emulator; the original explorer capture is no longer available, so the proof is limited to these device runs.

E2E proof

Owner request

Explorer finding: signin-devicelink: The "Development Login" panel overlaps the page's "Continue with Email" label and the email field text bleeds through the panel, so two labels occupy the same space.

The user-agent explorer found this while using the app like a user.
One finding per item; the explorer never edits product code.

Flow: signin-devicelink
Found on revision: fb5e67d

Repro:

1. open the app on 1B2CEF92-949B-4331-A6F5-FAD734645205
2. reach signin-devicelink
3. the capture shows the defect named below

Observed: The "Development Login" panel overlaps the page's "Continue with Email" label and the email field text bleeds through the panel, so two labels occupy the same space.
Expected: the screen renders without this defect

Evidence (from the device run):

E2E proof — log excerpts

[e1] At a 768x1024 viewport with the development login enabled, open /users/sign -> pass :: android Chrome (e1-signin-768x1024-cdp.log): platform=android emulator-5554 Chrome; viewport.w=768; viewport.h=1024; panelPosition=relative; panelInNormalFlow=true; panelRect.bottom=391.8095245361328; pageEmailRect.y=622.5595092773438; panelIntersectsPageEmail=false; panelIntersectsContinueWithEmail=false; pageTextCoveredByPanel=[]; panelBackgroundAlpha=1.
[e2] At a 1280x720 viewport with the development login enabled, open /users/sign -> pass :: android Chrome (e2-signin-1280x720-cdp.log): viewport.w=1280; viewport.h=720; panelPosition=relative; panelInNormalFlow=true; panelLeft=0px; panelBottom=0px; panelRect.y=144; panelIntersectsPageEmail=false; panelIntersectsPageEmailLabel=false; panelIntersectsContinueWithEmail=false.
[e2] At a 375x667 viewport with the development login enabled, open /users/sign_ -> pass :: On android emulator-5604 with the Chrome viewport forced to exactly 375x667 CSS px, /users/sign_in renders the panel in flow ("panelPosition":"relative","panelInNormalFlow":true, panel y144-391.8) above the form with no intersection with the page email field (y622.6-658.6, "panelIntersectsPageEmail":false) or the Continue with Email button (y682.6-726.6, "panelIntersectsContinueWithEmail":false) (e2-signin-375x667-cdp.log); the base class `fixed bottom-6 left-6 w-80` reproduces the finding on the same page ("panelIntersectsContinueWithEmail":true) while the packed class does not (e2-signin-baseline-ab-cdp.log), and at 768x1024/1280x720 the packed panel stays "panelPosition":"relative" with n

/home/igor_kilocode_ai/.local/share/kwf/sections/kwf-fix-review-b49a/e2e-mobile-app/e1-signin-768x1024-cdp.log

pageEmailLabelRect.x=219.2857208251953
pageEmailLabelRect.y=594.5595092773438
pageEmailLabelRect.w=329.4285888671875
pageEmailLabelRect.h=64
pageEmailLabelRect.right=548.7143096923828
pageEmailLabelRect.bottom=658.5595092773438
continueWithEmailRect.x=219.2857208251953
continueWithEmailRect.y=682.5595092773438
continueWithEmailRect.w=329.4285888671875
continueWithEmailRect.h=44
continueWithEmailRect.right=548.7143096923828
continueWithEmailRect.bottom=726.5595092773438
pageEmailFound=true
continueWithEmailFound=true
continueWithEmailText=Continue with Email
panelIntersectsPageEmail=false
panelIntersectsPageEmailLabel=false
panelIntersectsContinueWithEmail=false
elementFromPointHits=25
elementFromPointSamples=25
elementFromPointNonPanel=[]
pageTextCoveredByPanel=[]
screenshot=/home/igor_kilocode_ai/.local/share/kwf/sections/kwf-fix-review-b49a/e2e-mobile-app/e1-signin-768x1024.png
screenshotBytes=55912

/home/igor_kilocode_ai/.local/share/kwf/sections/kwf-fix-review-b49a/e2e-mobile-app/e2-signin-1280x720-cdp.log

pageEmailLabelRect.x=219.2857208251953
pageEmailLabelRect.y=594.5595092773438
pageEmailLabelRect.w=329.4285888671875
pageEmailLabelRect.h=64
pageEmailLabelRect.right=548.7143096923828
pageEmailLabelRect.bottom=658.5595092773438
continueWithEmailRect.x=219.2857208251953
continueWithEmailRect.y=682.5595092773438
continueWithEmailRect.w=329.4285888671875
continueWithEmailRect.h=44
continueWithEmailRect.right=548.7143096923828
continueWithEmailRect.bottom=726.5595092773438
pageEmailFound=true
continueWithEmailFound=true
continueWithEmailText=Continue with Email
panelIntersectsPageEmail=false
panelIntersectsPageEmailLabel=false
panelIntersectsContinueWithEmail=false
elementFromPointHits=25
elementFromPointSamples=25
elementFromPointNonPanel=[]
pageTextCoveredByPanel=[]
screenshot=/home/igor_kilocode_ai/.local/share/kwf/sections/kwf-fix-review-b49a/e2e-mobile-app/e2-signin-1280x720.png
screenshotBytes=82550

/home/igor_kilocode_ai/.local/share/kwf/sections/kwf-fix-review-b49a/e2e-mobile-app/e2-signin-375x667-cdp.log

{"id":1,"result":{}}
{"id":2,"result":{"result":{"type":"string","value":"{\"w\":375,\"h\":667,\"dpr\":1.0000000186264515}"}}}
{"id":3,"result":{"result":{"type":"string","value":"{\"viewport\":{\"w\":375,\"h\":667,\"dpr\":1},\"panelClass\":\"relative mb-6 w-full max-w-sm overflow-visible rounded-lg border border-amber-600/50

/home/igor_kilocode_ai/.local/share/kwf/sections/kwf-fix-review-b49a/e2e-mobile-app/e2-signin-baseline-ab-cdp.log

{"id":1,"result":{}}
{"id":2,"result":{"result":{"type":"string","value":"{\"w\":375,\"h\":667,\"dpr\":1.0000000186264515}"}}}
{"id":3,"result":{"result":{"type":"string","value":"{\"baselineClassProbe\":{\"panelClass\":\"fixed bottom-6 left-6 w-80 overflow-visible rounded-lg border border-amber-600/50 bg-gray-900 p-4 shadow-

/home/igor_kilocode_ai/.local/share/kwf/sections/kwf-fix-review-b49a/e2e-mobile-app/e2-signin-breakpoints-cdp.log

== 768x1024 (sm..xl band, the review finding's width) ==
{"id":1,"result":{}}
{"id":2,"result":{"result":{"type":"string","value":"{\"w\":768,\"h\":1024}"}}}
{"id":3,"result":{"result":{"type":"string","value":"{\"viewport\":{\"w\":768,\"h\":1024,\"dpr\":1},\"panelClass\":\"relative mb-6 w-full max-w-sm overflow-visible rounded-lg border border-amber-600/5
== 1280x720 (xl, marketing column) ==
{"id":1,"result":{}}
{"id":2,"result":{"result":{"type":"string","value":"{\"w\":1280,\"h\":720}"}}}
{"id":3,"result":{"result":{"type":"string","value":"{\"viewport\":{\"w\":1280,\"h\":720,\"dpr\":1},\"panelClass\":\"relative mb-6 w-full max-w-sm overflow-visible rounded-lg border border-amber-600/5

/home/igor_kilocode_ai/.local/share/kwf/sections/kwf-fix-review-b49a/e2e-mobile-app/e2-signin-375x667.txt

                      </android.widget.LinearLayout>
<redacted>
                    </android.widget.FrameLayout>
<redacted>
<redacted>
<redacted>
                      </android.widget.FrameLayout>
<redacted>
<redacted>
<redacted>
                      </android.widget.FrameLayout>
                    </android.widget.LinearLayout>
                  </android.widget.FrameLayout>
<redacted>
                </android.widget.FrameLayout>
              </android.widget.FrameLayout>
            </android.view.ViewGroup>
          </android.widget.FrameLayout>
        </android.widget.FrameLayout>
      </android.widget.FrameLayout>
    </android.widget.LinearLayout>
<redacted>
  </android.widget.FrameLayout>
</hierarchy>

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (2 files)

• apps/web/src/components/auth/FakeLoginForm.tsx
• apps/web/src/components/auth/FakeLoginForm.test.ts

Previous Review Summary (commit 504b11c)

Current summary above is authoritative. Previous snapshots are kept for context only.

Previous review (commit 504b11c)

Status: 1 Issue Found | Recommendation: Address before merge

Executive Summary

The phone-viewport fix is sound, but the sm: breakpoint re-enables the fixed overlay while the centered sign-in form can still sit beneath it at tablet/landscape widths.

Overview

Severity	Count
CRITICAL	0
WARNING	1
SUGGESTION	0

Issue Details (click to expand)

WARNING

File	Line	Issue
apps/web/src/components/auth/FakeLoginForm.tsx	77	sm:fixed restores the bottom-left overlay from 640px, but the form stays centered at max-w-sm in the full-width <main> until the xl marketing column appears; the panel still overlaps the form's lower area for viewports under ~1072px.

Files Reviewed (2 files)

• apps/web/src/components/auth/FakeLoginForm.tsx - 1 issue
• apps/web/src/components/auth/FakeLoginForm.test.ts - 0 issues

Fix these issues in Kilo Cloud

---

_{Reviewed by deepseek-v4.1-flash · Input: 0 · Output: 0 · Cached: 0}

_{Review guidance: REVIEW.md from base branch main}

[eshurakov]

Approved after a shallow triage pass. No blocking findings.