diff --git a/src/ui/styles.css b/src/ui/styles.css index 43c9b89..cc36774 100644 --- a/src/ui/styles.css +++ b/src/ui/styles.css @@ -199,6 +199,8 @@ label:focus-within { border: 4px double #080b10; } .screen { + /* Lets the dialogue text size follow the width of the game screen. */ + container-type: inline-size; position: relative; min-width: 0; min-height: 0; @@ -318,7 +320,11 @@ dialog h2 { box-shadow: 4px 4px 0 #0007; } .native-dialogue p { - max-height: 120px; + /* The box is wide and the ROM's lines are 18 characters, so the text scales + with the screen; the text-size setting multiplies it. */ + font-size: calc(clamp(15px, 2.2cqw, 40px) * var(--text-scale)); + line-height: 1.4; + max-height: 7em; overflow: auto; margin: 0; white-space: pre-line;