Codex Claude Sonnet 4.6 commited on
Commit ·
166350a
1
Parent(s): a2ce6f2
Fix mobile layout: stack columns vertically, restore scroll
Browse filesTwo-column row was clipping off-screen on phones. Columns now wrap to
full width on ≤820px. Also fixes iOS Safari scroll by switching
background-attachment to scroll and adding overflow-y: auto.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- ui/layout.py +59 -2
ui/layout.py
CHANGED
|
@@ -30,6 +30,7 @@ THEMES = [
|
|
| 30 |
# Fonts: injected via <head> (reliable) instead of CSS @import (often stripped).
|
| 31 |
# ---------------------------------------------------------------------------
|
| 32 |
HEAD = """
|
|
|
|
| 33 |
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 34 |
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 35 |
<link href="https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Caveat:wght@500;700&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
|
|
@@ -470,8 +471,64 @@ body, gradio-app {
|
|
| 470 |
|
| 471 |
/* ============================== RESPONSIVE ============================== */
|
| 472 |
@media (max-width: 820px) {
|
| 473 |
-
|
| 474 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 475 |
}
|
| 476 |
|
| 477 |
/* ============================== ACCESSIBILITY ============================== */
|
|
|
|
| 30 |
# Fonts: injected via <head> (reliable) instead of CSS @import (often stripped).
|
| 31 |
# ---------------------------------------------------------------------------
|
| 32 |
HEAD = """
|
| 33 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
|
| 34 |
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 35 |
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 36 |
<link href="https://fonts.googleapis.com/css2?family=Gaegu:wght@400;700&family=Caveat:wght@500;700&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
|
|
|
|
| 471 |
|
| 472 |
/* ============================== RESPONSIVE ============================== */
|
| 473 |
@media (max-width: 820px) {
|
| 474 |
+
/* Fixed backgrounds kill touch-scroll on iOS Safari */
|
| 475 |
+
body, gradio-app {
|
| 476 |
+
background-attachment: scroll !important;
|
| 477 |
+
}
|
| 478 |
+
|
| 479 |
+
/* Allow the page to scroll vertically, not overflow horizontally */
|
| 480 |
+
html, body {
|
| 481 |
+
height: auto !important;
|
| 482 |
+
overflow-y: auto !important;
|
| 483 |
+
overflow-x: hidden !important;
|
| 484 |
+
-webkit-overflow-scrolling: touch !important;
|
| 485 |
+
}
|
| 486 |
+
|
| 487 |
+
gradio-app {
|
| 488 |
+
height: auto !important;
|
| 489 |
+
min-height: 100vh !important;
|
| 490 |
+
overflow-y: visible !important;
|
| 491 |
+
overflow-x: hidden !important;
|
| 492 |
+
}
|
| 493 |
+
|
| 494 |
+
/* Keep container within viewport width */
|
| 495 |
+
.gradio-container {
|
| 496 |
+
max-width: 100vw !important;
|
| 497 |
+
overflow-x: hidden !important;
|
| 498 |
+
padding: 0 !important;
|
| 499 |
+
}
|
| 500 |
+
|
| 501 |
+
/* Stack the two main columns: allow flex-wrap, then make each card full-width */
|
| 502 |
+
.gradio-container .gap {
|
| 503 |
+
flex-wrap: wrap !important;
|
| 504 |
+
}
|
| 505 |
+
|
| 506 |
+
.input-card, .output-card {
|
| 507 |
+
transform: none !important;
|
| 508 |
+
flex: 1 1 100% !important;
|
| 509 |
+
width: 100% !important;
|
| 510 |
+
max-width: 100% !important;
|
| 511 |
+
min-width: 0 !important;
|
| 512 |
+
margin: 8px 0 !important;
|
| 513 |
+
box-sizing: border-box !important;
|
| 514 |
+
}
|
| 515 |
+
|
| 516 |
+
/* Slightly smaller title on phones */
|
| 517 |
+
.app-title {
|
| 518 |
+
font-size: clamp(32px, 10vw, 52px) !important;
|
| 519 |
+
}
|
| 520 |
+
|
| 521 |
+
/* Story-book pages: full width, smaller margin */
|
| 522 |
+
.book-page {
|
| 523 |
+
max-width: 100%;
|
| 524 |
+
margin: 20px auto;
|
| 525 |
+
}
|
| 526 |
+
|
| 527 |
+
/* Theme / voice chips: tighter on small screens */
|
| 528 |
+
.theme-pick label {
|
| 529 |
+
font-size: 14px !important;
|
| 530 |
+
padding: 6px 10px !important;
|
| 531 |
+
}
|
| 532 |
}
|
| 533 |
|
| 534 |
/* ============================== ACCESSIBILITY ============================== */
|