From d09063b3f344a1253d8c8d1205b6ca5ffb35cf0c Mon Sep 17 00:00:00 2001
From: Joscha <joscha@plugh.de>
Date: Mon, 3 Mar 2025 23:53:25 +0100
Subject: [PATCH] Fix text area width on chrome

---
 .../src/components/CDocumentChat.vue                      | 8 +++-----
 .../src/components/CDocumentText.vue                      | 8 +++-----
 2 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/showbits-thermal-printer-ui/src/components/CDocumentChat.vue b/showbits-thermal-printer-ui/src/components/CDocumentChat.vue
index 82addf2..27550ac 100644
--- a/showbits-thermal-printer-ui/src/components/CDocumentChat.vue
+++ b/showbits-thermal-printer-ui/src/components/CDocumentChat.vue
@@ -43,12 +43,10 @@ function submit() {
     </label>
 
     <label for="content">Content:</label>
-    <!-- For some reason one col = 2 characters. -->
     <textarea
       id="content"
       v-model="content"
       rows="10"
-      cols="24"
       :disabled
       @keypress="textareaKeypress"
     ></textarea>
@@ -71,11 +69,11 @@ textarea {
   margin-top: -16px;
 
   align-self: center;
-  width: fit-content;
+  width: 384px;
 
   /* Prevent manual resizing from changing the width. */
-  min-width: fit-content;
-  max-width: fit-content;
+  min-width: 384px;
+  max-width: 384px;
 
   /* Emulate how typst wraps text. */
   overflow-wrap: normal;
diff --git a/showbits-thermal-printer-ui/src/components/CDocumentText.vue b/showbits-thermal-printer-ui/src/components/CDocumentText.vue
index 41949a2..aeb95a7 100644
--- a/showbits-thermal-printer-ui/src/components/CDocumentText.vue
+++ b/showbits-thermal-printer-ui/src/components/CDocumentText.vue
@@ -35,11 +35,9 @@ function submit() {
   <form ref="form" @submit.prevent="submit">
     <h2>Text</h2>
 
-    <!-- For some reason one col = 2 characters. -->
     <textarea
       v-model="text"
       rows="10"
-      cols="24"
       :style="textareaStyle"
       :disabled
       @keypress="textareaKeypress"
@@ -67,11 +65,11 @@ form {
 
 textarea {
   align-self: center;
-  width: fit-content;
+  width: 384px;
 
   /* Prevent manual resizing from changing the width. */
-  min-width: fit-content;
-  max-width: fit-content;
+  min-width: 384px;
+  max-width: 384px;
 }
 
 .wide {