From 3b16ad508eaf68e391ba56f228110cb0305d7645 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 3 Mar 2025 22:47:32 +0200
Subject: [PATCH] style(next)/search in note: gracefully handle narrow widths

---
 .../stylesheets/theme-next/notes/text.css     | 69 +++++++++++++++++++
 1 file changed, 69 insertions(+)

diff --git a/src/public/stylesheets/theme-next/notes/text.css b/src/public/stylesheets/theme-next/notes/text.css
index 8f54af5c9..61462f6a1 100644
--- a/src/public/stylesheets/theme-next/notes/text.css
+++ b/src/public/stylesheets/theme-next/notes/text.css
@@ -138,6 +138,10 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
  * Search in text panel
  */
 
+.find-replace-widget {
+    container-type: inline-size;
+}
+
 .find-replace-widget > div {
     padding: 8px;
 }
@@ -159,8 +163,73 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
 
 .find-replace-widget .form-check {
     padding-left: 0;
+    white-space: nowrap;
 }
 
 .find-replace-widget .form-check .form-check-input {
     margin-left: 0;
+}
+
+/* Narrow version */
+@container (max-width: 600px) {
+    .find-replace-widget > *,
+    .find-replace-widget input,
+    .find-replace-widget button.btn.btn-sm {
+        font-size: .9em;
+    }
+
+    .find-widget-box {
+        position: relative;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .find-widget-box,
+    .replace-widget-box {
+        padding-right: 3em !important;
+    }
+
+    .find-widget-close-button {
+        position: absolute;
+        top: .85em;
+        right: .5em;
+    }
+
+    .find-widget-box > * {
+        margin: unset !important;
+    }
+
+    div.find-widget-search-term-input-group {
+        margin-bottom: 8px;
+        max-width: unset;
+        width: 100%;
+    }
+
+    .find-widget-found-wrapper,
+    .find-widget-found-wrapper > span {
+        min-width: 0 !important;
+    }
+
+    .find-widget-spacer {
+        display: none;
+    }
+
+    .form-check {
+        min-height: unset;
+        margin-bottom: unset;
+    }
+
+    .replace-widget-box {
+        gap: 8px;
+    }
+
+    .replace-widget-box > * {
+        margin-right: unset !important;
+    }
+
+    div.replace-widget-box button.btn.btn-sm {
+        min-width: unset;
+        white-space: nowrap;
+    }
 }
\ No newline at end of file