Add image styles

.gitignore

@@ -1,2 +1,3 @@
 *.ez
 build
+.DS_Store

src/elekf/web/components/library_views/albums_view.gleam

@@ -69,6 +69,7 @@ fn item_view(
   div(
     [
       attribute.id("album-list-" <> int.to_string(album_id)),
+      attribute.class("library-item album-item"),
       attribute.type_("button"),
       event.on_click(StartPlay(tracks, 0)),
       attribute.attribute("role", "button"),
@@ -85,6 +86,7 @@ fn item_view(
               artwork.S300,
             )),
             attribute.attribute("loading", "lazy"),
+            attribute.width(300),
           ])
         _, _ ->
           div([attribute.class("artist-image-placeholder")], [text(album.name)])

src/elekf/web/components/library_views/artists_view.gleam

@@ -72,6 +72,7 @@ fn item_view(
   div(
     [
       attribute.id("artist-list-" <> int.to_string(artist_id)),
+      attribute.class("library-item artist-item"),
       attribute.type_("button"),
       event.on_click(StartPlay(tracks, 0)),
       attribute.attribute("role", "button"),
@@ -84,6 +85,7 @@ fn item_view(
             attribute.alt("artist.name"),
             attribute.src(artwork.url(s.artwork_server, id, artwork.S300)),
             attribute.attribute("loading", "lazy"),
+            attribute.width(300),
           ])
         _, _ ->
           div(

src/elekf/web/components/library_views/tracks_view.gleam

@@ -60,6 +60,7 @@ fn item_view(
   div(
     [
       attribute.id("track-list-" <> int.to_string(track_id)),
+      attribute.class("library-item track-item"),
       attribute.type_("button"),
       event.on_click(StartPlay(items, index)),
       attribute.attribute("role", "button"),

style.css

@@ -64,3 +64,17 @@ main {
 #search-bar-input-wrapper input {
   width: 100%;
 }
+
+#artists-view .library-list,
+#albums-view .library-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 10px;
+}
+
+.library-item img {
+}
+
+.library-item h3 {
+  overflow-wrap: break-word;
+}