fix: mobile layout for monitor and watch views

Fix monitor config view labels being pushed off-screen to the left on
mobile. The CSS specificity of the mobile override selector
(ul.form > li > label) was lower than the base rule
(ul.form > li > label:first-child), so margin-left: -300px was never
overridden on small screens. Match the :first-child pseudo-class in
the media query to fix.

Also add mobile responsive overrides for the watch view (which had
none), and change flex-nowrap to flex-md-nowrap so sidebar/PTZ stack
vertically on phones.

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

Author: connortechnology

web/skins/classic/css/base/views/monitor.css

@@ -112,9 +112,22 @@ ul.form > li > label:first-child {
     padding-left: 0;
     margin: 5px 0;
   }
-  ul.form > li > label {
+  ul.form > li > label:first-child {
     width: 100%;
     margin-left: 0;
     text-align: left;
   }
+  #page tr td:first-child {
+    min-width: unset;
+  }
+  .tab-pane td:first-child {
+    text-align: left;
+  }
+  textarea,
+  input[name="newMonitor[ONVIF_URL]"],
+  input[name="newMonitor[ONVIF_Username]"],
+  input[name="newMonitor[ONVIF_Password]"],
+  input[name="newMonitor[LabelFormat]"] {
+    min-width: unset;
+  }
 }

web/skins/classic/css/base/views/watch.css

@@ -209,6 +209,30 @@ button.btn.btn-view-watch, button.btn.btn-fullscreen, .ratioControl {
   line-height: 36px;
 }
 
+@media screen and (max-width: 767px) {
+  #sidebar {
+    width: 100%;
+    min-width: unset;
+  }
+
+  #sidebar .nav {
+    flex-wrap: wrap;
+    flex-direction: row;
+  }
+
+  #wrapperMonitor {
+    overflow-x: hidden;
+  }
+
+  #ptzControls {
+    width: 100%;
+  }
+
+  .d-flex.flex-row.justify-content-between {
+    flex-wrap: wrap;
+  }
+}
+
 /* +++ Support for old ZoomPan algorithm */
 .form-check.control-use-old-zoom-pan {
   display: inline-block;

web/skins/classic/views/watch.php

@@ -335,7 +335,7 @@
   </div><!--header-->
   <div id="content">
     <div class="container-fluid">
-      <div class="row flex-nowrap" >
+      <div class="row flex-md-nowrap" >
 <?php if (count($monitors)) { ?>
         <nav id="sidebar" <?php echo $showCycle?'':' style="display:none;"'?>>
           <div id="cycleButtons" class="buttons">