From 886e390d0995225ccd786a85df37cddb62ccdfc4 Mon Sep 17 00:00:00 2001
From: SuperBFG7 <daniel@despite.ch>
Date: Thu, 17 Jun 2021 08:53:22 +0200
Subject: [PATCH] Separate song info box and queue list Fix position of song
 info box and control buttons (don't scroll out of screen)

---
 htdocs/css/mpd.css |  6 +++++-
 htdocs/index.html  | 12 +++++++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/htdocs/css/mpd.css b/htdocs/css/mpd.css
index c1e9d46..21fe414 100644
--- a/htdocs/css/mpd.css
+++ b/htdocs/css/mpd.css
@@ -27,7 +27,6 @@ button {
 
 #breadcrump {
   display: block;
-
   overflow: auto;
   white-space: nowrap;
 }
@@ -165,3 +164,8 @@ button {
   text-decoration: none;
   color: black;
 }
+
+.sticky {
+  position: sticky;
+  top: 55px;
+}
diff --git a/htdocs/index.html b/htdocs/index.html
index d9825ca..0fed0d4 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -142,7 +142,7 @@
         <div class="col-md-10 col-xs-12">
           <div class="notifications top-right"></div>
 
-          <div class="panel panel-primary">
+          <div class="panel panel-primary sticky">
             <!-- Default panel contents -->
             <div class="panel-heading">
               <b id="panel-heading">Queue</b>
@@ -165,8 +165,10 @@
 
               <div id="progressbar"></div>
             </div>
-            <!-- /.panel-body -->
-
+          </div>
+          <!-- /.panel -->
+          <!-- /.panel-body -->
+          <div class="panel panel-primary">
             <ol id="breadcrump" class="breadcrumb"></ol>
 
             <div class="col-md-12" id="filter"></div>
@@ -180,7 +182,7 @@
                   <th>Album</th>
                   <th>Title</th>
                   <th>Length</th>
-                  <th></th>
+                  <th><div style="width: 15px"></div></th>
                 </tr>
               </thead>
               <tbody></tbody>
@@ -194,7 +196,7 @@
         </div>
         <!-- /.col-md-10 -->
 
-        <div class="col-md-2 col-xs-12">
+        <div class="col-md-2 col-xs-12 sticky">
           <div class="btn-toolbar">
             <div
               class="btn-group-vertical btn-block btn-group-lg"