Skip to content

Prevent auth card shadow from being clipped on the sign-in screen #195

Description

@MessiasLima

Description

Update the sign-in screen layout so the authentication card shadow is fully visible instead of being clipped by the screen container. This keeps the screen aligned with the intended visual design and avoids the card looking cut off on first render or while scrolling.

Scope and constraints

  • Fix the layout/container behavior around the sign-in card without redesigning the authentication screen
  • Keep the current centered layout, max content width, and authentication flow behavior
  • Do not change the FoliaryCard shared shadow treatment unless layout changes alone are not enough

References

  • Related issue: Authentication UI and Provider Selection #15
  • foliary/src/commonMain/kotlin/dev/appoutlet/foliary/feature/signin/SignInScreen.kt
  • foliary/src/commonMain/kotlin/dev/appoutlet/foliary/core/ui/component/card/FoliaryCard.kt
  • foliary/src/commonMain/kotlin/dev/appoutlet/foliary/core/ui/component/modifier/FoliaryShadow.kt

Scope

Adjust the sign-in screen spacing, padding, inset handling, and/or scroll container behavior so the auth card shadow has enough room to render on all sides. Out of scope: visual redesign of the sign-in screen, changes to copy, and changes to authentication providers or business logic.

Acceptance criteria

  • The auth card shadow is fully visible on all sides when the sign-in screen first loads
  • The auth card shadow remains visible on compact layouts and larger window sizes without being clipped by the screen bounds
  • The sign-in screen keeps its current centered composition, max width, and existing sign-in interactions
  • Loading, authenticated, and magic-link states continue rendering inside the card without layout regressions

Additional information

The current sign-in screen centers a vertically scrollable column inside a full-screen container with horizontal padding only, while FoliaryCard applies a large custom shadow. The ticket should verify whether the clipping is caused by missing vertical padding, safe-area handling, or the scroll/container bounds around the centered content.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions