Add height threshold for forcing list view on playlist route

src/constants.js

@@ -79,6 +79,9 @@ const MAIN_PROFILE_ID = 'allChannels'
 // Width threshold in px at which we switch to using a more heavily altered view for mobile users
 const MOBILE_WIDTH_THRESHOLD = 680
 
+// Height threshold in px at which we switch to using a more heavily altered playlist view for mobile users
+const PLAYLIST_HEIGHT_FORCE_LIST_THRESHOLD = 680
+
 // YouTube search character limit is 100 characters
 const SEARCH_CHAR_LIMIT = 100
 
@@ -88,5 +91,6 @@ export {
   SyncEvents,
   MAIN_PROFILE_ID,
   MOBILE_WIDTH_THRESHOLD,
+  PLAYLIST_HEIGHT_FORCE_LIST_THRESHOLD,
   SEARCH_CHAR_LIMIT
 }

src/renderer/views/Playlist/Playlist.js

@@ -22,7 +22,7 @@ import {
   showToast,
 } from '../../helpers/utils'
 import { invidiousGetPlaylistInfo, youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
-import { MOBILE_WIDTH_THRESHOLD } from '../../../constants'
+import { MOBILE_WIDTH_THRESHOLD, PLAYLIST_HEIGHT_FORCE_LIST_THRESHOLD } from '../../../constants'
 
 const SORT_BY_VALUES = {
   DateAddedNewest: 'date_added_descending',
@@ -292,7 +292,7 @@ export default defineComponent({
   },
   mounted: function () {
     this.getPlaylistInfoDebounce()
-    this.forceListView = window.innerWidth <= MOBILE_WIDTH_THRESHOLD
+    this.handleResize()
     window.addEventListener('resize', this.handleResize)
   },
   beforeDestroy: function () {
@@ -575,7 +575,7 @@ export default defineComponent({
     },
 
     handleResize: function () {
-      this.forceListView = window.innerWidth <= MOBILE_WIDTH_THRESHOLD
+      this.forceListView = window.innerWidth <= MOBILE_WIDTH_THRESHOLD || window.innerHeight <= PLAYLIST_HEIGHT_FORCE_LIST_THRESHOLD
     },
 
     getIconForSortPreference: (s) => getIconForSortPreference(s),