From d503993a74f201eb23b6d82ea0cfecc0d1e65148 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 23 Oct 2025 20:03:44 +0300
Subject: [PATCH] chore(mobile/search): further improve the layout

---
 .../src/stylesheets/theme-next/pages.css      |  2 +-
 .../widgets/ribbon/SearchDefinitionTab.css    | 34 +++++++++++++++++--
 .../widgets/ribbon/SearchDefinitionTab.tsx    |  4 +--
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/stylesheets/theme-next/pages.css b/apps/client/src/stylesheets/theme-next/pages.css
index d0c092321..8b5a9ed9a 100644
--- a/apps/client/src/stylesheets/theme-next/pages.css
+++ b/apps/client/src/stylesheets/theme-next/pages.css
@@ -63,7 +63,7 @@
 
  /* Button bar */
  .search-definition-widget .search-setting-table tbody:last-child div {
-    justify-content: flex-end !important;
+    justify-content: flex-end;
     gap: 8px;
  }
 
diff --git a/apps/client/src/widgets/ribbon/SearchDefinitionTab.css b/apps/client/src/widgets/ribbon/SearchDefinitionTab.css
index de499a0e6..640727c98 100644
--- a/apps/client/src/widgets/ribbon/SearchDefinitionTab.css
+++ b/apps/client/src/widgets/ribbon/SearchDefinitionTab.css
@@ -57,13 +57,20 @@
     background-color: var(--accented-background-color);
 }
 
+.search-actions-container {
+    display: flex;
+    justify-content: space-evenly;
+}
+
 @media (max-width: 720px) {
     .search-setting-table {
         display: block;
+        font-size: 0.9em;
     }
 
     .search-setting-table tr {
-        margin: 0.5em 0;
+        padding: 0.5em 0;
+        border-bottom: 1px solid var(--main-border-color);
     }
 
     .search-setting-table tr,
@@ -73,7 +80,7 @@
 
     .search-setting-table tbody {
         display: block;
-        padding: 0.5em;
+        padding: 0 1em;
     }
 
     .search-setting-table tbody:first-of-type {
@@ -92,6 +99,7 @@
     .search-options tr,
     .action-options tr {
         display: flex;
+        align-items: center;
     }
 
     .action-options tr > td > div {
@@ -106,13 +114,19 @@
     .search-setting-table .title-column {
         width: unset;
         margin-right: 0.5em;
-        min-width: 20%;
+        min-width: 30%;
         flex-shrink: 0;
     }
 
     .search-setting-table .button-column {
         flex-grow: 1;
         justify-content: end;
+        overflow: hidden;
+        flex-shrink: 0;
+    }
+
+    .search-setting-table .button-column .bx-help-circle {
+        display: none;
     }
 
     .search-setting-table tr.orderBy td:nth-of-type(2) {
@@ -131,4 +145,18 @@
         flex-shrink: 0;
         width: 64px;
     }
+
+    .search-setting-table tr.ancestor > td > div {
+        flex-direction: column;
+        align-items: flex-start !important;
+    } 
+
+    .search-actions tr {
+        border-bottom: 0;
+    }
+
+    .search-actions-container {
+        align-items: center;
+        justify-content: center !important;
+    }
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx b/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
index faf1e2dc0..2961e32ab 100644
--- a/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
+++ b/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
@@ -111,10 +111,10 @@ export default function SearchDefinitionTab({ note, ntxId }: TabContext) {
               })}
             </tbody>
             <BulkActionsList note={note} />
-            <tbody>
+            <tbody className="search-actions">
               <tr>
                 <td colSpan={3}>
-                  <div style={{ display: "flex", justifyContent: "space-evenly" }}>
+                  <div className="search-actions-container">
                     <Button
                       icon="bx bx-search"
                       text={t("search_definition.search_button")}