fix: [DebugBar] make debug bar more user-friendly on mobile (codeigniter4#9473)

Author: warcooft

admin/css/debug-toolbar/toolbar.scss

@@ -457,6 +457,31 @@
     }
 }
 
+@media screen and (max-width: 768px) {
+    #debug-bar {
+      table {
+        display: block;
+        overflow-x: auto;
+        font-size: 12px;
+        margin: 5px 5px 10px 5px;
+  
+        td,
+        th {
+          padding: 4px 6px;
+        }
+      }
+  
+      .timeline {
+        display: block;
+        white-space: nowrap;
+        font-size: 12px;
+      }
+  
+      .toolbar {
+        overflow-x: auto;
+      }
+    }
+  }
 
 // THEMES
 // ========================================================================== */

system/Debug/Toolbar/Views/toolbar.css

@@ -332,6 +332,26 @@
     display: none !important;
   }
 }
+@media screen and (max-width: 768px) {
+  #debug-bar table {
+    display: block;
+    overflow-x: auto;
+    font-size: 12px;
+    margin: 5px 5px 10px 5px;
+  }
+  #debug-bar table td,
+  #debug-bar table th {
+    padding: 4px 6px;
+  }
+  #debug-bar .timeline {
+    display: block;
+    white-space: nowrap;
+    font-size: 12px;
+  }
+  #debug-bar .toolbar {
+    overflow-x: auto;
+  }
+}
 #debug-icon {
   background-color: #FFFFFF;
   box-shadow: 0 0 4px #DFDFDF;