feat: implement layout shift in fullscreen mode when side panels are active

styles.css

@@ -336,7 +336,8 @@ kbd {
     overflow-y: auto;
     padding: var(--spacing-xl);
     scroll-behavior: smooth;
-    position: relative; /* Context for background */
+    position: relative;
+    /* Context for background */
     padding-bottom: 160px !important;
 }
 
@@ -635,6 +636,7 @@ body.has-page-background .track-item:hover {
 }
 
 @keyframes pulse {
+
     0%,
     100% {
         opacity: 1;
@@ -940,6 +942,7 @@ body.has-page-background .track-item:hover {
 }
 
 @media (max-width: 1100px) {
+
     #home-recommended-songs,
     #artist-detail-tracks,
     #playlist-detail-recommended {
@@ -980,15 +983,18 @@ body.has-page-background .track-item:hover {
     .album-content-layout .content-section .card-grid .card {
         display: inline-block;
         vertical-align: top;
-        width: 155px; /* Fixed width to ensure consistent flow */
+        width: 155px;
+        /* Fixed width to ensure consistent flow */
         margin: 0 var(--spacing-md) var(--spacing-md) 0;
-        white-space: normal; /* Reset in case inherited */
+        white-space: normal;
+        /* Reset in case inherited */
     }
 
     .album-content-layout .section-title {
         font-size: 1.4rem;
         margin-bottom: var(--spacing-md);
-        clear: none; /* Allow sitting next to float */
+        clear: none;
+        /* Allow sitting next to float */
     }
 }
 
@@ -1123,7 +1129,8 @@ body.has-page-background .track-item:hover {
     padding: 0.5rem;
     border-radius: var(--radius);
     transition: all var(--transition);
-    display: none; /* Controlled by data-track-actions-mode */
+    display: none;
+    /* Controlled by data-track-actions-mode */
     align-items: center;
     justify-content: center;
     opacity: 0;
@@ -1146,7 +1153,8 @@ body.has-page-background .track-item:hover {
 }
 
 .track-actions-inline {
-    display: none; /* Controlled by data-track-actions-mode */
+    display: none;
+    /* Controlled by data-track-actions-mode */
     gap: 0.25rem;
     opacity: 0.2;
     transition: opacity var(--transition);
@@ -1182,7 +1190,8 @@ body.has-page-background .track-item:hover {
     display: flex;
     align-items: center;
     justify-content: center;
-    flex-shrink: 0; /* Prevent buttons from squishing */
+    flex-shrink: 0;
+    /* Prevent buttons from squishing */
 }
 
 .track-action-btn:hover {
@@ -1519,11 +1528,11 @@ body.has-page-background .track-item:hover {
     border-radius: 50%;
 }
 
-input:checked + .slider {
+input:checked+.slider {
     background-color: var(--primary);
 }
 
-input:checked + .slider::before {
+input:checked+.slider::before {
     transform: translateX(16px);
     background-color: var(--primary-foreground);
 }
@@ -1984,7 +1993,7 @@ input:checked + .slider::before {
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: opacity 0.2s;
+    transition: opacity 0.2s, right 0.3s ease;
     z-index: 10;
     opacity: 0.5;
 }
@@ -2034,11 +2043,13 @@ input:checked + .slider::before {
     display: flex;
     flex-direction: column;
     gap: 0.2rem;
-    opacity: 0; /* Initially hidden for animation */
+    opacity: 0;
+    /* Initially hidden for animation */
 }
 
 #fullscreen-next-track.animate-in {
-    animation: fade-in 0.5s ease 0.2s forwards; /* Added forwards to keep opacity 1 */
+    animation: fade-in 0.5s ease 0.2s forwards;
+    /* Added forwards to keep opacity 1 */
 }
 
 #fullscreen-next-track .label {
@@ -3035,7 +3046,8 @@ input:checked + .slider::before {
 
 .card.compact.user-playlist .edit-playlist-btn,
 .card.compact.user-playlist .delete-playlist-btn {
-    display: none !important; /* Hide edit/delete on compact view to prevent covering image */
+    display: none !important;
+    /* Hide edit/delete on compact view to prevent covering image */
 }
 
 /* Mobile adjustments */
@@ -3190,7 +3202,7 @@ img[src=''] {
     align-items: center;
     justify-content: center;
     padding: 6rem 2rem 2rem;
-    transition: flex 0.3s ease;
+    transition: flex 0.3s ease, padding-right 0.3s ease, margin-right 0.3s ease;
 }
 
 .fullscreen-lyrics-toggle {
@@ -3207,7 +3219,7 @@ img[src=''] {
     display: flex;
     align-items: center;
     justify-content: center;
-    transition: all 0.2s ease;
+    transition: all 0.2s ease, right 0.3s ease;
 }
 
 .fullscreen-lyrics-toggle:hover {
@@ -3642,7 +3654,8 @@ img[src=''] {
     }
 
     #fullscreen-cover-image {
-        max-height: 45vh; /* Reduce height on mobile to fit text */
+        max-height: 45vh;
+        /* Reduce height on mobile to fit text */
         margin-bottom: 1.5rem;
     }
 
@@ -4604,3 +4617,46 @@ body.sidebar-collapsed #sidebar-toggle {
         display: block;
     }
 }
+
+/* Fullscreen layout shift when side panel is active */
+body:has(#side-panel.active) .fullscreen-main-view {
+    transition: flex 0.3s ease, padding-right 0.3s ease, margin-right 0.3s ease;
+}
+
+body:has(#side-panel.active) .fullscreen-main-view {
+    padding-right: 600px;
+}
+
+body:has(#side-panel.active) .fullscreen-lyrics-toggle {
+    right: calc(600px + 4rem);
+}
+
+body:has(#side-panel.active) #close-fullscreen-cover-btn {
+    right: calc(600px + 1rem);
+}
+
+@media (max-width: 1200px) {
+    body:has(#side-panel.active) .fullscreen-main-view {
+        padding-right: 50vw;
+    }
+
+    body:has(#side-panel.active) .fullscreen-lyrics-toggle {
+        right: calc(50vw + 4rem);
+    }
+
+    body:has(#side-panel.active) #close-fullscreen-cover-btn {
+        right: calc(50vw + 1rem);
+    }
+}
+
+@media (max-width: 768px) {
+    body:has(#side-panel.active) .fullscreen-main-view {
+        padding-right: 0;
+    }
+
+    /* Hide fullscreen specific buttons on mobile when panel is open */
+    body:has(#side-panel.active) .fullscreen-lyrics-toggle,
+    body:has(#side-panel.active) #close-fullscreen-cover-btn {
+        display: none;
+    }
+}