New CustomerInventory,

New Mitgliederverwaltung für Vereine
New Bank Auto Complete

frontend/components/LabelPrintModal.vue

@@ -44,7 +44,9 @@ async function loadLabel() {
     labelData.value = await $api(`/api/print/label`, {
       method: "POST",
       body: JSON.stringify({
-        context: props.context || null
+        context: props.context || null,
+        width: 584,
+        height: 354
       })
     })
   } catch (err) {
@@ -78,11 +80,17 @@ onMounted(() => {
 
 })
 
+watch(() => labelPrinter.connected, (connected) => {
+  if (connected && !labelData.value) {
+    loadLabel()
+  }
+})
+
 </script>
 
 <template>
-  <UModal>
-    <UCard>
+  <UModal :ui="{ width: 'sm:max-w-5xl' }">
+    <UCard class="w-[92vw] max-w-5xl">
 
       <template #header>
         <div class="flex items-center justify-between">
@@ -91,11 +99,11 @@ onMounted(() => {
         </div>
       </template>
 
-      <div v-if="!loading && labelPrinter.connected">
+      <div v-if="!loading && labelPrinter.connected" class="w-full">
         <img
             :src="`data:image/png;base64,${labelData.base64}`"
             alt="Label Preview"
-            class="max-w-full max-h-64 object-contain"
+            class="w-full max-h-[70vh] object-contain"
         />
       </div>
       <div v-else-if="loading && !labelPrinter.connected">