From da970aa4ff0db0e1c48db59306f0f140914b428b Mon Sep 17 00:00:00 2001
From: jb-alvarado <jb@pixelcrusher.de>
Date: Wed, 25 Sep 2024 07:48:31 +0200
Subject: [PATCH] smaller breakpoints

---
 frontend/components/HeaderMenu.vue    |  2 +-
 frontend/components/MediaBrowser.vue  |  2 +-
 frontend/components/PlaylistTable.vue | 13 +++++++------
 frontend/pages/player.vue             |  2 +-
 frontend/tailwind.config.ts           |  1 +
 5 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/frontend/components/HeaderMenu.vue b/frontend/components/HeaderMenu.vue
index 5cefa069..2d987f0d 100644
--- a/frontend/components/HeaderMenu.vue
+++ b/frontend/components/HeaderMenu.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="navbar bg-base-100 min-h-[52px] p-0 shadow">
+    <div class="navbar bg-base-100 min-h-[52px] p-0 shadow-md">
         <NuxtLink class="navbar-brand min-w-[46px] p-2" href="/">
             <img src="~/assets/images/ffplayout-small.png" class="img-fluid" alt="Logo" width="30" height="30" />
         </NuxtLink>
diff --git a/frontend/components/MediaBrowser.vue b/frontend/components/MediaBrowser.vue
index 21105c49..29045ad9 100644
--- a/frontend/components/MediaBrowser.vue
+++ b/frontend/components/MediaBrowser.vue
@@ -43,7 +43,7 @@
                         :id="`file-${index}`"
                         :key="element.name"
                         class="w-full border-b border-t border-base-content/20"
-                        :class="{ 'grabbing cursor-grab': width > 768 && configStore.playout.processing.mode === 'playlist' }"
+                        :class="{ 'grabbing cursor-grab': width > 739 && configStore.playout.processing.mode === 'playlist' }"
                     >
                         <td class="ps-2 py-1 w-[20px]" :class="{'timeHidden': configStore.playout.playlist.infinit}">
                             <i v-if="mediaType(element.name) === 'audio'" class="bi-music-note-beamed" />
diff --git a/frontend/components/PlaylistTable.vue b/frontend/components/PlaylistTable.vue
index 79b24145..2f6a13cc 100644
--- a/frontend/components/PlaylistTable.vue
+++ b/frontend/components/PlaylistTable.vue
@@ -25,7 +25,7 @@
                             {{ t('player.play') }}
                         </div>
                     </th>
-                    <th class="w-[85px] p-0 text-center hidden md:table-cell">
+                    <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]">
                             {{ t('player.duration') }}
                         </div>
@@ -50,7 +50,7 @@
                             {{ t('player.edit') }}
                         </div>
                     </th>
-                    <th class="w-[85px] p-0 text-center hidden md:table-cell justify-center">
+                    <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]">
                             {{ t('player.delete') }}
                         </div>
@@ -78,7 +78,7 @@
                             '!bg-lime-500/30':
                                 playlistStore.playoutIsRunning && listDate === todayDate && index === currentIndex,
                             '!bg-amber-600/40': element.overtime,
-                            'text-base-content/50': element.category === 'advertisement'
+                            'text-base-content/50': element.category === 'advertisement',
                         }"
                     >
                         <td v-if="!configStore.playout.playlist.infinit" class="ps-4 py-2 text-left">
@@ -92,7 +92,7 @@
                                 <i class="bi-play-fill" />
                             </button>
                         </td>
-                        <td class="py-2 text-center hidden md:table-cell">{{ secToHMS(element.duration) }}</td>
+                        <td class="py-2 text-center hidden 2xs:table-cell">{{ secToHMS(element.duration) }}</td>
                         <td class="py-2 text-center hidden xl:table-cell">
                             {{ secToHMS(element.in) }}
                         </td>
@@ -112,7 +112,7 @@
                                 <i class="bi-pencil-square" />
                             </button>
                         </td>
-                        <td class="py-2 text-center hidden md:table-cell justify-center hover:text-base-content/70">
+                        <td class="py-2 text-center hidden 2xs:table-cell justify-center hover:text-base-content/70">
                             <button @click="deletePlaylistItem(index)">
                                 <i class="bi-x-circle-fill" />
                             </button>
@@ -345,7 +345,8 @@ function deletePlaylistItem(index: number) {
     padding-bottom: 0.5rem;
 }
 
-#playlist-container .sortable-ghost td:nth-last-child(3) {
+#playlist-container .sortable-ghost td:nth-last-child(3),
+#playlist-container .sortable-ghost td:nth-last-child(-n + 1) {
     display: table-cell !important;
 }
 
diff --git a/frontend/pages/player.vue b/frontend/pages/player.vue
index 63499a02..f5c8399c 100644
--- a/frontend/pages/player.vue
+++ b/frontend/pages/player.vue
@@ -35,7 +35,7 @@
                 class="border border-my-gray rounded shadow"
             >
                 <pane
-                    v-if="width > 768"
+                    v-if="width > 739"
                     class="relative h-full !bg-base-300 rounded-s"
                     min-size="0"
                     max-size="80"
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index df16d757..d657455e 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -56,6 +56,7 @@ module.exports = {
             screens: {
                 xxs: '374px',
                 xs: '500px',
+                '2xs': '739px',
                 '2sm': '825px',
                 '2md': '876px',
                 '4xl': { min: '1971px' },