fix(ZMSKVR-719): overlapping textinput in zmscitizenview (#1713)

* fix(ZMSKVR-719): Anpassung Textfeldgröße bei kleinem Viewport

* fix(ZMSKVR-719): removed style issue

* fix(ZMSKVR-719): coderabbit suggestion, update on window resize

* fix(ZMSKVR-719): outsourcing in new utils file

* fix(ZMSKVR-719): add SSR safety check

* fix(ZMSKVR-719): improved readability

* fix(ZMSKVR-719): code style issue

---------

Co-authored-by: Christian Vierthaler <[email protected]>

Author: ChristianVierthaler

zmscitizenview/src/components/Appointment/CustomerInfo.vue

@@ -115,6 +115,7 @@
       :label="selectedProvider.scope.customTextfieldLabel ?? undefined"
       :required="selectedProvider.scope.customTextfieldRequired ?? undefined"
       :maxlength="100"
+      :rows="textfieldRows"
     />
     <muc-text-area
       v-if="
@@ -128,6 +129,7 @@
       :label="selectedProvider.scope.customTextfield2Label ?? undefined"
       :required="selectedProvider.scope.customTextfield2Required ?? undefined"
       :maxlength="100"
+      :rows="textfieldRows"
     />
   </form>
   <div class="m-button-group">
@@ -167,6 +169,7 @@ import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 import { GlobalState } from "@/types/GlobalState";
 import { CustomerDataProvider } from "@/types/ProvideInjectTypes";
+import { textfieldRows, updateWindowWidth } from "@/utils/textfieldRows";
 import { useReservationTimer } from "@/utils/useReservationTimer";
 
 const props = defineProps<{
@@ -289,6 +292,18 @@ const errorDisplayTelephoneNumber = computed(
     errorMessageTelephoneNumber.value ?? maxLengthMessageTelephoneNumber.value
 );
 
+onMounted(() => {
+  if (typeof window !== "undefined") {
+    window.addEventListener("resize", updateWindowWidth);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (typeof window !== "undefined") {
+    window.removeEventListener("resize", updateWindowWidth);
+  }
+});
+
 const errorMessageCustomTextfield = computed(() => {
   if (!showErrorMessage.value) return undefined;
 

zmscitizenview/src/utils/textfieldRows.ts

@@ -0,0 +1,19 @@
+import { computed, ref } from "vue";
+
+const pivotWidth = 500;
+const smallScreenTextareaRows = 6;
+const bigScreenTextareaRows = 3;
+
+const windowWidth = ref(typeof window !== "undefined" ? window.innerWidth : 0);
+
+export const updateWindowWidth = () => {
+  if (typeof window !== "undefined") {
+    windowWidth.value = window.innerWidth;
+  }
+};
+
+export const textfieldRows = computed(() => {
+  return windowWidth.value <= pivotWidth
+    ? smallScreenTextareaRows
+    : bigScreenTextareaRows;
+});