Skip to content

Commit 7908321

Browse files
PraneethKulukuri26PraneethKulukuri26
committed
feat: improve UI responsiveness and typography for smaller screens
1 parent 61fb316 commit 7908321

5 files changed

Lines changed: 119 additions & 80 deletions

File tree

‎src/renderer/src/assets/index.css‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,30 @@
4646

4747
/* ─── Timing ─────────────────────────────────────── */
4848
--ease: 150ms ease;
49+
50+
/* ─── Responsive Multipliers ─────────────────────── */
51+
--font-scale: 1;
52+
}
53+
54+
/* ─── Responsive Scaling ────────────────────────────── */
55+
@media (max-height: 850px) {
56+
:root {
57+
--font-scale: 0.95;
58+
--topbar-h: 52px;
59+
}
60+
}
61+
62+
@media (max-height: 720px) {
63+
:root {
64+
--font-scale: 0.9;
65+
--topbar-h: 48px;
66+
}
67+
}
68+
69+
@media (max-width: 1200px) {
70+
:root {
71+
--sidebar-w: 220px;
72+
}
4973
}
5074

5175
/* ═══ Reset ═══════════════════════════════════════════════════════ */
@@ -65,7 +89,7 @@ body,
6589
background: var(--bg-root);
6690
color: var(--text-primary);
6791
-webkit-font-smoothing: antialiased;
68-
font-size: 13px;
92+
font-size: calc(13px * var(--font-scale));
6993
line-height: 1.5;
7094
}
7195

‎src/renderer/src/components/CreateProjectDialog.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,8 @@ export function CreateProjectDialog() {
102102
{/* Header */}
103103
<div className="flex justify-between items-start">
104104
<div>
105-
<h2 className="text-[20px] font-semibold text-white">{tab === 'create' ? 'New Project' : 'Import Project'}</h2>
106-
<p className="text-[13px] mt-1" style={{ color: '#9CA3AF' }}>
105+
<h2 style={{ fontSize: 'calc(20px * var(--font-scale))', fontWeight: 600, color: 'white', margin: 0 }}>{tab === 'create' ? 'New Project' : 'Import Project'}</h2>
106+
<p style={{ fontSize: 'calc(13px * var(--font-scale))', marginTop: '4px', color: '#9CA3AF', margin: 0 }}>
107107
{tab === 'create' ? 'Create a fresh local project' : 'Import an existing project from a database'}
108108
</p>
109109
</div>
@@ -114,7 +114,7 @@ export function CreateProjectDialog() {
114114
<button
115115
onClick={() => setTab('create')}
116116
style={{
117-
flex: 1, padding: '8px', fontSize: '13px', borderRadius: '8px', border: 'none', cursor: 'pointer',
117+
flex: 1, padding: '8px', fontSize: 'calc(13px * var(--font-scale))', borderRadius: '8px', border: 'none', cursor: 'pointer',
118118
background: tab === 'create' ? '#1F1F1F' : 'transparent',
119119
color: tab === 'create' ? '#FFF' : '#6B7280',
120120
transition: 'all 150ms'
@@ -124,7 +124,7 @@ export function CreateProjectDialog() {
124124
<button
125125
onClick={() => setTab('import')}
126126
style={{
127-
flex: 1, padding: '8px', fontSize: '13px', borderRadius: '8px', border: 'none', cursor: 'pointer',
127+
flex: 1, padding: '8px', fontSize: 'calc(13px * var(--font-scale))', borderRadius: '8px', border: 'none', cursor: 'pointer',
128128
background: tab === 'import' ? '#1F1F1F' : 'transparent',
129129
color: tab === 'import' ? '#FFF' : '#6B7280',
130130
transition: 'all 150ms'

‎src/renderer/src/components/RbacSettingsDialog.tsx‎

Lines changed: 27 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -191,23 +191,30 @@ export function RbacSettingsDialog() {
191191
<div className="fixed inset-0 z-[1000] bg-black/80 backdrop-blur-sm animate-in fade-in duration-300" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px' }}>
192192
<div
193193
className="w-full bg-[#0D0D0D] rounded-[16px] shadow-2xl scale-in"
194-
style={{ display: 'flex', flexDirection: 'column', maxWidth: '1000px', maxHeight: '85vh', border: '1px solid #1F1F1F', overflow: 'hidden' }}
194+
style={{
195+
display: 'flex',
196+
flexDirection: 'column',
197+
maxWidth: 'min(1000px, 94vw)',
198+
maxHeight: 'min(800px, 90vh)',
199+
border: '1px solid #1F1F1F',
200+
overflow: 'hidden'
201+
}}
195202
>
196203
{/* Header Section */}
197-
<div style={{ flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '24px', borderBottom: '1px solid #1A1A1A' }}>
198-
<div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
199-
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
200-
<div className="rounded-xl bg-white/5 border border-white/10" style={{ width: '40px', height: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
201-
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
204+
<div style={{ flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '16px 24px', borderBottom: '1px solid #1A1A1A' }}>
205+
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
206+
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
207+
<div className="rounded-xl bg-white/5 border border-white/10" style={{ width: '36px', height: '36px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
208+
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
202209
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" />
203210
</svg>
204211
</div>
205-
<h2 style={{ fontSize: '22px', fontWeight: 600, color: 'white', letterSpacing: '-0.02em', margin: 0 }}>Team & Permissions</h2>
212+
<h2 style={{ fontSize: '18px', fontWeight: 600, color: 'white', letterSpacing: '-0.02em', margin: 0 }}>Team & Permissions</h2>
206213
</div>
207-
<p style={{ fontSize: '14px', color: '#9CA3AF', marginLeft: '56px', margin: 0 }}>Configure role-based access control and member provisioning</p>
214+
<p style={{ fontSize: '14px', color: '#9CA3AF', margin: 0, paddingLeft: '48px' }}>Configure role-based access control and member provisioning</p>
208215
</div>
209-
<button onClick={() => setShowRbacSettings(false)} className="text-neutral-500 hover:text-white hover:bg-white/5 rounded-xl transition-all duration-200" style={{ padding: '10px', cursor: 'pointer', border: 'none', background: 'transparent' }}>
210-
<svg width="22" height="22" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="15" y1="5" x2="5" y2="15" /><line x1="5" y1="5" x2="15" y2="15" /></svg>
216+
<button onClick={() => setShowRbacSettings(false)} className="text-neutral-500 hover:text-white hover:bg-white/5 rounded-xl transition-all duration-200" style={{ padding: '8px', cursor: 'pointer', border: 'none', background: 'transparent' }}>
217+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="15" y1="5" x2="5" y2="15" /><line x1="5" y1="5" x2="15" y2="15" /></svg>
211218
</button>
212219
</div>
213220

@@ -241,12 +248,12 @@ export function RbacSettingsDialog() {
241248
<div style={{ display: 'flex', width: '100%', opacity: !isDeployed ? 0.2 : 1, filter: !isDeployed ? 'grayscale(100%)' : 'none', pointerEvents: !isDeployed ? 'none' : 'auto' }}>
242249

243250
{/* LEFT: Provision Section */}
244-
<div style={{ width: '440px', display: 'flex', flexDirection: 'column', borderRight: '1px solid #1A1A1A' }}>
251+
<div style={{ width: 'min(400px, 40%)', flexShrink: 0, display: 'flex', flexDirection: 'column', borderRight: '1px solid #1A1A1A' }}>
245252
{/* Left Top */}
246253
<div style={{ padding: '32px 32px 0 32px', flexShrink: 0 }}>
247254
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '24px' }}>
248255
<div className={`rounded-full ${editingMember ? 'bg-white' : 'bg-neutral-600'}`} style={{ width: '4px', height: '16px' }} />
249-
<h3 style={{ fontSize: '14px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', color: '#D4D4D8', margin: 0 }}>
256+
<h3 style={{ fontSize: 'calc(11px * var(--font-scale))', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', color: '#D4D4D8', margin: 0 }}>
250257
{editingMember ? 'Edit Access' : 'New Member'}
251258
</h3>
252259
</div>
@@ -256,21 +263,21 @@ export function RbacSettingsDialog() {
256263
<div className="custom-scrollbar" style={{ flex: 1, overflowY: 'auto', padding: '0 32px 24px 32px', display: 'flex', flexDirection: 'column', gap: '24px' }}>
257264
{/* Email Field */}
258265
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', flexShrink: 0 }}>
259-
<label style={{ fontSize: '12px', fontWeight: 500, color: '#A1A1AA', margin: 0 }}>Email Address</label>
266+
<label style={{ fontSize: 'calc(10px * var(--font-scale))', fontWeight: 500, color: '#A1A1AA', margin: 0 }}>Email Address</label>
260267
<input value={newUser.email} onChange={e => setNewUser({ ...newUser, email: e.target.value })}
261268
placeholder="teammate@example.com"
262269
className="bg-white/5 border border-white/10 rounded-xl text-white outline-none focus:border-white/40 focus:bg-white/[0.07] transition-all"
263-
style={{ width: '100%', boxSizing: 'border-box', height: '48px', padding: '0 16px', fontSize: '14px' }}
270+
style={{ width: '100%', boxSizing: 'border-box', height: '44px', padding: '0 16px', fontSize: 'calc(14px * var(--font-scale))' }}
264271
/>
265272
</div>
266273

267274
{/* Role Field */}
268275
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', flexShrink: 0 }}>
269-
<label style={{ fontSize: '12px', fontWeight: 500, color: '#A1A1AA', margin: 0 }}>Access Role</label>
276+
<label style={{ fontSize: 'calc(10px * var(--font-scale))', fontWeight: 500, color: '#A1A1AA', margin: 0 }}>Access Role</label>
270277
<div style={{ position: 'relative' }}>
271278
<select value={newUser.role} onChange={e => setNewUser({ ...newUser, role: e.target.value as any })}
272279
className="bg-white/5 border border-white/10 rounded-xl text-white outline-none cursor-pointer hover:border-white/20 transition-all appearance-none"
273-
style={{ width: '100%', boxSizing: 'border-box', height: '48px', padding: '0 16px', fontSize: '14px', backgroundColor: '#0D0D0D' }}
280+
style={{ width: '100%', boxSizing: 'border-box', height: '44px', padding: '0 16px', fontSize: 'calc(14px * var(--font-scale))', backgroundColor: '#0D0D0D' }}
274281
>
275282
<option value="viewer">Viewer (Read Only)</option>
276283
<option value="editor">Editor (Modify APIs)</option>
@@ -284,7 +291,7 @@ export function RbacSettingsDialog() {
284291

285292
{/* Folders Field */}
286293
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', flexShrink: 0 }}>
287-
<label style={{ fontSize: '12px', fontWeight: 500, color: '#A1A1AA', margin: 0 }}>Allowed Folders</label>
294+
<label style={{ fontSize: 'calc(10px * var(--font-scale))', fontWeight: 500, color: '#A1A1AA', margin: 0 }}>Allowed Folders</label>
288295
<div className="bg-white/5 border border-white/10 rounded-xl custom-scrollbar" style={{ overflow: 'hidden', overflowY: 'auto', maxHeight: '180px' }}>
289296

290297
<label className="hover:bg-white/5 transition-colors cursor-pointer" style={{ display: 'flex', alignItems: 'center', gap: '16px', padding: '12px 16px', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
@@ -362,7 +369,7 @@ export function RbacSettingsDialog() {
362369
<div style={{ padding: '32px 32px 0 32px', flexShrink: 0 }}>
363370
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '24px' }}>
364371
<div className="bg-neutral-600 rounded-full" style={{ width: '4px', height: '16px' }} />
365-
<h3 style={{ fontSize: '14px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', color: '#D4D4D8', margin: 0 }}>
372+
<h3 style={{ fontSize: 'calc(11px * var(--font-scale))', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', color: '#D4D4D8', margin: 0 }}>
366373
Team Directory
367374
</h3>
368375
</div>
@@ -389,8 +396,8 @@ export function RbacSettingsDialog() {
389396
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
390397
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px', flex: 1, minWidth: 0 }}>
391398
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
392-
<span style={{ fontSize: '15px', fontWeight: 600, color: '#FFFFFF', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{member.email}</span>
393-
<span className="bg-white/5 border-white/10" style={{ padding: '2px 10px', borderRadius: '9999px', borderStyle: 'solid', borderWidth: '1px', fontSize: '11px', fontWeight: 700, color: '#A1A1AA', letterSpacing: '0.05em', textTransform: 'uppercase' }}>
399+
<span style={{ fontSize: 'calc(14px * var(--font-scale))', fontWeight: 600, color: '#FFFFFF', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{member.email}</span>
400+
<span className="bg-white/5 border-white/10" style={{ padding: '2px 10px', borderRadius: '9999px', borderStyle: 'solid', borderWidth: '1px', fontSize: 'calc(10px * var(--font-scale))', fontWeight: 700, color: '#A1A1AA', letterSpacing: '0.05em', textTransform: 'uppercase' }}>
394401
{member.role}
395402
</span>
396403
</div>

‎src/renderer/src/components/Sidebar.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -94,27 +94,27 @@ export function Sidebar() {
9494
<line x1="2" y1="4" x2="14" y2="4" /><line x1="2" y1="8" x2="10" y2="8" /><line x1="2" y1="12" x2="14" y2="12" />
9595
</svg>
9696
</button>
97-
<span className="text-[13px] font-semibold text-white tracking-tight">API Documenter</span>
97+
<span style={{ fontSize: 'calc(13px * var(--font-scale))', fontWeight: 600, color: 'white', letterSpacing: '-0.01em' }}>API Documenter</span>
9898
</div>
9999
</div>
100100

101101
{/* ═══ PROJECT section ═══ */}
102102
<div style={{ flexShrink: 0, borderBottom: '1px solid #1A1A1A' }}>
103-
<p className="text-[10px] tracking-[0.15em] uppercase font-bold"
104-
style={{ padding: '20px 20px 10px 20px', color: '#444', margin: 0 }}>Project Workspace</p>
103+
<p style={{ padding: '20px 20px 10px 20px', color: '#444', margin: 0, fontSize: 'calc(9px * var(--font-scale))', letterSpacing: '0.15em', textTransform: 'uppercase', fontWeight: 800 }}>Project Workspace</p>
105104
<div style={{ padding: '0 16px 20px 16px' }}>
106105
<select value={isTeamWorkspace ? 'TEAM_PROJECT' : (currentProjectId || '')}
107106
onChange={e => {
108107
if (e.target.value === 'TE_AM_CONNECT') { setShowTeamConnect(true); return }
109108
if (e.target.value === 'EXIT_TEAM') { setTeamWorkspace(false); return }
110109
selectProject(e.target.value || null)
111110
}}
112-
className="text-[13px] font-semibold rounded-xl cursor-pointer"
111+
className="rounded-xl cursor-pointer"
113112
style={{
114113
width: '100%', height: '44px', padding: '0 14px',
115114
background: isTeamWorkspace ? 'linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%)' : '#111111',
116115
border: isTeamWorkspace ? '1px solid #444' : '1px solid #222',
117116
color: '#FFFFFF',
117+
fontSize: 'calc(13px * var(--font-scale))', fontWeight: 600,
118118
appearance: 'none', transition: '150ms ease',
119119
backgroundImage: 'url("data:image/svg+xml,%3Csvg width=\'8\' height=\'5\' viewBox=\'0 0 8 5\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M1 1l3 3 3-3\' stroke=\'%236B7280\' stroke-width=\'1.5\' fill=\'none\' stroke-linecap=\'round\'/%3E%3C/svg%3E")',
120120
backgroundRepeat: 'no-repeat', backgroundPosition: 'right 14px center'
@@ -137,7 +137,7 @@ export function Sidebar() {
137137
{isTeamWorkspace && (
138138
<div className="mt-2 px-2 flex items-center gap-2">
139139
<span className="flex h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" />
140-
<span className="text-[10px] font-bold text-emerald-500 uppercase tracking-widest">Team Live Mode</span>
140+
<span style={{ fontSize: 'calc(9px * var(--font-scale))', fontWeight: 800, color: '#10b981', textTransform: 'uppercase', letterSpacing: '0.15em' }}>Team Live Mode</span>
141141
</div>
142142
)}
143143
</div>
@@ -147,8 +147,7 @@ export function Sidebar() {
147147
<div style={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column' }}>
148148
{currentProjectId && (
149149
<div style={{ padding: '16px 16px 8px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
150-
<p className="text-[11px] tracking-[0.1em] uppercase font-semibold"
151-
style={{ color: '#6B7280', margin: 0 }}>Folders</p>
150+
<p style={{ color: '#6B7280', margin: 0, fontSize: 'calc(10px * var(--font-scale))', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.1em' }}>Folders</p>
152151
<button
153152
onClick={() => syncNow()}
154153
disabled={isSyncing}

0 commit comments

Comments
 (0)