From d448c1e3a4539d0ca090ddbc500993615fbe0cab Mon Sep 17 00:00:00 2001
From: iRedTea <red__tea@outlook.com>
Date: Wed, 14 Oct 2026 16:01:59 +0300
Subject: [PATCH] fix: find and replace fields of one width, a red close button

---
 internal/server/web/templates/files.html | 39 ++++++++++++++++--------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/internal/server/web/templates/files.html b/internal/server/web/templates/files.html
index 7b43cf8..3c5b869 100644
--- a/internal/server/web/templates/files.html
+++ b/internal/server/web/templates/files.html
@@ -75,15 +75,26 @@
             background:#0c0f13 repeating-conic-gradient(#151a21 0 25%, #0c0f13 0 50%) 0 0/20px 20px; border-radius:0 0 12px 12px; }
   .vmedia img, .vmedia video { max-width:100%; max-height:calc(75vh - 32px); object-fit:contain; }
   .vmedia audio { width:min(100%, 520px); }
-  /* Find and replace, over the editor. */
-  .find { display:flex; flex-direction:column; gap:6px; padding:8px 12px; border-bottom:1px solid var(--border); background:var(--panel); }
-  .find .fr { display:flex; gap:6px; align-items:center; }
-  .find input { flex:1; min-width:0; height:30px; padding:4px 10px; font-size:13px; font-family:ui-monospace,Menlo,monospace; }
+  /* Find and replace, over the editor: both fields the same width, their
+     buttons in a column of their own, the close button beside both rows. */
+  .find { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; gap:6px 8px; align-items:center;
+          padding:8px 12px; border-bottom:1px solid var(--border); background:var(--panel); }
+  .find .fin { position:relative; grid-column:1; }
+  .find input { width:100%; height:32px; padding:4px 76px 4px 10px; font-size:13px; font-family:ui-monospace,Menlo,monospace; }
+  .find #frep { padding-right:10px; }
   .find input.bad { border-color:var(--danger); }
-  .find button { height:30px; padding:0 10px; font-size:13px; flex:none; }
+  .find .cnt { position:absolute; right:10px; top:0; bottom:0; display:flex; align-items:center; pointer-events:none;
+               color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
+  .find .fbtns { grid-column:2; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:6px; }
+  .find button { height:32px; min-width:32px; padding:0 10px; font-size:13px; }
   .find button.tg { background:transparent; border:1px solid var(--border); color:var(--muted); font-family:ui-monospace,Menlo,monospace; }
   .find button.tg.on { border-color:var(--accent); color:var(--text); background:#12202f; }
-  .find .cnt { flex:none; min-width:64px; text-align:center; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
+  .find .fx { grid-column:3; grid-row:1 / span 2; align-self:center; width:32px; height:32px; padding:0;
+              display:inline-flex; align-items:center; justify-content:center;
+              background:transparent; border:1px solid rgba(255,92,92,.55); color:var(--danger); }
+  .find .fx:hover { background:#3a1d1d; border-color:var(--danger); }
+  .find.ro .fx { grid-row:1; }
+  .find #frow2, .find #frow2b { grid-row:2; }
   /* Hex editor: offset, 16 bytes, the same as text. Only the rows in sight are drawn. */
   .hexed { position:relative; height:70vh; overflow:auto; outline:none; background:#0c0f13;
            font:13px/20px ui-monospace,SFMono-Regular,Menlo,monospace; }
@@ -189,17 +200,18 @@
   </div>
   <div class="vbody">
     <div class="find" id="find" hidden>
-      <div class="fr">
-        <input type="text" id="fq" placeholder="Найти" spellcheck="false" autocomplete="off">
-        <span class="cnt" id="fcnt"></span>
+      <div class="fin"><input type="text" id="fq" placeholder="Найти" spellcheck="false" autocomplete="off"><span class="cnt" id="fcnt"></span></div>
+      <div class="fbtns">
         <button type="button" class="tg" id="fcase" title="Учитывать регистр">Aa</button>
         <button type="button" class="tg" id="fre" title="Регулярное выражение">.*</button>
         <button type="button" class="btn ghost" id="fprev" title="Предыдущее (Shift+Enter)">↑</button>
         <button type="button" class="btn ghost" id="fnext" title="Следующее (Enter)">↓</button>
-        <button type="button" class="btn ghost" id="fclose" title="Закрыть (Esc)">×</button>
       </div>
-      <div class="fr" id="frow2">
-        <input type="text" id="frep" placeholder="Заменить на" spellcheck="false" autocomplete="off">
+      <button type="button" class="fx" id="fclose" title="Закрыть поиск (Esc)" aria-label="Закрыть поиск">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
+      </button>
+      <div class="fin" id="frow2"><input type="text" id="frep" placeholder="Заменить на" spellcheck="false" autocomplete="off"></div>
+      <div class="fbtns" id="frow2b">
         <button type="button" class="btn ghost" id="frepone">Заменить</button>
         <button type="button" class="btn ghost" id="frepall">Все</button>
       </div>
@@ -408,7 +420,8 @@
     V.clean = c.changeGeneration();
     V.dirty = false;
     setButtons({save: editable});
-    $('frow2').hidden = !editable;
+    $('frow2').hidden = $('frow2b').hidden = !editable;
+    $('find').classList.toggle('ro', !editable);
     $('vmsg').textContent = fmtSize(d.size) + ' · ' + modeName(mode) +
       (d.truncated ? ' · показаны первые ' + fmtSize(EDIT_LIMIT) : '') + (editable ? '' : ' · только чтение (больше ' + fmtSize(EDIT_LIMIT) + ')') +
       ' · Ctrl/Cmd+F - поиск и замена';