Merge pull request #26 from frasermolyneux/copilot/fix-mobile-navigation-issues

Fix mobile navigation collapse and RCON table overflow

Author: frasermolyneux

src/XtremeIdiots.Portal.Web/Views/ServerAdmin/ViewRcon.cshtml

@@ -22,20 +22,22 @@
                         <h5>Connected Players</h5>
                     </div>
                     <div class="ibox-content">
-                        <table id="dataTable" class="table table-striped table-hover" style="width:100%">
-                            <thead>
-                                <tr>
-                                    <th>#</th>
-                                    <th>Username</th>
-                                    <th>Guid</th>
-                                    <th>IP Address</th>
-                                    <th>Rate</th>
-                                    <th>Actions</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                            </tbody>
-                        </table>
+                        <div class="table-responsive">
+                            <table id="dataTable" class="table table-striped table-hover w-100">
+                                <thead>
+                                    <tr>
+                                        <th scope="col">#</th>
+                                        <th scope="col">Username</th>
+                                        <th scope="col">Guid</th>
+                                        <th scope="col">IP Address</th>
+                                        <th scope="col">Rate</th>
+                                        <th scope="col">Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                </tbody>
+                            </table>
+                        </div>
                     </div>
                 </div>
 
@@ -196,12 +198,27 @@
                 processing: true,
                 pageLength: 50,
                 stateSave: true,
+                responsive: {
+                    details: {
+                        type: 'inline',
+                        target: 'tr'
+                    }
+                },
+                autoWidth: false,
                 order: [[0, "asc"]],
                 ajax: {
                     url: '/ServerAdmin/GetRconPlayers/@Model.GameServerId',
                     dataSrc: 'data',
                     error: handleAjaxError
                 },
+                columnDefs: [
+                    { targets: 0, responsivePriority: 1 }, // # (Num) - always visible
+                    { targets: 1, responsivePriority: 2 }, // Username - always visible
+                    { targets: 2, responsivePriority: 5 }, // Guid - hide first on small screens
+                    { targets: 3, responsivePriority: 4 }, // IP Address - hide on smaller screens
+                    { targets: 4, responsivePriority: 6 }, // Rate - hide first on small screens
+                    { targets: 5, responsivePriority: 3 }  // Actions - keep visible
+                ],
                 columns: [
                     {
                         data: 'num',
@@ -250,7 +267,6 @@
                     {
                         data: null,
                         sortable: false,
-                        width: '200px',
                         render: function (data, type, row) {
                             if (!row.num) return '';
                             

src/XtremeIdiots.Portal.Web/wwwroot/css/responsive-overrides.css

@@ -74,6 +74,25 @@ body:not(.mini-navbar) .metismenu .nav-second-level.collapse:not(.show) {
     display: block;
 }
 
+/* Fix for mobile navigation: prevent submenus from collapsing immediately on touch devices */
+@media (max-width: 768px) {
+    /* Ensure submenu stays open when tapped on mobile */
+    .metismenu .nav-second-level.collapse.show,
+    .metismenu .nav-second-level.collapsing {
+        display: block !important;
+    }
+    
+    /* Keep parent menu item active state visible */
+    .metismenu > li.active > .nav-second-level {
+        display: block;
+    }
+    
+    /* Prevent accidental collapse during touch interaction */
+    .metismenu .nav-second-level {
+        transition: none;
+    }
+}
+
 /* Keep icons-only (mini-navbar) menus open while interacting with the submenu */
 body.mini-navbar .metismenu>li.active>.nav-second-level.collapse,
 body.mini-navbar .metismenu>li:hover>.nav-second-level.collapse,