Fix UI style issues of SignInPanel in Boilerplate (#11910)

[msynk]

closes #11910

Summary by CodeRabbit

• Style
  • Reorganized and centered the external identity providers section for improved layout.
  • Implemented responsive separator visibility across different screen sizes.
  • Enhanced loading state with placeholder elements during provider initialization.
  • Streamlined sign-up page by removing redundant separator elements.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The pull request refactors the external identity providers UI structure by reorganizing the ExternalIdentityProviders component layout with improved loading state handling and nested stack organization. Separator styling and logic are consolidated into ExternalIdentityProviders, removing redundant separators from SignUpPage and SignInPanel while updating responsive styling rules across affected SCSS files.

Changes

Cohort / File(s)	Change Summary
External Identity Providers Restructuring src/Templates/Boilerplate/.../Components/Pages/Identity/Components/ExternalIdentityProviders.razor	Reorganized UI structure with nested BitStack components; moved loading state (BitShimmer placeholders) into inner stack; unified provider rendering blocks (Keycloak, Google, GitHub, Twitter, Apple, AzureAD, Facebook); added conditional separator rendering only when providers exist.
Separator Styling Consolidation src/Templates/Boilerplate/.../Components/Pages/Identity/Components/ExternalIdentityProviders.razor.scss	Added media-queries SCSS import; updated section width to 100%; introduced responsive separator utilities (.lg-sep for lt-md viewports, .sm-sep for gt-sm viewports).
SignIn & SignUp Layout Updates src/Templates/Boilerplate/.../Components/Pages/Identity/SignInPanel.razor.scss, src/Templates/Boilerplate/.../Components/Pages/Identity/SignUp/SignUpPage.razor, src/Templates/Boilerplate/.../Components/Pages/Identity/SignUp/SignUpPage.razor.scss	Removed BitSeparator components ("Or" labels) from SignUpPage.razor; eliminated responsive separator styling and media-queries imports from SignInPanel.razor.scss and SignUpPage.razor.scss; separator logic now handled in ExternalIdentityProviders.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

• Consistent refactoring pattern across multiple files (moving/consolidating separator logic)
• Straightforward styling changes with repetitive patterns
• Layout reorganization is clear and localized to component structure
• No complex business logic or interdependent changes requiring deep reasoning per file

Poem

🐰 The separators dance and find their home,
Where providers gather, no need to roam—
Nested stacks now sing with clarity bright,
Responsive rules tucked left and right,
UI consolidated with CSS delight! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly addresses fixing UI style issues in SignInPanel, which aligns with the main objective of resolving styling problems in the component.
Linked Issues check	✅ Passed	The changes address the styling issues with 'Or' separators by reorganizing the UI structure and updating responsive styles across multiple affected components.
Out of Scope Changes check	✅ Passed	All changes are focused on fixing the 'Or' separator styling issues in SignInPanel and related components, with no unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Components/ExternalIdentityProviders.razor (2)

8-11: Shimmer placeholder count may not match actual provider count.

The loading state renders 4 shimmer placeholders, but there are 7 possible providers. Depending on the typical number of configured providers, users may notice a visual jump when loading completes.

Consider either matching the shimmer count to a representative number or dynamically calculating it if possible.

---

15-56: Consider consolidating provider rendering logic.

The provider blocks follow an identical pattern. If the provider list grows or requires maintenance, a data-driven approach iterating over provider metadata (name, icon component, handler) could reduce repetition.

Current approach is clear and maintainable for 7 providers, so this is optional.

📜 Review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between 436a4a4 and 4c13c3d.

📒 Files selected for processing (5)

• src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Components/ExternalIdentityProviders.razor
• src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Components/ExternalIdentityProviders.razor.scss
• src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInPanel.razor.scss
• src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUp/SignUpPage.razor
• src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUp/SignUpPage.razor.scss

💤 Files with no reviewable changes (3)

• src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUp/SignUpPage.razor
• src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignIn/SignInPanel.razor.scss
• src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/SignUp/SignUpPage.razor.scss

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build Bit.Templates

🔇 Additional comments (2)

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Components/ExternalIdentityProviders.razor.scss (1)

1-27: LGTM!

The responsive separator utilities are well-structured. The lg-sep / sm-sep pattern cleanly ensures only one "Or" separator is visible at a time based on viewport width, with styles properly scoped via ::deep.

src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Identity/Components/ExternalIdentityProviders.razor (1)

60-64: LGTM!

The separator logic correctly renders only when providers exist, and the dual-separator approach with responsive CSS classes elegantly handles different viewport stylings.