feat: mobile-friendly control tab (volume buttons + stacked header)

On phones the playback-volume slider is hard to operate, so it is hidden
below the md breakpoint and the louder/quieter/EQ buttons fill the row as
large tap targets. The control-tab header now stacks vertically on mobile
so the '// Control' legend stays on one line with the action buttons
(repeat, sleep, night, bluetooth, lock) wrapping below it.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: fhirschmann

README.md

@@ -87,6 +87,7 @@ neon logo that doubles as the SVG favicon ([`8d9725c`](../../commit/8d9725c)):
 | Button lock (Kindersicherung) toggle directly in the control tab of the web interface with visual lock status indicator | [`ae83116`](../../commit/ae83116) |
 | Control buttons (single-track Repeat toggle, Sleep-Timer with dropdown and live remaining countdown, Night Mode/Dimming) directly in the control tab of the web interface | [`6918d36`](../../commit/6918d36) |
 | Bluetooth-mode dropdown in the control tab (Normal / Speaker / Headphones), mirroring the sleep-timer dropdown; selecting a mode restarts the device into it and the button highlights the active BT mode | [`b9f1e5c`](../../commit/b9f1e5c) |
+| Mobile-optimized control tab: the hard-to-drag volume slider is replaced by full-width louder/quieter (+ EQ) buttons on phones, and the control header stacks so the legend stays on one line with the action buttons below | [`f10bc93`](../../commit/f10bc93) |
 
 #### Feature highlights
 

html/management.html

@@ -1150,6 +1150,23 @@
 			float: left;
 		}
 
+		/* On mobile the playback-volume slider is hard to control, so it is hidden
+		   (d-none d-md-block) and the louder/quieter/EQ buttons fill the row instead. */
+		@media (max-width: 767.98px) {
+			.control-volume {
+				gap: 8px;
+			}
+
+			.control-volume>div {
+				flex: 1 1 0;
+				padding-left: 0 !important;
+			}
+
+			.control-volume .volume-button {
+				width: 100%;
+			}
+		}
+
 		.slider.slider-horizontal {
 			width: 100%;
 		}
@@ -1722,9 +1739,9 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 			aria-labelledby="nav-control-tab">
 			<div class="container" id="navControl">
 				<div class="col-md-12">
-					<div class="d-flex justify-content-between align-items-center mb-1 pb-1" style="border-bottom: 1px solid var(--cp-border);">
-						<legend data-i18n="control.title" style="border-bottom: none; margin-bottom: 0; padding-bottom: 0;"></legend>
-						<div class="d-flex align-items-center gap-2" style="margin-bottom: 4px;">
+					<div class="d-flex flex-column flex-md-row justify-content-md-between align-items-start align-items-md-center mb-1 pb-1" style="border-bottom: 1px solid var(--cp-border);">
+						<legend data-i18n="control.title" style="border-bottom: none; margin-bottom: 0; padding-bottom: 0; white-space: nowrap;"></legend>
+						<div class="d-flex align-items-center flex-wrap gap-2 mt-2 mt-md-0" style="margin-bottom: 4px;">
 							<!-- Repeat Button -->
 							<button type="button" class="btn btn-sm cp-control-button" id="btn-repeat-mode" onclick="toggleRepeatMode()">
 								<span id="ico-repeat-mode" class="fas fa-redo"></span>
@@ -1799,14 +1816,14 @@ <h5 class="modal-title" data-i18n="tools.nvs.erase.title"></h5>
 				</div>
 				<br>
 				<legend data-i18n="control.volume" class="col-auto"></legend>
-				<div class="slider-container">
+				<div class="slider-container control-volume">
 					<div class="float-end">
 						<button type="button" class="btn btn-primary btn-lg volume-button" onclick="sendControl(177)"
 							data-i18n="[title]control.voldown">
 							<span class="fas fa-volume-down"></span>
 						</button>
 					</div>
-					<div class="slider-container-inner">
+					<div class="slider-container-inner d-none d-md-block">
 						<input class="form-control float-end" data-provide="slider" type="number" data-slider-min="1"
 							data-slider-max="21" min="1" max="21" id="setVolume" data-slider-value="" value=""
 						onchange="sendVolume(Number(this.value))">