refactor: dialogue styles

app/react-components/dom/dialogue.jsx

@@ -141,20 +141,11 @@ export default function Dialogue({
   caretPosition.y += Math.cos(caretRotation) * (CARET_SIZE / 2);
   return (
     <div
+      className={styles.dialogue}
       ref={ref}
       style={{
-        backgroundColor: '#00000044',
-        border: 'solid 1px white',
-        borderRadius: '8px',
-        color: 'white',
-        padding: '1em',
-        position: 'absolute',
         left: `${left}px`,
-        margin: '0',
         top: `${top}px`,
-        transform: 'translate(-50%, -50%)',
-        userSelect: 'none',
-        whiteSpace: 'nowrap',
       }}
     >
       <svg
@@ -174,6 +165,7 @@ export default function Dialogue({
       >
         <polygon points="0 0, 24 0, 12 24" />
       </svg>
+      <p className={styles.letters}>
         {
           dialogue.letters
             .map(({character, indices, params}, i) => {
@@ -230,6 +222,7 @@ export default function Dialogue({
               );
             })
         }
+      </p>
     </div>
   );
 }

app/react-components/dom/dialogue.module.css

@@ -6,6 +6,23 @@
   top: 50%;
 }
 
+.dialogue {
+  background-color: #00000044;
+  border: solid 1px white;
+  border-radius: 8px;
+  color: white;
+  padding: 1em;
+  position: absolute;
+  margin: 0;
+  transform: translate(-50%, -50%);
+  user-select: none;
+  width: 33%;
+}
+
+.letters {
+  margin: 0;
+}
+
 .letter {
   opacity: 0;
   position: relative;