From ce4588bcc19de8a6d421ab8fc3dc6a2ece887fee Mon Sep 17 00:00:00 2001
From: Isaac Connor <isaac@zoneminder.com>
Date: Sat, 26 Sep 2026 12:52:45 -0400
Subject: [PATCH] feat: put the monitor name, dvr controls and replay status on
 one row

These three blocks stacked under the event video and each took a full
line. Wrap them in a new #eventControls flex row: monitor name left,
transport buttons centred, replay status right, wrapping onto separate
lines when the viewport is too narrow.

The span#rate was never closed, so #progress, #currentTime, #zoom and
#fps were nested inside it. Close it, otherwise the whole status line
lays out as a single flex item.

The three children are flex containers themselves so their contents
centre vertically while the boxes stay stretched to the row height.
scaleToFit() measures the bottom edge of #replayStatus to decide how
tall the video can be, and stretching keeps that edge at the bottom of
the row, so auto scaling is unchanged.

The new rules are scoped under #eventControls, which outranks the
duplicated single-id rules in the classic and dark event.css.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 web/skins/classic/css/base/views/event.css | 37 +++++++++
 web/skins/classic/views/event.php          | 95 +++++++++++-----------
 2 files changed, 86 insertions(+), 46 deletions(-)

diff --git a/web/skins/classic/css/base/views/event.css b/web/skins/classic/css/base/views/event.css
index 961e7d9ab..1994fd019 100644
--- a/web/skins/classic/css/base/views/event.css
+++ b/web/skins/classic/css/base/views/event.css
@@ -146,6 +146,43 @@ height: 100%;
   grid-area: 1/1;
 }
 
+/* The monitor name, the DVR transport buttons and the replay status share one
+   row under the video.  #replayStatus stays the last child because scaleToFit()
+   measures its bottom edge to size the video. */
+#eventControls {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    justify-content: space-between;
+    column-gap: 0.5rem;
+}
+
+#eventControls > .monitorStatus,
+#eventControls > #dvrControls,
+#eventControls > #replayStatus {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin: 3px 0 2px;
+    clear: none;
+}
+
+#eventControls > .monitorStatus {
+    flex: 1 1 auto;
+    min-width: 0;
+    justify-content: flex-start;
+}
+
+#eventControls > #dvrControls {
+    flex: 0 0 auto;
+    justify-content: center;
+}
+
+#eventControls > #replayStatus {
+    flex: 1 1 auto;
+    justify-content: flex-end;
+}
+
 #monitorStatus {
     width: 100%;
     margin-top: 3px;
diff --git a/web/skins/classic/views/event.php b/web/skins/classic/views/event.php
index 5ae8c4241..190a4873c 100644
--- a/web/skins/classic/views/event.php
+++ b/web/skins/classic/views/event.php
@@ -491,56 +491,59 @@ if (defined('AUDIO_MOTION_ENABLED') && AUDIO_MOTION_ENABLED) echo '
                 </audio-motion>
 ' . PHP_EOL;
 ?>
-                <div class="monitorStatus">
-                  <span class="MonitorName"><?php echo validHtmlStr($monitor->Name()) . " (". translate('ID'). "=" . $monitor->Id() . ")"; ?>  </span>
-                  <span class="stream-info-status-track"></span>
-                </div>
-                <p id="dvrControls">
-                  <button type="button" id="prevBtn" title="<?php echo translate('Prev') ?>" class="inactive" data-on-click-true="streamPrev">
-                  <i class="material-icons md-18">skip_previous</i>
-                  </button>
-                  <button type="button" id="fastRevBtn" title="<?php echo translate('Rewind') ?>" class="inactive" data-on-click-true="streamFastRev">
-                  <i class="material-icons md-18">fast_rewind</i>
-                  </button>
-                  <button type="button" id="slowRevBtn" title="<?php echo translate('StepBack') ?>" class="unavail" disabled="disabled" data-on-click-true="streamSlowRev">
-                  <i class="material-icons md-18">chevron_left</i>
-                  </button>
-                  <button type="button" id="pauseBtn" title="<?php echo translate('Pause') ?>" class="inactive" data-on-click="pauseClicked">
-                  <i class="material-icons md-18">pause</i>
-                  </button>
-                  <button type="button" id="playBtn" title="<?php echo translate('Play') ?>" class="active" disabled="disabled" data-on-click="playClicked">
-                  <i class="material-icons md-18">play_arrow</i>
-                  </button>
-                  <button type="button" id="slowFwdBtn" title="<?php echo translate('StepForward') ?>" class="unavail" disabled="disabled" data-on-click-true="streamSlowFwd">
-                  <i class="material-icons md-18">chevron_right</i>
-                  </button>
-                  <button type="button" id="fastFwdBtn" title="<?php echo translate('FastForward') ?>" class="inactive" data-on-click-true="streamFastFwd">
-                  <i class="material-icons md-18">fast_forward</i>
-                  </button>
-                  <!--<button type="button" id="zoomOutBtn" title="<?php echo translate('ZoomOut') ?>" class="unavail" disabled="disabled" data-on-click="clickZoomOut">
-                  <i class="material-icons md-18">zoom_out</i>
-                  </button>-->
-                  <button type="button" id="fullscreenBtn" title="<?php echo translate('Fullscreen') ?>" class="avail" data-on-click="fullscreenClicked">
-                  <i class="material-icons md-18">fullscreen</i>
-                  </button>
-                  <button type="button" id="nextBtn" title="<?php echo translate('Next') ?>" class="inactive" data-on-click-true="streamNext">
-                  <i class="material-icons md-18">skip_next</i>
-                  </button>
-                </p>
-                <div id="replayStatus">
-                  <span id="mode"><?php echo translate('Mode') ?>: <span id="modeValue">Replay</span></span>
-                  <span id="rate"><?php echo translate('Rate') ?>: 
+                <div id="eventControls">
+                  <div class="monitorStatus">
+                    <span class="MonitorName"><?php echo validHtmlStr($monitor->Name()) . " (". translate('ID'). "=" . $monitor->Id() . ")"; ?>  </span>
+                    <span class="stream-info-status-track"></span>
+                  </div>
+                  <p id="dvrControls">
+                    <button type="button" id="prevBtn" title="<?php echo translate('Prev') ?>" class="inactive" data-on-click-true="streamPrev">
+                    <i class="material-icons md-18">skip_previous</i>
+                    </button>
+                    <button type="button" id="fastRevBtn" title="<?php echo translate('Rewind') ?>" class="inactive" data-on-click-true="streamFastRev">
+                    <i class="material-icons md-18">fast_rewind</i>
+                    </button>
+                    <button type="button" id="slowRevBtn" title="<?php echo translate('StepBack') ?>" class="unavail" disabled="disabled" data-on-click-true="streamSlowRev">
+                    <i class="material-icons md-18">chevron_left</i>
+                    </button>
+                    <button type="button" id="pauseBtn" title="<?php echo translate('Pause') ?>" class="inactive" data-on-click="pauseClicked">
+                    <i class="material-icons md-18">pause</i>
+                    </button>
+                    <button type="button" id="playBtn" title="<?php echo translate('Play') ?>" class="active" disabled="disabled" data-on-click="playClicked">
+                    <i class="material-icons md-18">play_arrow</i>
+                    </button>
+                    <button type="button" id="slowFwdBtn" title="<?php echo translate('StepForward') ?>" class="unavail" disabled="disabled" data-on-click-true="streamSlowFwd">
+                    <i class="material-icons md-18">chevron_right</i>
+                    </button>
+                    <button type="button" id="fastFwdBtn" title="<?php echo translate('FastForward') ?>" class="inactive" data-on-click-true="streamFastFwd">
+                    <i class="material-icons md-18">fast_forward</i>
+                    </button>
+                    <!--<button type="button" id="zoomOutBtn" title="<?php echo translate('ZoomOut') ?>" class="unavail" disabled="disabled" data-on-click="clickZoomOut">
+                    <i class="material-icons md-18">zoom_out</i>
+                    </button>-->
+                    <button type="button" id="fullscreenBtn" title="<?php echo translate('Fullscreen') ?>" class="avail" data-on-click="fullscreenClicked">
+                    <i class="material-icons md-18">fullscreen</i>
+                    </button>
+                    <button type="button" id="nextBtn" title="<?php echo translate('Next') ?>" class="inactive" data-on-click-true="streamNext">
+                    <i class="material-icons md-18">skip_next</i>
+                    </button>
+                  </p>
+                  <div id="replayStatus">
+                    <span id="mode"><?php echo translate('Mode') ?>: <span id="modeValue">Replay</span></span>
+                    <span id="rate"><?php echo translate('Rate') ?>: 
 <?php 
-  #rates are defined in skins/classic/includes/config.php
-  echo htmlSelect('rate', $rates, intval($rate), array('id'=>'rateValue'));
+    #rates are defined in skins/classic/includes/config.php
+    echo htmlSelect('rate', $rates, intval($rate), array('id'=>'rateValue'));
 ?>
-                  <span id="progress"<?php echo ZM_WEB_SHOW_PROGRESS ? '' : ' style="display:none;"' ?>><?php echo translate('Progress') ?>: <span id="progressValue">0</span>s</span>
-                  <span id="currentTime"><?php echo translate('Time') ?>: <span id="currentTimeValue"></span></span>
-                  <span id="zoom"><?php echo translate('Zoom') ?>: <span id="zoomValue">1</span>x</span>
+                    </span>
+                    <span id="progress"<?php echo ZM_WEB_SHOW_PROGRESS ? '' : ' style="display:none;"' ?>><?php echo translate('Progress') ?>: <span id="progressValue">0</span>s</span>
+                    <span id="currentTime"><?php echo translate('Time') ?>: <span id="currentTimeValue"></span></span>
+                    <span id="zoom"><?php echo translate('Zoom') ?>: <span id="zoomValue">1</span>x</span>
 <?php if (!$video_tag) { ?>
-                  <span id="fps"><?php echo translate('FPS') ?>: <span id="fpsValue"></span></span>
+                    <span id="fps"><?php echo translate('FPS') ?>: <span id="fpsValue"></span></span>
 <?php } ?>
-                </div>
+                  </div><!--replayStatus-->
+                </div><!--eventControls-->
               </div><!--eventVideo-->
             </div><!--wrapperEventVideo-->
           </div><!-- class="row" -->