Improve layout responsiveness on narrow windows

Prevent horizontal overflow with overflow-x: hidden on body. Make the
gradient bar fill its container in focused mode (width: 100%;
min-width: 0) rather than holding a fixed minimum width.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Nathan Schneider
2026-03-20 15:56:58 -06:00
parent 721b588a2b
commit 0c794dddae
3 changed files with 11 additions and 0 deletions

View File

@@ -47,6 +47,7 @@ body {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
font-size: 16px;
overflow-x: hidden;
}
#app {

View File

@@ -214,6 +214,11 @@
width: 100%;
}
.gradient-row.focused .bar {
width: 100%;
min-width: 0;
}
.term {
text-align: center;
font-size: 0.9rem;

View File

@@ -189,6 +189,11 @@
width: 100%;
}
.gradient-row.focused .bar {
width: 100%;
min-width: 0;
}
.term {
text-align: center;
font-size: 0.9rem;