From d643259102b11a301072e7b33f211eeebebd318a Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Sat, 21 Mar 2026 19:24:38 +0100
Subject: [PATCH] chore(scenery): improved thumbnails toggle button appearance

---
 .../SceneryTimetable/SceneryTimetableList.vue    | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/SceneryView/SceneryTimetable/SceneryTimetableList.vue b/src/components/SceneryView/SceneryTimetable/SceneryTimetableList.vue
index f5ec2b4..2dba305 100644
--- a/src/components/SceneryView/SceneryTimetable/SceneryTimetableList.vue
+++ b/src/components/SceneryView/SceneryTimetable/SceneryTimetableList.vue
@@ -244,13 +244,15 @@
         <img src="/images/icon-tablice.ico" alt="icon-tablice" />
       </a>
 
+      <div class="list-divider"></div>
+
       <button
         class="thumbnails-btn"
         data-tooltip-type="HtmlTooltip"
         :data-tooltip-content="`<b>${$t(`scenery.btn-${showStockThumbnails ? 'show' : 'hide'}-timetable-thumbnails`)}</b>`"
         @click="toggleThumbnails"
       >
-        <i class="fa-solid" :class="`${showStockThumbnails ? 'fa-eye' : 'fa-eye-slash'}`"></i>
+        <i class="fa-solid" :class="`${showStockThumbnails ? 'fa-expand' : 'fa-compress'}`"></i>
       </button>
     </div>
   </div>
@@ -376,7 +378,7 @@ function toggleThumbnails() {
 
 .scenery-timetable-list {
   display: grid;
-  grid-template-rows: auto 1fr auto;
+  grid-template-rows: auto 1fr 40px;
   overflow: hidden;
 }
 
@@ -534,14 +536,22 @@ function toggleThumbnails() {
   gap: 0.5em;
   margin-top: 0.5em;
 
+  .list-divider {
+    height: 80%;
+    width: 3px;
+    background-color: #6b6b6b;
+  }
+
   img {
     width: 25px;
+    height: 25px;
     vertical-align: middle;
   }
 
   .thumbnails-btn {
     width: 25px;
-    font-size: 1.2em;
+    height: 25px;
+    font-size: 25px;
   }
 }