Fix narrow screen navigation pane layout on NC30

When the browser window is narrow and the navigation pane got collapsed, it
was left peeking on the left border of the window on Nextcloud 30. This was
related to the fact that NC30 shows the borders around the content also in
the narrow screen "mobile" layout while NC25-29 removes the borders in this
mode. Interestingly, NC31 removes the borders of mobile layout once again so
NC30 is the only outlier.

As an additional glitch, the bottom left corner of the content was shown
without the normal rounding when the collapsed navigation pane was expanded.

CHANGELOG.md

@@ -17,7 +17,9 @@
   * Stream playback failing when the stream URL has only the domain part without any path and no trailing '/' (like http://abc.somedomain.xyz)
   * Stream playback failing when the given URL redirects to a playlist file containing the actual audio URL
   * HTTP redirections not followed when parsing Icy-MetaData of the channel
-- Layout glitch on the navigation items "Search" and "Settings" on NC30+ with Chromium based browsers
+- Layout glitches:
+  * Navigation items "Search" and "Settings" positioned and highlighted incorrectly on NC30+ with Chromium based browsers
+  * Collapsed navigation pane and corner roundings shown wrong on narrow screens on NC30
 
 ## 2.1.1 - 2025-01-03
 

css/app/music-controls.css

@@ -7,32 +7,20 @@
  * @author Morris Jobke <hey@morrisjobke.de>
  * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
  * @copyright Morris Jobke 2013, 2014
- * @copyright Pauli Järvinen 2017 - 2024
+ * @copyright Pauli Järvinen 2017 - 2025
  */
 
 #controls {
 	height: 66px;
 	padding: 0 20px 0 20px;
-	top: 45px;
+	top: 0;
 	position: fixed;
 	overflow: visible;
 	background-color: var(--color-main-background-translucent, rgba(255, 255, 255, .95));
 	z-index: 1;
-
-	/* For Nextcloud 25+: */
-	border-top-right-radius: var(--body-container-radius);
-}
-
-/* Rule used when collapsible navigation pane is open. In that case, #app-content is transformed
- * to right and this has the side-effect of making the "fixed" position to be eveluated in the
- * context of the transformed element instead of the entire window.
- */
-.snapjs-left #controls {
-	top: 0;
 }
 
-/* Adjustment to taller header pane used on NC14+ */
-body:not(.snapjs-left) #controls.taller-header {
+body:not(.snapjs-left) .app-music.nc14to24 #controls {
 	top: 50px;
 }
 

css/app/music-navigation.css

@@ -17,6 +17,8 @@
 	z-index: 999;
 	overflow: unset;
 	contain: content;
+	height: 100%;
+	top: 0;
 }
 
 #app-navigation > ul {
@@ -109,8 +111,17 @@
 	left: 40px;
 }
 
-#app-navigation-toggle {
+.app-music #app-navigation-toggle {
 	height: 66px;
+	top: 0;
+}
+
+body:not(.snapjs-left) .app-music.nc14to24 #app-navigation-toggle {
+	top: 50px;
+}
+
+.app-music.nc14to24 #app-navigation {
+	top: 50px;
 }
 
 #app-navigation .action {

css/app/music.css

@@ -7,7 +7,7 @@
  * @author Morris Jobke <hey@morrisjobke.de>
  * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
  * @copyright Morris Jobke 2013, 2014
- * @copyright Pauli Järvinen 2016 - 2024
+ * @copyright Pauli Järvinen 2016 - 2025
  */
 
 /**
@@ -35,6 +35,10 @@ body#body-user.dark {
 	margin-left: 0;
 }
 
+.app-music:not(.nc14to24) #app {
+	contain: content;
+}
+
 #app-content.with-app-sidebar {
 	margin-right: 27%;
 }

js/app/controllers/maincontroller.js

@@ -553,18 +553,15 @@ function ($rootScope, $scope, $timeout, $window, ArtistFactory,
 		}
 	});
 
-	// Nextcloud 14+ uses taller header than ownCloud
-	const headerHeight = $('#header').outerHeight();
-	if (headerHeight > 45) {
-		$('#controls').addClass('taller-header');
-	}
-
 	if (OCA.Music.Utils.isLegacyLayout()) {
 		$('.app-music').addClass('legacy-layout');
-	} else {
+	} else if (OCA.Music.Utils.getScrollContainer()[0] instanceof HTMLDocument) {
+		// Nextcloud versions 14..24 need some special handling because of different container
+		$('.app-music').addClass('nc14to24');
 		// To be compatible with NC25, we have set the #app-content position as absolute. To fix problems
 		// this causes on older platforms, we need to set the #content to use top-margin instead of top-padding,
 		// just as it has been declared by the core on NC25.
+		const headerHeight = $('#header').outerHeight();
 		$('#content').css('padding-top', 0);
 		$('#content').css('margin-top', headerHeight);
 		$('#content').css('min-height', `var(--body-height, calc(100% - ${headerHeight}px))`);