Add "wide" class for form inputs

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 class="wide">
-    <label>
+      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"] {
+.wide {
-  box-sizing: border-box;
-  width: 100%;
-}
-
-fieldset {
   display: flex;
   flex-direction: column;
-  border: none;
 }
 </style>

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>

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>