fix #488: improve mobile responsive layout

src/main/resources/static/css/app.css

@@ -215,12 +215,14 @@ body {
   gap: .5rem;
   grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
   margin-bottom: 1rem;
+  min-width: 0;
 }
 
 .architecture-step {
   background: var(--rw-surface);
   border: 1px solid var(--rw-border);
   border-radius: 8px;
+  min-width: 0;
   padding: .85rem;
 }
 
@@ -247,6 +249,7 @@ body {
   color: var(--rw-muted);
   font-size: .82rem;
   margin: .25rem 0 0;
+  overflow-wrap: anywhere;
 }
 
 .architecture-arrow {
@@ -298,6 +301,7 @@ body {
 
 .content-band {
   margin-bottom: 1rem;
+  min-width: 0;
   padding: 1rem;
 }
 
@@ -311,6 +315,7 @@ body {
 .section-heading {
   align-items: center;
   display: flex;
+  flex-wrap: wrap;
   justify-content: space-between;
   gap: 1rem;
   margin-bottom: 1rem;
@@ -325,8 +330,9 @@ body {
 .form-grid {
   align-items: end;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
   gap: 1rem;
+  min-width: 0;
 }
 
 .form-grid label {
@@ -394,12 +400,14 @@ body {
 .rule-row {
   display: grid;
   gap: .5rem;
-  grid-template-columns: 1fr 1fr 1fr auto;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
+  min-width: 0;
 }
 
 .permission-wizard {
   display: grid;
   gap: 1rem;
+  min-width: 0;
 }
 
 .wizard-progress {
@@ -428,7 +436,8 @@ body {
 .wizard-summary {
   display: grid;
   gap: .75rem;
-  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
+  min-width: 0;
 }
 
 .wizard-summary > div,
@@ -458,6 +467,7 @@ body {
   border: 1px solid var(--rw-border);
   border-radius: 8px;
   display: none;
+  min-width: 0;
   padding: 1rem;
 }
 
@@ -1042,18 +1052,119 @@ body {
   font-weight: 800;
 }
 
+.table-responsive {
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.table-responsive > .table {
+  margin-bottom: 0;
+}
+
+.table th,
+.table td {
+  min-width: 0;
+  vertical-align: top;
+}
+
+.table-responsive > .table th,
+.table-responsive > .table td {
+  white-space: nowrap;
+}
+
+.table code,
+.table-responsive > .table code {
+  overflow-wrap: normal;
+  white-space: nowrap;
+  word-break: normal;
+}
+
+.table-pre {
+  max-height: 8rem;
+  overflow: auto;
+  white-space: pre-wrap;
+}
+
+@media (max-width: 920px) {
+  .architecture-strip {
+    grid-template-columns: 1fr;
+  }
+
+  .architecture-arrow {
+    display: none;
+  }
+}
+
 @media (max-width: 640px) {
+  main.container {
+    max-width: 100%;
+    min-width: 0;
+    padding-left: .75rem;
+    padding-right: .75rem;
+  }
+
+  .page-title {
+    margin-bottom: 1rem;
+  }
+
+  .page-title h1 {
+    font-size: 1.45rem;
+  }
+
+  .content-band {
+    padding: .85rem;
+  }
+
+  .section-heading {
+    align-items: flex-start;
+    gap: .5rem;
+  }
+
   .form-grid .span-2 {
     grid-column: span 1;
   }
 
+  .rule-row {
+    grid-template-columns: 1fr;
+  }
+
+  .rule-row .btn {
+    width: 100%;
+  }
+
+  .wizard-panel {
+    padding: .85rem;
+  }
+
+  .wizard-actions {
+    flex-wrap: wrap;
+  }
+
+  .wizard-actions .btn {
+    flex: 1 1 auto;
+  }
+
+  .table-responsive > .table {
+    min-width: 960px;
+  }
+
   .navbar .container {
     align-items: flex-start;
     gap: .75rem;
   }
 
-  .navbar-nav {
-    flex-wrap: wrap;
-    gap: .25rem;
+  .rw-menu {
+    width: 100%;
+  }
+
+  .rw-menu-group {
+    min-width: 0;
+  }
+
+  .rw-menu-trigger {
+    padding-left: .65rem;
+    padding-right: .65rem;
   }
 }