Skip to content

Commit 5e0032d

Browse files
Copilotmuke1908
Copilot
and
muke1908
authored
fix: make chat UI responsive for mobile screens (iPhone 13) (#441)
Agent-Logs-Url: https://github.com/muke1908/chat-e2ee/sessions/e498c114-7c02-4727-a09a-6f8e91c3d39e Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: muke1908 <20297989+muke1908@users.noreply.github.com>
1 parent ddbed3f commit 5e0032d

2 files changed

Lines changed: 99 additions & 1 deletion

File tree

‎client/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
77
<title>Chat E2EE - Minimal & Secure</title>
88
<link rel="stylesheet" href="./style.css">
99
<link rel="preconnect" href="https://fonts.googleapis.com">

‎client/style.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ body {
2222
background-color: var(--bg);
2323
color: var(--text);
2424
height: 100vh;
25+
height: 100dvh;
2526
overflow: hidden;
2627
background-image:
2728
radial-gradient(at 0% 0%, hsla(253, 16%, 7%, 1) 0, transparent 50%),
@@ -408,4 +409,101 @@ button.danger {
408409
button.large svg {
409410
width: 32px;
410411
height: 32px;
412+
}
413+
414+
/* ── Mobile responsive (≤ 480 px, e.g. iPhone 13 at 390 px) ─────────────── */
415+
@media (max-width: 480px) {
416+
/* Fill the entire viewport – no card-on-background look */
417+
#app {
418+
padding: 0;
419+
align-items: stretch;
420+
}
421+
422+
/* Chat container: full-screen, flush edges */
423+
#chat-container {
424+
max-width: 100%;
425+
max-height: 100%;
426+
height: 100%;
427+
border-radius: 0;
428+
}
429+
430+
/* Header: tighter padding + honour iOS notch */
431+
header {
432+
padding: 0.875rem 1rem;
433+
padding-top: calc(0.875rem + env(safe-area-inset-top));
434+
}
435+
436+
.header-info h2 {
437+
font-size: 1.05rem;
438+
}
439+
440+
/* Hide the long hash badge in the header to save space */
441+
.hash-badge-container {
442+
display: none;
443+
}
444+
445+
/* Messages area: slimmer padding */
446+
#messages-area {
447+
padding: 0.875rem 0.75rem;
448+
gap: 0.75rem;
449+
}
450+
451+
/* Bubbles can expand wider on a narrow screen */
452+
.message {
453+
max-width: 85%;
454+
font-size: 0.9rem;
455+
}
456+
457+
/* Footer: tighter padding + honour iOS home indicator */
458+
footer {
459+
padding: 0.75rem;
460+
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
461+
}
462+
463+
/* 16 px minimum prevents iOS Safari from zooming the page on input focus */
464+
input {
465+
font-size: 16px;
466+
}
467+
468+
/* Setup overlay: bottom-sheet style on mobile */
469+
.overlay {
470+
align-items: flex-end;
471+
}
472+
473+
.overlay-content {
474+
max-width: 100%;
475+
border-radius: 1.75rem 1.75rem 0 0;
476+
padding: 1.75rem 1.25rem;
477+
padding-bottom: calc(1.75rem + env(safe-area-inset-bottom));
478+
}
479+
480+
.overlay-content h1 {
481+
font-size: 1.5rem;
482+
}
483+
484+
/* Large buttons: reduce vertical padding so they don't feel too bulky */
485+
button.large {
486+
padding: 1rem 1.5rem;
487+
font-size: 1rem;
488+
}
489+
490+
/* Keep the two-column button group but with a tighter gap */
491+
.button-group {
492+
gap: 0.625rem;
493+
}
494+
495+
/* Call overlay: fit content to screen width */
496+
.blur-overlay {
497+
padding: 1rem;
498+
padding-bottom: calc(1rem + env(safe-area-inset-bottom));
499+
}
500+
501+
.call-avatar {
502+
width: 90px;
503+
height: 90px;
504+
}
505+
506+
#call-status {
507+
font-size: 1.25rem;
508+
}
411509
}

0 commit comments

Comments
 (0)