Checkpoint before character generator cleanup

public/css/style.css

@@ -949,10 +949,30 @@ button:focus-visible {
 }
 
 #story_popup_message {
+    flex: 1 1 auto;
+    min-height: 0;
     white-space: pre-wrap;
     line-height: 1.35;
     font-size: var(--ui-modal-font-size);
     padding: calc(var(--story-line-height) * 0.45) calc(var(--story-line-height) * 0.7);
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(43, 31, 20, 0.58) rgba(151, 111, 64, 0.08);
+}
+
+#story_popup_message::-webkit-scrollbar {
+    width: 0.22rem;
+}
+
+#story_popup_message::-webkit-scrollbar-track {
+    background: rgba(151, 111, 64, 0.08);
+    border-radius: 999px;
+}
+
+#story_popup_message::-webkit-scrollbar-thumb {
+    background-color: rgba(43, 31, 20, 0.58);
+    border-radius: 999px;
 }
 
 #story_popup_ok { align-self: flex-end; }
@@ -1081,7 +1101,7 @@ button:focus-visible {
     position: absolute;
     left: 1rem;
     right: 3rem;
-    top: 43.6%;
+    top: 39.2%;
     bottom: 3.15rem;
     box-sizing: border-box;
     display: flex;
@@ -1188,7 +1208,7 @@ html[data-input-mode="text"][data-process-state="ready"] body[data-game-running=
     width: 100%;
     flex: 1 1 auto;
     min-height: 0;
-    max-height: 100%;
+    max-height: calc((1rem * 1.25 + 0.36rem + 0.24rem) * 10 + 0.16rem);
     margin: 0;
     opacity: 0;
     visibility: hidden;