Fix EnrollPrompt page layout squished on desktop
The auth panel CSS (brand panel gradient, form panel flex centering, feature list, subtext color) was only defined in Login.cshtml's @section Styles — not in the shared auth layout. EnrollPrompt used the same class names but had no styles behind them, so the two-column layout collapsed. Added matching styles in EnrollPrompt's own @section Styles block. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -4,6 +4,86 @@
|
||||
var returnUrl = ViewBag.ReturnUrl as string ?? "/";
|
||||
}
|
||||
|
||||
@section Styles {
|
||||
<style>
|
||||
.auth-brand-panel {
|
||||
background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 3rem 2.5rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.auth-brand-panel h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.auth-brand-panel .tagline {
|
||||
font-size: 1rem;
|
||||
color: rgba(255,255,255,0.65);
|
||||
margin-bottom: 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.feature-list li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.6rem 0;
|
||||
font-size: 0.95rem;
|
||||
color: rgba(255,255,255,0.82);
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
|
||||
.feature-list li:last-child { border-bottom: none; }
|
||||
|
||||
.feature-list li i {
|
||||
color: #4fc3f7;
|
||||
font-size: 1.1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.auth-form-panel {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2.5rem 1.5rem;
|
||||
background-color: #ffffff;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.auth-form-container {
|
||||
width: 100%;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.auth-form-container h2 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.auth-form-container .subtext {
|
||||
color: #64748b;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
||||
<div class="d-flex" style="min-height:100vh;">
|
||||
<!-- Left brand panel — hidden on mobile, same as login page -->
|
||||
<div class="col-lg-5 d-none d-lg-flex auth-brand-panel">
|
||||
|
||||
Reference in New Issue
Block a user