Spelaren reserverar plats: --player-h skjuter upp innehåll och modaler

CSS-variabeln sätts på :root när spelaren är aktiv (4rem, fast höjd,
ingen radbrytning); main och modal-overlay/max-height räknar med den
så inget kan hamna bakom raden.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01824ZrvG2mDYYrmwqypLNup

frontend/src/App.vue

@@ -2,7 +2,6 @@
 import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import PlayerBar from './components/PlayerBar.vue'
-import { nowPlaying } from './player.js'
 
 const route = useRoute()
 const router = useRouter()
@@ -39,7 +38,7 @@ async function logout() {
     <router-link class="ghost gear" :to="{ name: 'settings' }" title="Inställningar">⚙</router-link>
     <button class="ghost" @click="logout">Logga ut</button>
   </header>
-  <main :class="{ 'with-player': nowPlaying }">
+  <main>
     <router-view />
   </main>
   <PlayerBar />
@@ -122,9 +121,6 @@ async function logout() {
 
 main {
   padding: 1.5rem;
-}
-
-main.with-player {
-  padding-bottom: 5rem;
+  padding-bottom: calc(1.5rem + var(--player-h, 0rem));
 }
 </style>

frontend/src/components/DetailModal.vue

@@ -71,6 +71,7 @@ const trackCards = computed(() =>
   place-items: center;
   z-index: 50;
   padding: 1rem;
+  padding-bottom: calc(1rem + var(--player-h, 0rem));
 }
 
 .modal {
@@ -79,7 +80,7 @@ const trackCards = computed(() =>
   border-radius: 1rem;
   padding: 1.2rem 1.4rem;
   width: min(58rem, 95vw);
-  max-height: 88vh;
+  max-height: calc(100vh - var(--player-h, 0rem) - 2rem);
   overflow-y: auto;
 }
 

frontend/src/components/PlayerBar.vue

@@ -62,6 +62,8 @@ async function start(video) {
 }
 
 watch(nowPlaying, (v) => {
+  // reservera plats för raden så inget innehåll hamnar bakom den
+  document.documentElement.style.setProperty('--player-h', v ? '4rem' : '0rem')
   if (v) {
     current.value = 0
     duration.value = 0
@@ -128,10 +130,12 @@ onBeforeUnmount(() => clearInterval(timer))
   right: 0;
   bottom: 0;
   z-index: 90;
+  height: 4rem;
   display: flex;
+  flex-wrap: nowrap;
   align-items: center;
   gap: 0.9rem;
-  padding: 0.55rem 1.1rem;
+  padding: 0 1.1rem;
   background: rgba(11, 17, 32, 0.97);
   border-top: 1px solid rgba(255, 255, 255, 0.12);
   backdrop-filter: blur(8px);