polish(ui): adjust search bar placement for improved UX

src/styles/settings/_search.scss

@@ -1,11 +1,21 @@
 /* Search bar and related controls */
 .color-master-settings-tab {
+  .cm-search-shell {
+    width: 100%;
+    margin-bottom: 20px;
+    padding: 10px 12px;
+    border-radius: var(--radius-m);
+    border: 1px solid var(--background-modifier-border);
+    background-color: var(--background-primary-alt);
+    box-sizing: border-box;
+  }
+
   .cm-search-bar-container {
     display: flex;
     align-items: center;
     gap: 8px;
     width: 100%;
-    margin-bottom: 20px;
+    margin-bottom: 0;
   }
 
   .cm-search-input-container {
@@ -16,15 +26,6 @@
     }
     .search-input-container {
       width: 100%;
-      input {
-        width: 100%;
-        background-color: transparent !important;
-        border: 1px solid var(--background-modifier-border);
-        &:focus {
-          box-shadow: none !important;
-          border-color: var(--interactive-accent);
-        }
-      }
     }
   }
 
@@ -71,4 +72,31 @@
     white-space: nowrap;
     line-height: 1;
   }
+
+  &[dir='rtl'] {
+    .cm-search-filter-options {
+      margin-left: 0;
+      margin-right: 4px;
+    }
+  }
+
+  @media (max-width: 720px) {
+    .cm-search-shell {
+      padding: 10px;
+    }
+
+    .cm-search-bar-container {
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .cm-search-input-container {
+      min-width: 100%;
+    }
+
+    .cm-search-actions {
+      width: 100%;
+      justify-content: flex-end;
+    }
+  }
 }

src/styles/settings/_utilities.scss

@@ -45,6 +45,11 @@
   margin: -1px 0px;
 }
 
+.color-master-settings-tab > hr.cm-search-divider {
+  margin-top: 8px;
+  margin-bottom: 12px;
+}
+
 .cm-static-sections > hr {
   margin-top: 3px;
   margin-bottom: 30px;

src/ui/settingsTab.ts

@@ -122,7 +122,12 @@ export class ColorMasterSettingTab extends PluginSettingTab {
       section: this.plugin.settings.lastSearchSection || '',
     };
 
-    const searchBarContainer = containerEl.createDiv({
+    const searchShell = containerEl.createDiv({
+      cls: 'cm-search-shell',
+    });
+    this.searchContainer = searchShell;
+
+    const searchBarContainer = searchShell.createDiv({
       cls: 'cm-search-bar-container',
     });
 
@@ -269,10 +274,6 @@ export class ColorMasterSettingTab extends PluginSettingTab {
   _applySearchFilter() {
     const s = this._searchState;
     const activeProfile = this.plugin.settings.profiles[this.plugin.settings.activeProfile];
-    if (this.staticContentContainer) {
-      const isSearching = s.query.trim().length > 0 || s.section !== '';
-      this.staticContentContainer.toggleClass('cm-hidden', isSearching);
-    }
     const rows = Array.from(
       this.containerEl.querySelectorAll<HTMLElement>('.cm-var-row, .cm-searchable-row'),
     );
@@ -710,7 +711,6 @@ export class ColorMasterSettingTab extends PluginSettingTab {
       });
     });
 
-    this.initSearchUI(containerEl);
     this.staticContentContainer = containerEl.createDiv({
       cls: 'cm-static-sections',
     });
@@ -719,6 +719,8 @@ export class ColorMasterSettingTab extends PluginSettingTab {
     drawOptionsSection(this.staticContentContainer, this);
     this.staticContentContainer.createEl('hr');
     drawCssSnippetsUI(this.staticContentContainer, this);
+    containerEl.createEl('hr', { cls: 'cm-search-divider' });
+    this.initSearchUI(containerEl);
     drawColorPickers(this.containerEl, this, themeDefaults);
     containerEl.createEl('hr');
     drawLikePluginCard(containerEl, this);