Layout tweaks

Author: stronk-dev

README.md

@@ -78,9 +78,9 @@ The player arranges itself based on the screen dimensions, with three possible l
 ![Default](screenshots/default.png)
 
 ### Widescreen
-![WideLib](screenshots/widescreen.png)
-![WideLib](screenshots/widescreen_lib.png)
-![WideLib](screenshots/widescreen_library.png)
+![Wide1](screenshots/widescreen.png)
+![Wide2](screenshots/widescreen_lib.png)
+![Wide3](screenshots/widescreen_library.png)
 
 ### Portrait 
-![Portrait](screenshots/portrait.png)
+![Portrait](screenshots/portrait.png)

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.2",
+  "version": "0.1.3",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "files": [

screenshots/default.png

@@ -10,6 +10,7 @@
   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
   position: relative;
   display: flex;
+  margin-top: 0.5em;
 }
 
 .spotify-player-playlist-container {

screenshots/portrait.png

@@ -18,7 +18,7 @@ const Playlists = ({ playlists, onSelect, onPlay }) => {
     if (!wrapperRef.current) return;
     const { scrollLeft } = wrapperRef.current;
     // Hide arrow if scrolled near the end
-    setArrowVisible(scrollLeft < 20);
+    setArrowVisible(scrollLeft < 1);
     setArrowOffset(scrollLeft);
   };
 

screenshots/widescreen.png

@@ -96,6 +96,8 @@
 
 .spotify-player-portrait-layout .spotify-player-bottom {
   order: 1;
+  max-width: 300px;
+  align-self: center;
 }
 
 .spotify-player-portrait-layout .spotify-player-playlists-wrapper,
@@ -125,19 +127,17 @@
 
 .spotify-player-widescreen-layout .spotify-player-right {
   gap: 0;
-  height: 100%;
-  align-self: flex-start;
+  align-self: stretch;
 }
 
 .spotify-player-widescreen-layout .spotify-player-middle {
   flex: 2;
   display: flex;
   flex-direction: column;
   gap: 0.4em;
-  height: 100%;
   overflow-x: auto;
   box-sizing: border-box;
-  align-self: flex-start;
+  align-self: stretch;
 }
 
 .spotify-player-widescreen-layout .spotify-player-playlists-wrapper {