From 55b7e71d0d7fe91e3ae815ca1f07a7fd7ba5856b Mon Sep 17 00:00:00 2001
From: Dominik Milacher <code@dominikmilacher.com>
Date: Fri, 21 Nov 2025 21:39:17 +0100
Subject: [PATCH] Improve panoramablick-saalbach.at

---
 .../app/components/AppApartment.vue                 | 13 ++++++++++++-
 .../app/pages/[locale]/book.vue                     | 13 ++++++++++---
 .../app/pages/[locale]/contact.vue                  | 12 ++++++++++--
 .../layers/ux/app/components/XContainer/Buttons.vue |  2 +-
 4 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/apps/panoramablick-saalbach.at/app/components/AppApartment.vue b/apps/panoramablick-saalbach.at/app/components/AppApartment.vue
index b1895e1..3e77623 100644
--- a/apps/panoramablick-saalbach.at/app/components/AppApartment.vue
+++ b/apps/panoramablick-saalbach.at/app/components/AppApartment.vue
@@ -1,6 +1,16 @@
 <script setup lang="ts">
 const { g, p } = useContentInjected()
 defineProps<{ apartment: any; index: number }>()
+
+const version = ref(0)
+const loaded = new Set<string>()
+
+function updateVersion(img: string) {
+  if (!loaded.has(img)) {
+    loaded.add(img)
+    ++version.value
+  }
+}
 </script>
 
 <template>
@@ -8,6 +18,7 @@ defineProps<{ apartment: any; index: number }>()
     <XContainerHeroContentButtons hero="top" buttons="bottom">
       <template #hero>
         <UCarousel
+          :key="version"
           v-slot="{ item }"
           loop
           arrows
@@ -27,7 +38,7 @@ defineProps<{ apartment: any; index: number }>()
           }"
         >
           <div class="h-60 flex flex-row justify-center">
-            <NuxtImg :src="item" class="h-full" />
+            <NuxtImg :src="item" class="h-full" @load="updateVersion(item)" />
           </div>
         </UCarousel>
       </template>
diff --git a/apps/panoramablick-saalbach.at/app/pages/[locale]/book.vue b/apps/panoramablick-saalbach.at/app/pages/[locale]/book.vue
index 0765f51..1e54781 100644
--- a/apps/panoramablick-saalbach.at/app/pages/[locale]/book.vue
+++ b/apps/panoramablick-saalbach.at/app/pages/[locale]/book.vue
@@ -26,6 +26,13 @@ useHead({
   ],
 })
 
+const route = useRoute()
+
+const src = computed(() => {
+  const lg = route.params.locale === 'de' ? 0 : 1
+  return `https://www.capcorn.net/Query?MB=1487&FL=17&LG=${lg}&maxZim=3&zimDe=Apartment&zimEn=Apartment&showVpf=0`
+})
+
 // LG=0 für deutsch, LG=1 für englisch
 // MP = maximale personenzahl
 // maxZim
@@ -37,12 +44,12 @@ useHead({
       <ClientOnly>
         <iframe
           id="iframeCapCorn"
-          src="https://www.capcorn.net/Query?MB=1487&FL=17&LG=0&maxZim=3&zimDe=Apartment&zimEn=Apartment&showVpf=0"
+          :src="src"
           frameborder="0"
           width="100%"
           scrolling="auto"
-        >
-        </iframe>
+          class="min-h-[30rem]"
+        />
       </ClientOnly>
     </AppSection>
   </XScaffoldGridPage>
diff --git a/apps/panoramablick-saalbach.at/app/pages/[locale]/contact.vue b/apps/panoramablick-saalbach.at/app/pages/[locale]/contact.vue
index 955ac42..12b1b74 100644
--- a/apps/panoramablick-saalbach.at/app/pages/[locale]/contact.vue
+++ b/apps/panoramablick-saalbach.at/app/pages/[locale]/contact.vue
@@ -25,6 +25,13 @@ useHead({
     },
   ],
 })
+
+const route = useRoute()
+
+const src = computed(() => {
+  const lg = route.params.locale === 'de' ? 0 : 1
+  return `https://www.capcorn.net/MasterReq?FT=9&MB=1487&FL=17&LG=${lg}`
+})
 </script>
 
 <template>
@@ -99,11 +106,12 @@ useHead({
       <ClientOnly>
         <iframe
           id="iframeCapCorn"
-          src="https://www.capcorn.net/MasterReq?FT=9&MB=1487&FL=17&LG=0"
+          :src="src"
           frameborder="0"
           width="100%"
           scrolling="auto"
-        ></iframe>
+          class="min-h-[30rem]"
+        />
       </ClientOnly>
     </AppSection>
   </XScaffoldGridPage>
diff --git a/packages/layers/ux/app/components/XContainer/Buttons.vue b/packages/layers/ux/app/components/XContainer/Buttons.vue
index 520fe7a..dd40a63 100644
--- a/packages/layers/ux/app/components/XContainer/Buttons.vue
+++ b/packages/layers/ux/app/components/XContainer/Buttons.vue
@@ -136,7 +136,7 @@ const classes = useStyling(
   `containerButtons`,
   {
     slots: {
-      base: `w-full self-start flex justify-start items-start [&>*]:min-w-[12ch] [&>*]:justify-center`,
+      base: `w-full self-start flex justify-start items-start [&>*]:min-w-[15ch] [&>*]:justify-center`,
     },
     variants: {
       axis: {