feat: on a phone the selection's zip and delete sit on the line of the blue buttons; moved to the next line they start on the left

internal/server/web/static/app.css

@@ -420,6 +420,7 @@ body.touch.multi .tabs { padding-top:6px; max-height:38px; }
 body.touch .tab { height:28px; font-size:12px; padding:0 2px 0 8px; gap:6px; }
 body.touch .tab-add { width:30px; height:28px; }
 body.touch .tabview { inset:4px; }
+body.touch .tabview:not(.split) .fpane-body { padding-left:10px; padding-right:10px; }
 body.touch:not(.term-active) .keys { display:none; }
 body.touch.term-active .keys {
   display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; flex:none;
@@ -509,6 +510,7 @@ table.fm .c-act { width:1%; }
 table.fm td.sz { white-space:nowrap; }
 table.fm .act { flex-wrap:nowrap; }
 .fp-sel { display:inline-flex; align-items:center; gap:6px; flex:none; margin-left:auto; }
+.fp-sel.wrapped { margin-left:0; }
 .fp-selinfo { font-size:13px; margin-right:2px; }
 .fp-sel .btn.sq { width:34px; }
 .fp-selinfo:empty { display:none; }
@@ -521,8 +523,9 @@ table.fm .act { flex-wrap:nowrap; }
   table.fm td, table.fm th { padding:7px 4px; }
   .ic { margin-right:4px; }
   .fm-bar .fm-pathbox { flex:1 1 100%; order:-1; }
-  /* The selection's buttons go together on a line of their own. */
-  .fm-bar .spacer { flex:1 1 100%; height:0; }
+  /* The selection's buttons on the line of the blue ones: those a little
+     narrower, the count by the buttons only as a number. */
+  .fp-sel .fp-selinfo { font-size:12px; }
 }
 #save { display:inline-flex; align-items:center; gap:8px; }
 #save.saving { opacity:.85; cursor:progress; }
@@ -772,7 +775,12 @@ p.mv-a { margin:0; font-size:13px; }
 .fpane.narrow table.fm .c-act { width:1%; }
 .fpane.narrow table.fm td, .fpane.narrow table.fm th { padding:7px 4px; }
 .fpane.narrow .fm-bar .fm-pathbox { flex:1 1 100%; order:-1; }
-.fpane.narrow .fm-bar .spacer { flex:1 1 100%; height:0; }
+/* The selection's buttons stay on the line of the blue ones while they fit:
+   those a little more compact; the line breaks only when there is no room. */
+.fpane.narrow .fm-bar { gap:5px; }
+.fpane.narrow .fm-bar .btn.ico { padding-left:8px; padding-right:8px; gap:4px; font-size:12.5px; }
+.fpane.narrow .fp-sel { gap:4px; }
+.fpane.narrow .fp-sel .btn.sq { width:32px; height:32px; }
 /* The pane: its bar and list scroll inside it. */
 .fpane-body { flex:1; min-height:0; overflow:auto; padding:10px 12px 12px; }
 .tabview:not(.split) .fpane-body { padding:12px 16px 16px; }

internal/server/web/static/filepane.js

@@ -132,6 +132,7 @@
         const w = this.el.clientWidth;
         this.el.classList.toggle('narrow', w < 520);
         this.el.classList.toggle('mid', w < 760);
+        this.fitSel();
       }).observe(this.el);
       this.start();
     }
@@ -278,9 +279,19 @@
         tb.appendChild(tr);
       }
     }
+    // fitSel: the selection's buttons on the right of the blue ones; moved to
+    // a line of their own, they start on the left.
+    fitSel() {
+      const sel = this.q('.fp-sel');
+      sel.classList.remove('wrapped');
+      sel.classList.toggle('wrapped', sel.offsetTop > this.q('.fp-mkdir').offsetTop + 4);
+    }
     updateSel() {
       const n = this.selected.size;
-      this.q('.fp-selinfo').textContent = n ? 'Выбрано: ' + n : '';
+      // A narrow pane (a phone) has room for the number alone.
+      this.q('.fp-selinfo').textContent = n ? (this.el.classList.contains('narrow') ? n : 'Выбрано: ' + n) : '';
+      this.q('.fp-selinfo').title = n ? 'Выбрано: ' + n : '';
+      this.fitSel();
       this.q('.fp-zip').disabled = !n;
       this.q('.fp-delsel').disabled = !n;
     }