Skip to content

Commit 92370d3

Browse files
pavanbadempetpavanbadempet
committed
fix: Restore proper sizing for auth page - balanced design with no scrollbar
1 parent 6233553 commit 92370d3

File tree

1 file changed

+57
-45
lines changed

1 file changed

+57
-45
lines changed

‎frontend/views/auth_view.py‎

Lines changed: 57 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
"""
2-
Auth View - Minimal Form Layout
3-
================================
4-
3 fields only for signup to guarantee no scroll.
2+
Auth View - Balanced Design
3+
===========================
4+
Fits in viewport with proper sizing - not too cramped.
55
"""
66
import streamlit as st
77
from frontend.utils import api
88

99
def render_auth_page():
10-
"""Auth page with minimal form - guaranteed no scroll."""
10+
"""Auth page with balanced design."""
1111

1212
st.markdown("""
1313
<style>
@@ -26,46 +26,59 @@ def render_auth_page():
2626
}
2727
2828
.block-container {
29-
padding: 1rem !important;
29+
padding: 2rem 2rem !important;
3030
height: 100vh !important;
3131
overflow: hidden !important;
3232
}
3333
3434
[data-testid="stHorizontalBlock"] {
35-
height: calc(100vh - 2rem) !important;
35+
height: calc(100vh - 4rem) !important;
3636
align-items: center !important;
3737
}
3838
39-
/* Compact form */
39+
/* Form styling - proper sizing */
4040
div.stForm {
41-
padding: 0.75rem !important;
42-
}
43-
44-
/* Minimal input spacing */
45-
div[data-testid="stTextInput"] > div,
46-
div[data-testid="stPasswordInput"] > div {
47-
margin-bottom: 0.4rem !important;
48-
}
49-
50-
div[data-testid="stTextInput"] input,
51-
div[data-testid="stPasswordInput"] input {
52-
padding: 0.4rem 0.6rem !important;
53-
font-size: 0.85rem !important;
41+
padding: 1.25rem !important;
42+
border-radius: 16px !important;
43+
background: rgba(15, 23, 42, 0.6) !important;
44+
border: 1px solid rgba(255,255,255,0.08) !important;
5445
}
5546
47+
/* Tabs */
5648
.stTabs [data-baseweb="tab-list"] {
5749
background: transparent !important;
5850
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
59-
margin-bottom: 0.5rem !important;
51+
margin-bottom: 1rem !important;
6052
}
6153
6254
.stTabs [data-baseweb="tab"] {
63-
padding: 0.4rem 0.75rem !important;
64-
font-size: 0.8rem !important;
55+
padding: 0.5rem 1rem !important;
56+
font-size: 0.9rem !important;
57+
}
58+
59+
.stTabs [aria-selected="true"] {
60+
color: #60A5FA !important;
61+
border-bottom: 2px solid #60A5FA !important;
62+
}
63+
64+
/* Input styling */
65+
div[data-testid="stTextInput"],
66+
div[data-testid="stPasswordInput"] {
67+
margin-bottom: 0.75rem !important;
68+
}
69+
70+
div[data-testid="stTextInput"] input,
71+
div[data-testid="stPasswordInput"] input {
72+
padding: 0.6rem 0.8rem !important;
73+
font-size: 0.95rem !important;
74+
border-radius: 10px !important;
6575
}
6676
6777
div[data-testid="stFormSubmitButton"] button {
68-
padding: 0.5rem !important;
78+
padding: 0.65rem 1rem !important;
79+
font-size: 0.95rem !important;
80+
border-radius: 10px !important;
81+
margin-top: 0.5rem !important;
6982
}
7083
</style>
7184
""", unsafe_allow_html=True)
@@ -75,27 +88,27 @@ def render_auth_page():
7588
# Left - Branding
7689
with col1:
7790
st.markdown("""
78-
<div style="padding: 1rem;">
79-
<div style="font-size: 2rem; margin-bottom: 0.5rem;">🏥</div>
80-
<h1 style="font-size: 2rem; margin: 0 0 0.5rem 0; color: white; line-height: 1.15;">
91+
<div style="padding: 2rem;">
92+
<div style="font-size: 3rem; margin-bottom: 1rem; filter: drop-shadow(0 0 20px rgba(59,130,246,0.3));">🏥</div>
93+
<h1 style="font-size: 2.75rem; margin: 0 0 0.75rem 0; color: white; line-height: 1.15; font-weight: 800;">
8194
The Future of<br>
8295
<span style="background: linear-gradient(90deg, #60A5FA, #34D399); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">AI Healthcare</span>
8396
</h1>
84-
<p style="font-size: 0.85rem; color: #94A3B8; margin: 0 0 0.75rem 0;">
85-
Hospital-grade predictive diagnostics. Secure data protection.
97+
<p style="font-size: 1.1rem; color: #94A3B8; margin: 0 0 1.5rem 0; line-height: 1.5; max-width: 450px;">
98+
Hospital-grade predictive diagnostics. Secure data protection. Real-time analysis powered by AI.
8699
</p>
87-
<div style="display: flex; gap: 0.5rem;">
88-
<div style="background: rgba(255,255,255,0.03); padding: 0.4rem 0.6rem; border-radius: 8px; text-align: center;">
89-
<div style="font-size: 0.8rem; font-weight: 700; color: #F8FAFC;">99.8%</div>
90-
<div style="font-size: 0.6rem; color: #64748B;">Precision</div>
100+
<div style="display: flex; gap: 0.75rem;">
101+
<div style="background: rgba(255,255,255,0.03); padding: 0.75rem 1rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); text-align: center;">
102+
<div style="font-size: 1.1rem; font-weight: 700; color: #F8FAFC;">99.8%</div>
103+
<div style="font-size: 0.75rem; color: #64748B;">Precision</div>
91104
</div>
92-
<div style="background: rgba(255,255,255,0.03); padding: 0.4rem 0.6rem; border-radius: 8px; text-align: center;">
93-
<div style="font-size: 0.8rem; font-weight: 700; color: #F8FAFC;">Encrypted</div>
94-
<div style="font-size: 0.6rem; color: #64748B;">Data</div>
105+
<div style="background: rgba(255,255,255,0.03); padding: 0.75rem 1rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); text-align: center;">
106+
<div style="font-size: 1.1rem; font-weight: 700; color: #F8FAFC;">Encrypted</div>
107+
<div style="font-size: 0.75rem; color: #64748B;">Data</div>
95108
</div>
96-
<div style="background: rgba(255,255,255,0.03); padding: 0.4rem 0.6rem; border-radius: 8px; text-align: center;">
97-
<div style="font-size: 0.8rem; font-weight: 700; color: #F8FAFC;">Global</div>
98-
<div style="font-size: 0.6rem; color: #64748B;">Access</div>
109+
<div style="background: rgba(255,255,255,0.03); padding: 0.75rem 1rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); text-align: center;">
110+
<div style="font-size: 1.1rem; font-weight: 700; color: #F8FAFC;">Global</div>
111+
<div style="font-size: 0.75rem; color: #64748B;">Access</div>
99112
</div>
100113
</div>
101114
</div>
@@ -104,9 +117,9 @@ def render_auth_page():
104117
# Right - Auth Form
105118
with col2:
106119
st.markdown("""
107-
<div style="text-align: center; margin-bottom: 0.5rem;">
108-
<h2 style="font-size: 1.25rem; margin: 0; color: white;">Welcome Back</h2>
109-
<p style="font-size: 0.75rem; color: #64748B; margin: 0.25rem 0 0 0;">Sign in to your dashboard</p>
120+
<div style="text-align: center; margin-bottom: 1rem;">
121+
<h2 style="font-size: 1.75rem; margin: 0; color: white; font-weight: 600;">Welcome Back</h2>
122+
<p style="font-size: 0.95rem; color: #94A3B8; margin: 0.5rem 0 0 0;">Sign in to access your dashboard</p>
110123
</div>
111124
""", unsafe_allow_html=True)
112125

@@ -120,13 +133,12 @@ def render_auth_page():
120133
if api.login(u, p): st.rerun()
121134

122135
with tab2:
123-
# ONLY 3 FIELDS - username, email, password (name added via profile later)
124136
with st.form("signup", border=False):
125137
us = st.text_input("Username", placeholder="Choose a username", label_visibility="collapsed")
126138
em = st.text_input("Email", placeholder="Your email", label_visibility="collapsed")
127139
pw = st.text_input("Password", type="password", placeholder="Create password", label_visibility="collapsed")
128140
if st.form_submit_button("Create Account", type="primary", width="stretch"):
129-
if api.signup(us, pw, em, us, "2000-01-01"): # Use username as name initially
141+
if api.signup(us, pw, em, us, "2000-01-01"):
130142
if api.login(us, pw): st.rerun()
131143

132-
st.markdown('<p style="text-align: center; font-size: 0.65rem; color: #475569; margin-top: 0.5rem;">Powered by Advanced AI</p>', unsafe_allow_html=True)
144+
st.markdown('<p style="text-align: center; font-size: 0.8rem; color: #475569; margin-top: 1rem;">Powered by Advanced AI</p>', unsafe_allow_html=True)

0 commit comments

Comments
 (0)