From cdc188c5b06e990cc363a914a904d6af34efabd1 Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Thu, 16 Apr 2026 00:54:16 +0200
Subject: [PATCH] chore(scenery): top list styling

---
 src/components/SceneryView/SceneryTopList.vue | 52 ++++++++++++-------
 src/views/SceneryView.vue                     |  2 +-
 2 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/src/components/SceneryView/SceneryTopList.vue b/src/components/SceneryView/SceneryTopList.vue
index cce03ec..97de9e1 100644
--- a/src/components/SceneryView/SceneryTopList.vue
+++ b/src/components/SceneryView/SceneryTopList.vue
@@ -28,23 +28,18 @@
       <Loading v-if="listState == Status.Data.Loading" />
       <div v-else-if="listState == Status.Data.Error">Ups, coś poszło nie tak...</div>
 
-      <ul v-else-if="currentListMode == 'dispatchers'" v-for="value in topDispatchersList">
-        {{
-          value.dispatcherName
-        }}
-        -
-        {{
-          value.count
-        }}
+      <ul v-else-if="currentListMode == 'likes'">
+        <li v-for="(value, i) in topLikesList">
+          {{ i + 1 }}. miejsce - <b>{{ value.dispatcherName }}</b> -
+          <b class="text--primary">{{ value.sumRate }} łapek</b>
+        </li>
       </ul>
-      <ul v-else v-for="value in topLikesList">
-        {{
-          value.dispatcherName
-        }}
-        -
-        {{
-          value.sumRate
-        }}
+
+      <ul v-else>
+        <li v-for="(value, i) in topDispatchersList">
+          {{ i + 1 }}. miejsce - <b>{{ value.dispatcherName }}</b> -
+          <b class="text--primary">{{ value.count }} dyżurów</b>
+        </li>
       </ul>
     </div>
   </div>
@@ -156,10 +151,8 @@ async function fetchTopDispatchersList() {
 .scenery-top-list {
   display: grid;
   grid-template-rows: auto auto 1fr;
-}
-
-.header {
-  margin-bottom: 0.5em;
+  overflow: hidden;
+  gap: 1em;
 }
 
 .top-actions {
@@ -180,4 +173,23 @@ async function fetchTopDispatchersList() {
     font-weight: bold;
   }
 }
+
+.rating-list-wrapper {
+  overflow: auto;
+}
+
+.rating-list-wrapper > ul > li {
+  padding: 0.5em;
+  margin: 1em 0.5em;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  background-color: #2b2b2b;
+}
 </style>
diff --git a/src/views/SceneryView.vue b/src/views/SceneryView.vue
index 60ddb63..e3877e6 100644
--- a/src/views/SceneryView.vue
+++ b/src/views/SceneryView.vue
@@ -189,7 +189,7 @@ function setViewMode(componentName: string) {
 
   background-color: #181818;
   border-radius: 0.5em;
-  padding: 0.5em;
+  padding: 1em;
 }
 
 .scenery-left {