fix responsive behaviour

app.vue

@@ -109,7 +109,7 @@ body {
 }
 
 .v-footer {
-  max-height: 36px;
+  min-height: 36px;
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -122,7 +122,7 @@ body {
   }
 
   span {
-    margin: 0 24px;
+    margin: 0 12px;
   }
 }
 

components/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-footer no-gutters :height="36" class="footer">
+  <v-footer no-gutters :height="$vuetify.display.smAndDown ? 48 : 36" class="footer">
     <div class="footer-content">
       <span>{{ $t('footer_copyright', { year: new Date().getFullYear() }) }}</span>
       <span class="divider">|</span>
@@ -10,8 +10,10 @@
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
 
 const { t } = useI18n()
+const { smAndDown } = useDisplay()
 </script>
 
 <style scoped lang="scss">

components/LanguageSelector.vue

@@ -6,6 +6,7 @@
     density="compact"
     variant="plain"
     :hide-details="true"
+    class="language-selector"
   >
     <template v-slot:selection="data">
       <v-img :src="data.item.raw.logo" left :width="16" class="mr-2"/>
@@ -41,6 +42,14 @@
 </script>
 
 <style scoped lang="scss">
+.language-selector {
+  max-width: 80px;
+  
+  :deep(.v-field) {
+    flex: 0 0 auto;
+  }
+}
+
 :deep(.v-field__input) {
   padding: 0;
 }
@@ -48,6 +57,7 @@
 :deep(.v-select__menu-icon) {
   font-size: 15px;
   margin-top: 1px;
+  margin-left: 0;
 }
 
 :deep(.v-list) {

components/Topbar.vue

@@ -112,12 +112,20 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+    
+    @media (max-width: 600px) {
+      margin-top: 16px;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
 
     > * {
       margin-left: 24px;
 
       @media (max-width: 540px) {
         margin-left: 12px;
+        margin-right: 12px;
+        margin-bottom: 8px;
       }
     }
 

pages/index.vue

@@ -12,11 +12,11 @@
         :alt="$t('main_image_alt')"
         cover
         eager
-        height="500"
+        :height="$vuetify.display.xs ? 300 : 500"
         class="main-image rounded-lg"
         :loading="loading"
         @click="selectImage('/images/photos/IMG_2216.min.JPG')"
-        style="cursor: pointer;"
+        style="cursor: pointer; max-width: 100%;"
       ></v-img>
     </div>
 
@@ -40,7 +40,7 @@
     <!-- Description Section -->
     <div class="description-container mt-10">
       <h2>{{ $t('welcome_heading') }}</h2>
-      <v-card class="pa-5 rounded-lg elevation-2">
+      <v-card class="pa-5 rounded-lg elevation-2" style="max-width: 100%; overflow-wrap: break-word;">
         <p class="text-body-1">
           {{ $t('welcome_description') }}
         </p>
@@ -52,7 +52,7 @@
       <h2>{{ $t('features_heading') }}</h2>
       <v-row>
         <v-col cols="12" md="6">
-          <v-card class="pa-5 h-100 rounded-lg elevation-2">
+          <v-card class="pa-5 h-100 rounded-lg elevation-2" style="max-width: 100%; overflow-wrap: break-word;">
             <h3 class="text-h6 mb-4">{{ $t('general_info_heading') }}</h3>
             <ul class="feature-list">
               <li>{{ $t('general_info_item_1') }}</li>
@@ -65,7 +65,7 @@
           </v-card>
         </v-col>
         <v-col cols="12" md="6">
-          <v-card class="pa-5 h-100 rounded-lg elevation-2">
+          <v-card class="pa-5 h-100 rounded-lg elevation-2" style="max-width: 100%; overflow-wrap: break-word;">
             <h3 class="text-h6 mb-4">{{ $t('equipment_heading') }}</h3>
             <ul class="feature-list">
               <li>{{ $t('equipment_item_1') }}</li>
@@ -83,7 +83,7 @@
     <!-- Location Section -->
     <div class="location-container mt-10">
       <h2>{{ $t('location_heading') }}</h2>
-      <v-card class="pa-5 rounded-lg elevation-2">
+      <v-card class="pa-5 rounded-lg elevation-2" style="max-width: 100%; overflow-wrap: break-word;">
         <ul class="feature-list">
           <li>{{ $t('location_item_1') }}</li>
           <li>{{ $t('location_item_2') }}</li>
@@ -96,7 +96,7 @@
     <!-- Conditions Section -->
     <div class="conditions-container mt-10">
       <h2>{{ $t('conditions_heading') }}</h2>
-      <v-card class="pa-5 rounded-lg elevation-2">
+      <v-card class="pa-5 rounded-lg elevation-2" style="max-width: 100%; overflow-wrap: break-word;">
         <ul class="feature-list">
           <li>{{ $t('conditions_item_1') }}</li>
           <li>{{ $t('conditions_item_2') }}</li>
@@ -109,7 +109,7 @@
     <!-- Contact Section -->
     <div id="contact" class="contact-container mt-10">
       <h2>{{ $t('contact_heading') }}</h2>
-      <v-card class="pa-5 rounded-lg elevation-2">
+      <v-card class="pa-5 rounded-lg elevation-2" style="max-width: 100%; overflow-wrap: break-word;">
         <Contact />
       </v-card>
     </div>
@@ -125,6 +125,8 @@
             :src="selectedImageSrc"
             class="enlarged-image"
             :loading="loading"
+            max-width="100%"
+            contain
           >
             <template v-slot:placeholder>
               <div class="d-flex align-center justify-center" style="height: 300px;">
@@ -177,6 +179,13 @@ const selectImage = (src: string) => {
 .rental-container {
   max-width: 1200px;
   margin: 0 auto;
+  padding: 0 16px;
+  width: 100%;
+  box-sizing: border-box;
+  
+  @media (max-width: 600px) {
+    padding: 0 8px;
+  }
 }
 
 .text-body-1 {
@@ -198,6 +207,8 @@ const selectImage = (src: string) => {
   cursor: pointer;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   transition: transform 0.2s ease;
+  max-width: 100%;
+  height: auto !important;
 
   &:hover {
     transform: scale(1.05);
@@ -254,6 +265,11 @@ h3 {
   margin: 0 auto;
   max-height: 90vh;
   width: auto;
+  max-width: 100%;
+  
+  @media (max-width: 600px) {
+    max-height: 80vh;
+  }
 }
 
 :deep(.image-modal-dialog) {