Skip to content

Commit e663e10

Browse files
pavanbadempetpavanbadempet
committed
fix: Reduce signup to 3 fields (username, email, password) to fit viewport
1 parent 9fa1412 commit e663e10

File tree

1 file changed

+60
-56
lines changed

1 file changed

+60
-56
lines changed

‎frontend/views/auth_view.py‎

Lines changed: 60 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,20 @@
11
"""
2-
Auth View - Compact Single Screen
3-
=================================
4-
No scrollbar. Everything fits in viewport.
2+
Auth View - Minimal Form Layout
3+
================================
4+
3 fields only for signup to guarantee no scroll.
55
"""
66
import streamlit as st
77
from frontend.utils import api
88

99
def render_auth_page():
10-
"""Auth page - fits in single viewport."""
10+
"""Auth page with minimal form - guaranteed no scroll."""
1111

1212
st.markdown("""
1313
<style>
14-
/* Force no scroll */
15-
html, body, [data-testid="stAppViewContainer"], .main, .stApp {
14+
/* No scrolling */
15+
html, body, [data-testid="stAppViewContainer"], .main {
1616
overflow: hidden !important;
1717
height: 100vh !important;
18-
max-height: 100vh !important;
1918
}
2019
2120
[data-testid="stAppViewContainer"] {
@@ -27,102 +26,107 @@ def render_auth_page():
2726
}
2827
2928
.block-container {
30-
padding: 0.5rem 1rem !important;
29+
padding: 1rem !important;
3130
height: 100vh !important;
32-
max-height: 100vh !important;
3331
overflow: hidden !important;
3432
}
3533
3634
[data-testid="stHorizontalBlock"] {
37-
height: calc(100vh - 1rem) !important;
35+
height: calc(100vh - 2rem) !important;
3836
align-items: center !important;
3937
}
4038
41-
/* Auth form - extra compact */
39+
/* Compact form */
4240
div.stForm {
43-
padding: 0.6rem !important;
44-
border-radius: 10px !important;
41+
padding: 0.75rem !important;
4542
}
4643
47-
/* Tabs */
48-
.stTabs [data-baseweb="tab-list"] {
49-
background: transparent !important;
50-
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
44+
/* Minimal input spacing */
45+
div[data-testid="stTextInput"] > div,
46+
div[data-testid="stPasswordInput"] > div {
5147
margin-bottom: 0.4rem !important;
5248
}
5349
54-
.stTabs [data-baseweb="tab"] {
55-
padding: 0.3rem 0.5rem !important;
56-
font-size: 0.75rem !important;
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;
5754
}
5855
59-
/* Inputs - minimal */
60-
div[data-testid="stTextInput"],
61-
div[data-testid="stPasswordInput"] {
62-
margin-bottom: 0.25rem !important;
56+
.stTabs [data-baseweb="tab-list"] {
57+
background: transparent !important;
58+
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
59+
margin-bottom: 0.5rem !important;
6360
}
6461
65-
div[data-testid="stTextInput"] input,
66-
div[data-testid="stPasswordInput"] input {
67-
padding: 0.35rem 0.5rem !important;
62+
.stTabs [data-baseweb="tab"] {
63+
padding: 0.4rem 0.75rem !important;
6864
font-size: 0.8rem !important;
6965
}
7066
7167
div[data-testid="stFormSubmitButton"] button {
72-
padding: 0.4rem !important;
73-
font-size: 0.8rem !important;
68+
padding: 0.5rem !important;
7469
}
7570
</style>
7671
""", unsafe_allow_html=True)
7772

78-
col1, col2 = st.columns([1.1, 1])
73+
col1, col2 = st.columns([1.2, 1])
7974

75+
# Left - Branding
8076
with col1:
8177
st.markdown("""
82-
<div style="padding: 0.5rem;">
83-
<div style="font-size: 1.5rem; margin-bottom: 0.4rem;">🏥</div>
84-
<h1 style="font-size: clamp(1.3rem, 2.5vw, 1.8rem); margin: 0 0 0.3rem 0; color: white; line-height: 1.15;">
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;">
8581
The Future of<br>
8682
<span style="background: linear-gradient(90deg, #60A5FA, #34D399); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">AI Healthcare</span>
8783
</h1>
88-
<p style="font-size: 0.75rem; color: #94A3B8; margin: 0 0 0.5rem 0; line-height: 1.3;">
89-
Hospital-grade diagnostics. Secure data. Real-time AI.
84+
<p style="font-size: 0.85rem; color: #94A3B8; margin: 0 0 0.75rem 0;">
85+
Hospital-grade predictive diagnostics. Secure data protection.
9086
</p>
91-
<div style="display: flex; gap: 0.4rem;">
92-
<div style="background: rgba(255,255,255,0.03); padding: 0.3rem 0.5rem; border-radius: 6px; text-align: center;">
93-
<div style="font-size: 0.7rem; font-weight: 700; color: #F8FAFC;">99.8%</div>
94-
<div style="font-size: 0.5rem; color: #64748B;">Precision</div>
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>
9591
</div>
96-
<div style="background: rgba(255,255,255,0.03); padding: 0.3rem 0.5rem; border-radius: 6px; text-align: center;">
97-
<div style="font-size: 0.7rem; font-weight: 700; color: #F8FAFC;">Encrypted</div>
98-
<div style="font-size: 0.5rem; color: #64748B;">Data</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>
9995
</div>
100-
<div style="background: rgba(255,255,255,0.03); padding: 0.3rem 0.5rem; border-radius: 6px; text-align: center;">
101-
<div style="font-size: 0.7rem; font-weight: 700; color: #F8FAFC;">Global</div>
102-
<div style="font-size: 0.5rem; color: #64748B;">Access</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>
10399
</div>
104100
</div>
105101
</div>
106102
""", unsafe_allow_html=True)
107103

104+
# Right - Auth Form
108105
with col2:
109-
st.markdown('<div style="text-align: center; margin-bottom: 0.3rem;"><h2 style="font-size: 1rem; margin: 0; color: white;">Welcome Back</h2><p style="font-size: 0.7rem; color: #64748B; margin: 0;">Sign in to your dashboard</p></div>', unsafe_allow_html=True)
106+
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>
110+
</div>
111+
""", unsafe_allow_html=True)
110112

111-
t1, t2 = st.tabs(["Sign In", "Create Account"])
113+
tab1, tab2 = st.tabs(["Sign In", "Create Account"])
112114

113-
with t1:
115+
with tab1:
114116
with st.form("login", border=False):
115-
u = st.text_input("u", placeholder="Username", label_visibility="collapsed")
116-
p = st.text_input("p", type="password", placeholder="Password", label_visibility="collapsed")
117+
u = st.text_input("Username", placeholder="Enter username", label_visibility="collapsed")
118+
p = st.text_input("Password", type="password", placeholder="Enter password", label_visibility="collapsed")
117119
if st.form_submit_button("Sign In →", type="primary", use_container_width=True):
118120
if api.login(u, p): st.rerun()
119121

120-
with t2:
122+
with tab2:
123+
# ONLY 3 FIELDS - username, email, password (name added via profile later)
121124
with st.form("signup", border=False):
122-
fn = st.text_input("fn", placeholder="Full Name", label_visibility="collapsed")
123-
us = st.text_input("us", placeholder="Username", label_visibility="collapsed")
124-
em = st.text_input("em", placeholder="Email", label_visibility="collapsed")
125-
pw = st.text_input("pw", type="password", placeholder="Password", label_visibility="collapsed")
125+
us = st.text_input("Username", placeholder="Choose a username", label_visibility="collapsed")
126+
em = st.text_input("Email", placeholder="Your email", label_visibility="collapsed")
127+
pw = st.text_input("Password", type="password", placeholder="Create password", label_visibility="collapsed")
126128
if st.form_submit_button("Create Account", type="primary", use_container_width=True):
127-
if api.signup(us, pw, em, fn, "2000-01-01"):
129+
if api.signup(us, pw, em, us, "2000-01-01"): # Use username as name initially
128130
if api.login(us, pw): st.rerun()
131+
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)

0 commit comments

Comments
 (0)