From 5a93ebf53f80ca64967ce6c0237b44d323e207eb Mon Sep 17 00:00:00 2001
From: claude <claude@brasse-pc.eu>
Date: Sat, 1 Aug 2026 05:54:34 +0200
Subject: [PATCH] =?UTF-8?q?Spelaren=20reserverar=20plats:=20--player-h=20s?=
 =?UTF-8?q?kjuter=20upp=20inneh=C3=A5ll=20och=20modaler?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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                    | 8 ++------
 frontend/src/components/DetailModal.vue | 3 ++-
 frontend/src/components/PlayerBar.vue   | 6 +++++-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index e5350f8..db60f64 100644
--- a/frontend/src/App.vue
+++ b/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>
diff --git a/frontend/src/components/DetailModal.vue b/frontend/src/components/DetailModal.vue
index b8a3503..7065e11 100644
--- a/frontend/src/components/DetailModal.vue
+++ b/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;
 }
 
diff --git a/frontend/src/components/PlayerBar.vue b/frontend/src/components/PlayerBar.vue
index 9966ecd..61ae063 100644
--- a/frontend/src/components/PlayerBar.vue
+++ b/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);