Layout tweaks

Author: stronk-dev

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stronk-tech/react-librespot-controller",
   "description": "`go-librespot` squeezebox-alike web frontend for small touchscreens",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "files": [

src/components/Info/Playlists.css

@@ -37,17 +37,21 @@
   transform: translateY(-50%);
   font-size: 2rem;
   color: var(--subtext-color);
+  padding: 0.2em;
+  background-color: var(--darker);
+  border-radius: 0.4em;
   pointer-events: none;
   opacity: 0.7;
   transition: opacity 0.2s ease-in-out, transform 0.0s ease;
+  z-index: 99;
 }
 
 .spotify-player-arrow.arrow-visible {
-  opacity: 0.7;
+  opacity: 0.4;
 }
 
-.spotify-player-arrow:hover {
-  opacity: 1;
+.spotify-player-playlists-wrapper:hover .spotify-player-arrow.arrow-visible {
+  opacity: 0.6;
 }
 
 .spotify-player-arrow.arrow-hidden {

src/components/MediaPlayer.css

@@ -98,6 +98,13 @@
   order: 1;
 }
 
+.spotify-player-portrait-layout .spotify-player-playlists-wrapper,
+.spotify-player-portrait-layout .spotify-player-track-details {
+  height: 200px;
+  margin: 0;
+  flex: unset;
+}
+
 .spotify-player-portrait-layout .spotify-player-playlist-container {
   grid-template-rows: repeat(2, minmax(50px, auto));
   grid-auto-flow: column;
@@ -119,6 +126,7 @@
 .spotify-player-widescreen-layout .spotify-player-right {
   gap: 0;
   height: 100%;
+  align-self: flex-start;
 }
 
 .spotify-player-widescreen-layout .spotify-player-middle {
@@ -129,6 +137,7 @@
   height: 100%;
   overflow-x: auto;
   box-sizing: border-box;
+  align-self: flex-start;
 }
 
 .spotify-player-widescreen-layout .spotify-player-playlists-wrapper {