ui: fix sessions table collapse on narrow widths (#12175)

Merged via squash.

Prepared head SHA: b1fcfba868fcfb7b9ee3496725921f3f38f58ac4
Co-authored-by: benjipeng <11394934+benjipeng@users.noreply.github.com>
Co-authored-by: BunsDev <68980965+BunsDev@users.noreply.github.com>
Reviewed-by: @BunsDev

ui/src/styles/components.css

@@ -1425,6 +1425,7 @@
 
 .table {
   display: grid;
+  container-type: inline-size;
   gap: 6px;
 }
 
@@ -1455,6 +1456,20 @@
   border-color: var(--border-strong);
 }
 
+@media (max-width: 1100px) {
+  .table-head,
+  .table-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+@container (max-width: 1100px) {
+  .table-head,
+  .table-row {
+    grid-template-columns: 1fr;
+  }
+}
+
 .session-link {
   text-decoration: none;
   color: var(--accent);