Improve panoramablick-saalbach.at

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>

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>

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>

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: {