Change Album Search and Pagination Layout (#1397)

src/renderer/less/pages.css

@@ -569,6 +569,23 @@
   }
 }
 /* Album / Playlist Page */
+.album-header {
+  position: sticky;
+  left: 0;
+  z-index: 6;
+  padding: 0px 2em;
+  backdrop-filter: blur(32px);
+  background: rgba(0, 0, 0, 0.25);
+  top: var(--navigationBarHeight);
+  --bs-gutter-x: 4rem;
+  --bs-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(-1 * var(--bs-gutter-y));
+  margin-right: calc(-0.5 * var(--bs-gutter-x));
+  margin-left: calc(-0.5 * var(--bs-gutter-x));
+  border-bottom: 1px solid rgba(200, 200, 200, 0.05);
+}
 .playlist-page {
   --bgColor: transparent;
   padding: 0px;

src/renderer/less/pages.less

@@ -695,6 +695,23 @@
 }
 
 /* Album / Playlist Page */
+.album-header {
+  position: sticky;
+  left: 0;
+  z-index: 6;
+  padding: 0px 2em;
+  backdrop-filter: blur(32px);
+  background: rgba(0, 0, 0, 0.25);
+  top: var(--navigationBarHeight);
+  --bs-gutter-x: 4rem;
+  --bs-gutter-y: 0;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(-1 * var(--bs-gutter-y));
+  margin-right: calc(-0.5 * var(--bs-gutter-x));
+  margin-left: calc(-0.5 * var(--bs-gutter-x));
+  border-bottom: 1px solid rgba(200, 200, 200, 0.05);
+}
 .playlist-page {
   --bgColor: transparent;
   padding: 0px;

src/renderer/views/pages/library-albums.ejs

@@ -10,7 +10,7 @@
                         :aria-label="app.getLz('menubar.options.reload')"><%- include('../svg/redo.svg') %></button>
             </div>
         </div>
-        <div class="row">
+        <div class="album-header">
             <div class="col" style="padding:0;">
                 <div class="search-input-container" style="width:100%;margin: 16px 0;">
                     <div class="search-input--icon"></div>
@@ -63,15 +63,15 @@
                     </div>
                 </div>
             </div>
-        </div>
             <pagination
-                :length="app.library.albums.displayListing.length
-            "
+              :length="app.library.albums.displayListing.length"
               :pageSize="pageSize"
               :scroll="prefs.scroll"
               scrollSelector="#app-content"
               @onRangeChange="onRangeChange"
+              style="margin-bottom: 0;"
             />
+        </div>
         <div class="well">
             <div class="albums-square-container">
                 <div>