feat: add fancy mobile media querries for preview area

main.ts

@@ -106,6 +106,7 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
       this.reRenderPreview();
     });
 
+    this.containerEl.addClass('bulk_rename_plugin');
     this.renderTabs();
     this.renderFileLocation();
     this.renderTagNames();
@@ -214,16 +215,11 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
       return;
     }
 
-    const desc = document.createDocumentFragment();
-    desc.append(
-      desc.createEl('b', {
-        text: 'Reg exp will match file Operation System path',
-      }),
-    );
-
-    new Setting(this.containerEl)
+    const settings = new Setting(this.containerEl);
+    settings.infoEl.addClass('bulk_regexp_search');
+    settings.setClass('bulk_regexp_container');
+    settings
       .setName('RegExp Search')
-      .setDesc(desc)
       .addText((cb) => {
         const backslash = createBackslash('/');
         cb.inputEl.insertAdjacentElement('beforebegin', backslash);
@@ -276,9 +272,9 @@ export class BulkRenameSettingsTab extends PluginSettingTab {
       return;
     }
 
-    const newSettings2 = new Setting(this.containerEl);
-
-    newSettings2
+    const newSettings = new Setting(this.containerEl);
+    newSettings.setClass('bulk_toggle');
+    newSettings
       .setName('Use RegExp For Existing & Replacement?')
       .setDesc(
         "Only RegExp will work now, however it doesn't prevent you to pass string",

styles.css

@@ -1,3 +1,7 @@
+.bulk_rename_plugin {
+  padding-right: 1rem;
+}
+
 .bulk_rename {
   width: calc(100% - 20px);
 }
@@ -8,6 +12,14 @@
   gap: 0;
 }
 
+@media screen and (max-width: 983px) {
+  .bulk_rename_preview {
+    display: flex;
+    flex-direction: column;
+    max-height: 300px;
+  }
+}
+
 .flex {
   display: flex;
 }
@@ -69,10 +81,26 @@
   margin-right: 15px;
 }
 
+.bulk_regexp_search {
+  padding-right: 1rem;
+}
+
+.bulk_toggle {
+  border-top: none;
+}
+
 .bulk_preview_label:first-child {
   margin-right: 15px;
 }
 
+.bulk_preview_label {
+  text-align: center;
+}
+
+.bulk_regexp_container {
+  justify-content: space-between;
+}
+
 .bulk_regexp_control {
   background: var(--background-modifier-form-field);
   border: 1px solid var(--background-modifier-border);
@@ -80,13 +108,13 @@
   font-family: inherit;
   border-radius: var(--input-radius);
   outline: none;
+  max-width: 400px;
 }
 
 .bulk_regexp_control:hover,
 .bulk_regexp_control:focus,
 .bulk_regexp_control:focus-visible {
   box-shadow: 0 0 0 2px var(--background-modifier-border-hover);
-  /*box-shadow: 0 0 0 2px var*/
 }
 
 .bulk_regexp_control > input {