fix modal overflow, add title

frontend/components/GenericModal.vue

@@ -1,6 +1,6 @@
 <template>
-    <div v-if="show" class="z-50 fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center bg-black/30 overflow-auto m-auto max-h-screen space-y-1">
+    <div v-if="show" class="z-50 fixed inset-0 flex justify-center items-start bg-black/30 overflow-auto">
-        <div class="flex flex-col bg-base-100 min-w-[400px] max-w-[90%] h-auto rounded-md p-5 shadow-xl">
+        <div class="flex flex-col bg-base-100 min-w-[300px] w-[400px] max-w-[90%] rounded-md p-5 shadow-xl my-5">
             <div class="inline-block">
                 <div class="flex gap-2">
                     <div class="font-bold text-lg truncate flex-1 w-0">{{ title }}</div>
@@ -32,7 +32,7 @@
 <script setup lang="ts">
 const { t } = useI18n()
 
-defineProps({
+const props = defineProps({
     title: {
         type: String,
         default: '',
@@ -56,4 +56,14 @@ defineProps({
         default: false,
     },
 })
+
+useHead({
+    bodyAttrs: {
+        class: computed(() => {
+            if (props.show) return 'overflow-hidden'
+
+            return ''
+        }),
+    },
+})
 </script>

frontend/components/PlaylistGenerator.vue

@@ -1,9 +1,9 @@
 <template>
     <div
-        class="z-50 fixed top-0 bottom-0 w-full h-full left-0 right-0 flex justify-center items-center bg-black/30 overflow-y-auto"
+        class="z-50 fixed inset-0 flex justify-center items-start bg-black/30 overflow-auto"
     >
         <div
-            class="relative flex flex-col bg-base-100 w-[800px] min-w-[300px] max-w-[90vw] h-[680px] rounded-md p-5 shadow-xl"
+            class="relative flex flex-col bg-base-100 w-[800px] min-w-[300px] max-w-[90vw] h-[680px] my-5 rounded-md p-5 shadow-xl"
         >
             <div class="font-bold text-lg">{{ t('player.generateProgram') }}</div>
 

frontend/error.vue

@@ -4,13 +4,13 @@
             <div v-if="props.error?.statusCode === 404">
                 <h1 class="text-center text-6xl">404</h1>
                 <p class="text-center font-bold mt-6">
-                    {{ $t('error.notFound') }}
+                    {{ t('error.notFound') }}
                 </p>
             </div>
             <div v-else-if="props.error?.statusCode === 500">
                 <h1 class="text-center text-6xl">{{ props.error.statusCode }}</h1>
                 <p class="text-center font-bold mt-6">
-                    {{ $t('error.serverError') }}
+                    {{ t('error.serverError') }}
                 </p>
             </div>
         </div>
@@ -19,6 +19,7 @@
 
 <script setup lang="ts">
 import type { NuxtError } from '#app'
+const { t } = useI18n()
 const localePath = useLocalePath()
 
 const props = defineProps({

frontend/i18n/locales/de-DE.js

@@ -140,6 +140,7 @@ export default {
     },
     log: {
         download: 'Protokoll herunterladen',
+        reload: 'Neu laden',
     },
     advanced: {
         title: 'Advanced Configuration',

frontend/i18n/locales/en-US.js

@@ -140,6 +140,7 @@ export default {
     },
     log: {
         download: 'Download log file',
+        reload: 'Reload',
     },
     advanced: {
         title: 'Advanced Configuration',

frontend/i18n/locales/pt-BR.js

@@ -140,6 +140,7 @@ export default {
     },
     log: {
         download: 'Baixar arquivo de registro',
+        reload: 'Recarregar',
     },
     advanced: {
         title: 'Configurações avançadas',

frontend/i18n/locales/ru-RU.js

@@ -140,6 +140,7 @@ export default {
     },
     log: {
         download: 'Скачать лог файл',
+        reload: 'Перезагрузка',
     },
     advanced: {
         title: 'Advanced Configuration',

frontend/pages/logging.vue

@@ -25,7 +25,7 @@
                     :ui="{ input: 'join-item input !input-sm !input-bordered !w-[170px] text-right !pe-3' }"
                     required
                 />
-                <button class="btn btn-sm btn-primary join-item" @click="getLog()">
+                <button class="btn btn-sm btn-primary join-item" :title="t('log.reload')" @click="getLog()">
                     <i class="bi-arrow-repeat" />
                 </button>
                 <button class="btn btn-sm btn-primary join-item" :title="t('log.download')" @click="downloadLog">

frontend/pages/player.vue

@@ -245,10 +245,6 @@ const indexStore = useIndex()
 const mediaStore = useMedia()
 const playlistStore = usePlaylist()
 
-useHead({
-    title: `${t('button.player')} | ffplayout`,
-})
-
 const { listDate, firstLoad } = storeToRefs(usePlaylist())
 
 const beforeDayStart = ref(false)
@@ -282,6 +278,17 @@ const newSource = ref({
     uid: '',
 } as PlaylistItem)
 
+useHead({
+    title: `${t('button.player')} | ffplayout`,
+    bodyAttrs: {
+        class: computed(() => {
+            if (showPlaylistGenerator.value) return 'overflow-hidden'
+
+            return ''
+        }),
+    },
+})
+
 onBeforeMount(() => {
     const currentTime = $dayjs().utcOffset(configStore.utcOffset)