From 7fe10ebe5b6f33f59a2647cb36e5e056ff9370a3 Mon Sep 17 00:00:00 2001
From: Andrew <andreasohaodha@proton.me>
Date: Tue, 11 Jul 2023 21:24:15 +0100
Subject: [PATCH] fix stretched headerImage in StationSidebar

---
 src/components/StationSidebar.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/StationSidebar.vue b/src/components/StationSidebar.vue
index 94a0e7d..93370e5 100644
--- a/src/components/StationSidebar.vue
+++ b/src/components/StationSidebar.vue
@@ -3,7 +3,7 @@
     <div v-on:click="store.setDisplaySelectedStation(false)" id="xButton">🗙</div>
     <h2>Station Code: {{ store.selectedStation["StationCode"][0] }}</h2>
     <div id="sidebarHeader">
-        <img id="headerImage" src="../assets/station.png" alt="Station Icon">
+        <img id="headerImage" src="../assets/station.png" alt="Station Icon" style="object-fit: contain;">
     </div>
 
     <div id="sidebarDiv">
@@ -91,6 +91,7 @@ export default {
 }
 
 #typeDiv, #positionDiv, #descriptionDiv{
+  object-fit: contain;
   background-color: rgb(230, 230, 230);
   height: 12%;
   position: absolute;
@@ -128,7 +129,10 @@ export default {
 
 #latP{left: 3%;}
 
-#typeImage{width: 70%;}
+#typeImage{
+  object-fit: contain;
+  width: 70%;
+}
 
 #positionDiv{top: 16%;}
 #descriptionDiv{top: 29.5%;}
@@ -142,7 +146,7 @@ export default {
   }
 
   #typeImage{
-  bject-fit: contain;
+  object-fit: contain;
   width: 50%;
   }