From 230a31b045fca776f3417e9f210d675ca7e7c522 Mon Sep 17 00:00:00 2001
From: Jonathan Baecker <jonbae77@gmail.com>
Date: Sun, 29 Sep 2024 16:59:09 +0200
Subject: [PATCH] scroll only config div, cleanup classes

---
 frontend/components/PlaylistTable.vue | 18 ++++++++--------
 frontend/pages/configure.vue          | 30 ++++++++++++++-------------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/frontend/components/PlaylistTable.vue b/frontend/components/PlaylistTable.vue
index 6eb3c7c3..a546a7fa 100644
--- a/frontend/components/PlaylistTable.vue
+++ b/frontend/components/PlaylistTable.vue
@@ -11,47 +11,47 @@
             <thead class="top-0 sticky z-10">
                 <tr class="bg-base-100 rounded-tr-lg">
                     <th v-if="!configStore.playout.playlist.infinit" class="w-[85px] p-0 text-left">
-                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
+                        <div class="border-b border-my-gray px-4 py-3">
                             {{ t('player.start') }}
                         </div>
                     </th>
                     <th class="w-full p-0 text-left">
-                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
+                        <div class="border-b border-my-gray px-4 py-3">
                             {{ t('player.file') }}
                         </div>
                     </th>
                     <th class="w-[85px] p-0 text-center">
-                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
+                        <div class="border-b border-my-gray px-4 py-3">
                             {{ t('player.play') }}
                         </div>
                     </th>
                     <th class="w-[85px] p-0 text-center hidden 2xs:table-cell">
-                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
+                        <div class="border-b border-my-gray px-4 py-3">
                             {{ t('player.duration') }}
                         </div>
                     </th>
                     <th class="w-[85px] p-0 text-center hidden xl:table-cell">
-                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
+                        <div class="border-b border-my-gray px-4 py-3">
                             {{ t('player.in') }}
                         </div>
                     </th>
                     <th class="w-[85px] p-0 text-center hidden xl:table-cell">
-                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
+                        <div class="border-b border-my-gray px-4 py-3">
                             {{ t('player.out') }}
                         </div>
                     </th>
                     <th class="w-[85px] p-0 text-center hidden xl:table-cell justify-center">
-                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
+                        <div class="border-b border-my-gray px-4 py-3">
                             {{ t('player.ad') }}
                         </div>
                     </th>
                     <th class="w-[85px] p-0 text-center">
-                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
+                        <div class="border-b border-my-gray px-4 py-3">
                             {{ t('player.edit') }}
                         </div>
                     </th>
                     <th class="w-[85px] p-0 text-center hidden 2xs:table-cell justify-center">
-                        <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
+                        <div class="border-b border-my-gray px-4 py-3">
                             {{ t('player.delete') }}
                         </div>
                     </th>
diff --git a/frontend/pages/configure.vue b/frontend/pages/configure.vue
index 9ab7d618..120be6f4 100644
--- a/frontend/pages/configure.vue
+++ b/frontend/pages/configure.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex w-full h-full ps-1">
+    <div class="flex w-full h-[calc(100vh-60px)] ps-1">
         <div class="flex-none w-[70px] join join-vertical me-3 pt-7">
             <button
                 class="join-item w-full btn btn-sm btn-primary duration-500"
@@ -9,7 +9,7 @@
                 {{ t('config.channel') }}
             </button>
             <button
-            v-if="authStore.role === 'GlobalAdmin'"
+                v-if="authStore.role === 'GlobalAdmin'"
                 class="join-item w-full btn btn-sm btn-primary duration-500"
                 :class="activeConf === 2 && 'btn-secondary'"
                 @click="activeConf = 2"
@@ -31,21 +31,23 @@
                 {{ t('config.user') }}
             </button>
         </div>
-        <div class="w-[calc(100%-70px)] mt-10 px-6">
-            <div v-if="activeConf === 1" class="w-full flex justify-center">
-                <ConfigChannel />
-            </div>
+        <div class="w-[calc(100%-70px)] mt-6 px-6 overflow-auto">
+            <div>
+                <div v-if="activeConf === 1" class="w-full flex justify-center">
+                    <ConfigChannel />
+                </div>
 
-            <div v-if="activeConf === 2" class="w-full flex justify-center">
-                <ConfigAdvanced />
-            </div>
+                <div v-if="activeConf === 2" class="w-full flex justify-center">
+                    <ConfigAdvanced />
+                </div>
 
-            <div v-else-if="activeConf === 3" class="w-full flex justify-center">
-                <ConfigPlayout />
-            </div>
+                <div v-else-if="activeConf === 3" class="w-full flex justify-center">
+                    <ConfigPlayout />
+                </div>
 
-            <div v-else-if="activeConf === 4" class="w-full flex justify-center">
-                <ConfigUser />
+                <div v-else-if="activeConf === 4" class="w-full flex justify-center">
+                    <ConfigUser />
+                </div>
             </div>
         </div>
     </div>