From 965cedf5a2e83886153df6af4a2d932b6df7a845 Mon Sep 17 00:00:00 2001
From: Joscha <joscha@plugh.de>
Date: Mon, 3 Mar 2025 15:52:13 +0100
Subject: [PATCH] Add "wide" class for form inputs

---
 .../src/components/CSegmentCalendar.vue           | 15 ++++++---------
 .../src/components/CSegmentEgg.vue                | 12 +++---------
 .../src/components/CSegmentText.vue               |  7 +++++--
 3 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/showbits-thermal-printer-ui/src/components/CSegmentCalendar.vue b/showbits-thermal-printer-ui/src/components/CSegmentCalendar.vue
index 185a74a..beca989 100644
--- a/showbits-thermal-printer-ui/src/components/CSegmentCalendar.vue
+++ b/showbits-thermal-printer-ui/src/components/CSegmentCalendar.vue
@@ -23,8 +23,11 @@ function submit() {
 <template>
   <form ref="form" @submit.prevent="submit">
     <h2>Calendar</h2>
-    <label>Year: <input v-model="year" type="number" /></label>
-    <label>
+    <label class="wide">
+      Year:
+      <input v-model="year" type="number" />
+    </label>
+    <label class="wide">
       Month:
       <input v-model="month" type="number" min="1" max="12" />
     </label>
@@ -41,14 +44,8 @@ form {
   gap: 16px;
 }
 
-input[type="number"] {
-  box-sizing: border-box;
-  width: 100%;
-}
-
-fieldset {
+.wide {
   display: flex;
   flex-direction: column;
-  border: none;
 }
 </style>
diff --git a/showbits-thermal-printer-ui/src/components/CSegmentEgg.vue b/showbits-thermal-printer-ui/src/components/CSegmentEgg.vue
index b5bf09b..567989b 100644
--- a/showbits-thermal-printer-ui/src/components/CSegmentEgg.vue
+++ b/showbits-thermal-printer-ui/src/components/CSegmentEgg.vue
@@ -28,7 +28,7 @@ function submit() {
         d="M0,0 C1,0,2,2,2,3.5 S1,6,0,6 S-2,5,-2,3.5 S-1,0,0,0"
       />
     </svg>
-    <label>
+    <label class="wide">
       Seed:
       <input
         v-model="seed"
@@ -39,7 +39,7 @@ function submit() {
         placeholder="random"
       />
     </label>
-    <label>
+    <label class="wide">
       Mode:
       <select v-model="mode">
         <option value="random">Random</option>
@@ -60,19 +60,13 @@ form {
   gap: 16px;
 }
 
-input[type="number"] {
-  box-sizing: border-box;
-  width: 100%;
-}
-
 svg {
   width: 50%;
   margin: auto;
 }
 
-fieldset {
+.wide {
   display: flex;
   flex-direction: column;
-  border: none;
 }
 </style>
diff --git a/showbits-thermal-printer-ui/src/components/CSegmentText.vue b/showbits-thermal-printer-ui/src/components/CSegmentText.vue
index 1e924fb..375c7c3 100644
--- a/showbits-thermal-printer-ui/src/components/CSegmentText.vue
+++ b/showbits-thermal-printer-ui/src/components/CSegmentText.vue
@@ -43,7 +43,7 @@ function submit() {
       :disabled
       @keypress="textareaKeypress"
     ></textarea>
-    <fieldset>
+    <fieldset class="wide">
       <label>
         <input v-model="forceWrap" type="checkbox" :disabled />
         Force-Wrap
@@ -71,9 +71,12 @@ textarea {
   max-width: fit-content;
 }
 
-fieldset {
+.wide {
   display: flex;
   flex-direction: column;
+}
+
+fieldset {
   border: none;
 }
 </style>