feat: phone layout for the panel, and Termux-style extra keys in the terminal

internal/server/web/templates/forwards.html

@@ -24,6 +24,15 @@
     color:var(--text); font-size:14px; cursor:pointer;
   }
   .under { min-height:20px; margin:12px 110px 0 0; font-size:13px; line-height:20px; }
+  /* Phones: two fields a line, the label and the button each a line of their own. */
+  @media (max-width: 640px) {
+    .frow .fld, .frow .fld.addr { width:calc(50% - 6px); }
+    .frow .fld.grow { flex:1 1 100%; }
+    .frow .act { display:flex; align-items:center; gap:16px; width:100%; }
+    .frow .act button { flex:1; }
+    .frow .act label.check { position:static; transform:none; margin:0; }
+    .under { margin-right:0; }
+  }
 </style>
 </head>
 <body>
@@ -46,17 +55,17 @@
   <div class="card">
     <h2>Правила</h2>
     {{if .Rules}}
-    <table>
+    <table class="stack">
       <thead><tr><th>Тип</th><th>Хост (порт)</th><th>→ Клиент (порт)</th><th>Слушать на</th><th>Метка</th><th></th></tr></thead>
       <tbody>
       {{range .Rules}}
         <tr>
-          <td><code>{{.Proto}}</code></td>
-          <td class="muted">:{{.HostPort}}</td>
-          <td class="muted">127.0.0.1:{{.ClientPort}}</td>
-          <td class="muted">{{.ListenAddr}}{{if and .NoUfw $.UfwEnabled}} · без ufw{{end}}</td>
-          <td>{{.Label}}</td>
-          <td style="text-align:right">
+          <td data-l="Тип"><code>{{.Proto}}</code></td>
+          <td class="muted" data-l="Хост">:{{.HostPort}}</td>
+          <td class="muted" data-l="→ Клиент">127.0.0.1:{{.ClientPort}}</td>
+          <td class="muted" data-l="Слушать на">{{.ListenAddr}}{{if and .NoUfw $.UfwEnabled}} · без ufw{{end}}</td>
+          <td class="lead">{{.Label}}</td>
+          <td class="actions" style="text-align:right">
             <form method="post" action="/forwards/{{.ID}}/delete" style="display:inline"
                   onsubmit="return confirm('Удалить правило?')">
               <input type="hidden" name="csrf" value="{{$.CSRF}}">