From 64f5ee7c15f686022641e198a3281833a08013b3 Mon Sep 17 00:00:00 2001
From: IgorA100 <igora100@gmail.com>
Date: Tue, 23 Sep 2025 23:05:58 +0300
Subject: [PATCH 1/2] Changed the design of the data table
 (_options_controlcaps.php)

---
 .../classic/views/_options_controlcaps.php    | 42 +++++++++++--------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/web/skins/classic/views/_options_controlcaps.php b/web/skins/classic/views/_options_controlcaps.php
index 9a7cdbba1..293cc3d9c 100644
--- a/web/skins/classic/views/_options_controlcaps.php
+++ b/web/skins/classic/views/_options_controlcaps.php
@@ -1,20 +1,23 @@
 <?php
 $controls = dbFetchAll('SELECT * FROM Controls ORDER BY Name');
 ?>
-<div class="row">
-  <div class="col">
-    <div id="contentButtons">
-      <button id="backBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Back') ?>" disabled><i class="fa fa-arrow-left"></i></button>
-      <button id="refreshBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Refresh') ?>" ><i class="fa fa-refresh"></i></button>
-      <button id="addNewBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('AddNewControl') ?>" data-on-click-this="addNewControl" data-url="?view=controlcap"><i class="fa fa-plus"></i></button>
-      <button id="editBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('EditControl') ?>" data-on-click-this="editControl" data-url="?view=controlcap&cid=" disabled><i class="fa fa-pencil"></i></button>
-      <button id="deleteBtn" class="btn btn-danger" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Delete') ?>" disabled><i class="fa fa-trash"></i></button>
-    </div>
-  </div> <!-- .col -->
-</div> <!-- .row -->
-<div class="wrapper-scroll-table">
-  <div class="row">
-    <div class="col">
+<div id="page">
+  <div id="content" class="container-fluid">
+    <!-- Toolbar button placement and styling handled by bootstrap-tables -->
+    <div id="toolbar" class="container-fluid">
+      <div class="row">
+        <div class="col">
+          <button id="backBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Back') ?>" disabled><i class="fa fa-arrow-left"></i></button>
+          <button id="refreshBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Refresh') ?>" ><i class="fa fa-refresh"></i></button>
+          <button id="addNewBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('AddNewControl') ?>" data-on-click-this="addNewControl" data-url="?view=controlcap"><i class="fa fa-plus"></i></button>
+          <button id="editBtn" class="btn btn-normal" data-toggle="tooltip" data-placement="top" title="<?php echo translate('EditControl') ?>" data-on-click-this="editControl" data-url="?view=controlcap&cid=" disabled><i class="fa fa-pencil"></i></button>
+          <button id="deleteBtn" class="btn btn-danger" data-toggle="tooltip" data-placement="top" title="<?php echo translate('Delete') ?>" disabled><i class="fa fa-trash"></i></button>
+        </div> <!-- .col-->
+      </div> <!-- .row-->
+    </div> <!-- #toolbar -->
+
+    <div id="controlCaps" class="table-responsive">
+      <!-- Table styling handled by bootstrap-tables -->
       <table id="controlTable" class="table-sm table-borderless"
         data-locale="<?php echo i18n() ?>"
         data-search="true"
@@ -27,8 +30,11 @@ $controls = dbFetchAll('SELECT * FROM Controls ORDER BY Name');
         data-buttons-class="btn btn-normal"
         data-toolbar="#toolbar"
         data-show-columns="true"
+        data-mobile-responsive="true"
+        data-min-width="562"
+        class="table-sm table-borderless table"
       >
-        <thead>
+        <thead class="thead-highlight">
           <tr>
             <th data-sortable="false" data-field="toggleCheck" data-checkbox="true"></th>
             <th class="colId" data-sortable="true" data-field="Id"><?php echo translate('Id') ?></th>
@@ -65,7 +71,7 @@ foreach( $controls as $control ) {
 ?>
         </tbody>
       </table>
-    </div> <!-- .col -->
-  </div> <!-- .row -->
-</div> <!-- .wrapper-scroll-table -->
+    </div> <!--#controlCaps-->
+  </div><!--#content-->
+</div><!-- #page -->
 <script src="skins/<?php echo $skin ?>/views/js/controlcaps.js" nonce="<?php echo $cspNonce ?>"></script>

From 74356b186c80be91df0d7e63e623cae56ffb0746 Mon Sep 17 00:00:00 2001
From: IgorA100 <igora100@gmail.com>
Date: Tue, 23 Sep 2025 23:11:35 +0300
Subject: [PATCH 2/2] Added styles (options.css)

---
 web/skins/classic/css/base/views/options.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/web/skins/classic/css/base/views/options.css b/web/skins/classic/css/base/views/options.css
index d121f42a5..a869d0b3d 100644
--- a/web/skins/classic/css/base/views/options.css
+++ b/web/skins/classic/css/base/views/options.css
@@ -53,6 +53,7 @@ input.large {
   overflow-x: auto;
   overflow-y: hidden;
   padding-top: 15px;
+  display: flex;
 }
 
 #options {
@@ -128,6 +129,7 @@ input[name="newStorage[Url]"] {
 form {
 /*  display: flex;*/
 /*  flex-direction: column;*/
+  width: 100%;
   height: 100%;
 /*  padding-top: 2rem; */
 }
@@ -184,3 +186,18 @@ body.sticky .wrapper-scroll-table {
   overflow-x: hidden; 
   overflow-y: auto; 
 }
+body.sticky .bootstrap-table {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+body.sticky .fixed-table-container {
+  overflow-y: auto;
+}
+
+body.sticky #controlTable thead {
+    position: sticky;
+    top: 0;
+    box-shadow: 0 0px 0, 0 -3px 0 #dfe4ea;
+}