From 76399da5f8b2cc9c0048d251b8a3162e2ef64251 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pauli=20J=C3=A4rvinen?= <pauli.jarvinen@gmail.com>
Date: Sun, 2 May 2021 22:55:42 +0300
Subject: [PATCH] Allow tracks names to wrap to multiple lines also in the
 'Genres' view

Long track names are now wrapped to multiple lines (on narrow screen)
also in the 'Genres' view. This was already previously possible in the
similar 'All tracks' and 'Folders' views, but 'Genres' had been
forgotten. Hence, the long names on narrow screen were overlapping with
the alphabet navigation control.
---
 css/style-tracklist.css              | 8 +++-----
 templates/partials/alltracksview.php | 2 +-
 templates/partials/foldersview.php   | 2 +-
 templates/partials/genresview.php    | 2 +-
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/css/style-tracklist.css b/css/style-tracklist.css
index 3c127b1c6..41b897d03 100644
--- a/css/style-tracklist.css
+++ b/css/style-tracklist.css
@@ -83,15 +83,13 @@
 }
 
 /**
- * View specific rules for the track-list directive in the 'All tracks' and 'Folders' views
+ * Rules for the track-list directive in "flat list views" like 'All tracks', 'Genres', and 'Folders'
  */
 
-#alltracks-area .track-list,
-#folders-area .track-list {
+.flat-list-view .track-list {
 	margin-right: 50px;
 }
 
-#alltracks-area .track-list li > div > span,
-#folders-area .track-list li > div > span {
+.flat-list-view .track-list li > div > span {
 	white-space: normal;
 }
diff --git a/templates/partials/alltracksview.php b/templates/partials/alltracksview.php
index 5334a0b12..b13422e17 100644
--- a/templates/partials/alltracksview.php
+++ b/templates/partials/alltracksview.php
@@ -1,4 +1,4 @@
-<div class="view-container playlist-area" id="alltracks-area" ng-show="!loading && !loadingCollection">
+<div class="view-container playlist-area flat-list-view" id="alltracks-area" ng-show="!loading && !loadingCollection">
 	<h1>
 		<span ng-click="onHeaderClick()">
 			<span translate>All tracks</span>
diff --git a/templates/partials/foldersview.php b/templates/partials/foldersview.php
index 053decc42..853f7b7dd 100644
--- a/templates/partials/foldersview.php
+++ b/templates/partials/foldersview.php
@@ -1,5 +1,5 @@
 <div class="view-container" id="folders-area" ng-show="!loading && !loadingCollection">
-	<div class="playlist-area folder-area" id="folder-{{ ::folder.id }}" in-view-observer
+	<div class="playlist-area folder-area flat-list-view" id="folder-{{ ::folder.id }}" in-view-observer
 		in-view-observer-margin="1000"
 		ng-repeat="folder in folders | limitTo: incrementalLoadLimit"
 	>
diff --git a/templates/partials/genresview.php b/templates/partials/genresview.php
index 3e0b342b9..684f7e4c6 100644
--- a/templates/partials/genresview.php
+++ b/templates/partials/genresview.php
@@ -1,5 +1,5 @@
 <div class="view-container" id="genres-area" ng-show="!loading && !loadingCollection">
-	<div class="playlist-area genre-area" id="genre-{{ ::genre.id }}" in-view-observer
+	<div class="playlist-area genre-area flat-list-view" id="genre-{{ ::genre.id }}" in-view-observer
 		in-view-observer-margin="1000"
 		ng-repeat="genre in genres | limitTo: incrementalLoadLimit"
 	>