Fixed style

src/AppComponent.vue

@@ -8,7 +8,7 @@
         </div>
         <router-view />
       </div>
-      <div class="right-column rightcolumnvisibility" v-if="showRightColumn">
+      <div class="right-column" v-if="showRightColumn">
         <router-view name="rightColumn" />
       </div>
     </main>
@@ -64,7 +64,7 @@ body {
   background-color: #ffffff;
   font-family: Arial, sans-serif;
   width: 100%;
-  overflow: hidden;
+  overflow-x: hidden; /* Prevent horizontal scrolling */
 }
 
 #app {
@@ -78,7 +78,6 @@ body {
   display: flex;
   color: #000;
   overflow-y: hidden;
-  overflow-x: auto;
 }
 
 .left-column {
@@ -114,14 +113,15 @@ body {
   overflow-y: hidden;
   margin-top: 10px;
   background-color: #d9e2f3;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-@media (max-width: 1400px) and (min-width: 1201px) {
+.right-column-overlay img {
-
+  max-height: 100%;
-  .left-column,
+  max-width: 100%;
-  .right-column {
+  object-fit: contain;
-    flex: 0 0 50%;
-  }
 }
 
 @media (max-width: 1200px) {
@@ -129,14 +129,25 @@ body {
     flex-direction: column;
   }
 
-  .left-column,
+  .left-column {
-  .right-column {
     padding: 10px;
   }
 
-  .rightcolumnvisibility {
+  .right-column {
     display: none;
   }
+
+  .right-column-overlay {
+    display: flex;
+    max-height: 150px;
+    background-color: #ffffff;
+  }
+
+  .right-column-overlay img {
+    max-height: 150px;
+    max-width: 100%;
+    object-fit: contain;
+  }
 }
 
 @media (max-width: 767px) {
@@ -149,18 +160,13 @@ body {
     padding: 10px;
   }
 
-  .rightcolumnvisibility {
+  .right-column {
     display: none;
   }
 
   .right-column-overlay {
-    display: block;
+    display: flex;
   }
 }
-
-.right-column-overlay > .right-column > img {
-  max-height: 130px;
-  margin: 0;
-}
 /* eslint-enable */
 </style>

src/content/ImageContent.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
     <img :src="currentImage" alt="Cross" />
-  </div>
 </template>
 
 <script>