Fixed:

- Now the button row will be ordered like other panes in the mobile.
- the search field has been moved outside the scrolling area.
- No longer corrupted layout in the search box.

README.md

@@ -80,12 +80,12 @@ Pinned tags are sorted according to `key` in the frontmatter of `taginfo.md`.
 We can change the name of the file in which pin information is saved.
 This can be configured also from the context-menu.
 
-| Item     | Meaning of the value                                                                           |
-| -------- | ---------------------------------------------------------------------------------------------- |
-| key      | If exists, the tag is pinned.                                                                  |
-| mark     | The label which is shown instead of `📌`.                                                       |
-| alt      | The tag will be shown as this. But they will not be merged into the same one. No `#` required. |
-| redirect | The tag will be redirected to the configured one and will be merged. No `#` required.          |
+| Item     | Meaning of the value                                                                              |
+| -------- | ------------------------------------------------------------------------------------------------- |
+| key      | If exists, the tag is pinned.                                                                     |
+| mark     | The label which is shown instead of `📌`.                                                          |
+| alt      | The tag will be shown as this. But they will not be merged into the same one. No `#` is required. |
+| redirect | The tag will be redirected to the configured one and will be merged. No `#` is required.          |
 
 
 #### Merge redundant combinations

TagFolderView.ts

@@ -36,8 +36,9 @@ export class TagFolderView extends TagFolderViewBase {
 	}
 
 	async onOpen() {
+		this.containerEl.empty();
 		this.component = new TagFolderViewComponent({
-			target: this.contentEl,
+			target: this.containerEl,
 			props: {
 				openfile: this.plugin.focusFile,
 				hoverPreview: this.plugin.hoverPreview,

TagFolderViewBase.ts

@@ -28,6 +28,7 @@ function toggleObjectProp(obj: { [key: string]: any }, propName: string, value:
 export abstract class TagFolderViewBase extends ItemView {
     component: TagFolderViewComponent;
     plugin: TagFolderPlugin;
+    navigation: false;
 
     showOrder(evt: MouseEvent) {
         const menu = new Menu();
@@ -247,7 +248,7 @@ export abstract class TagFolderViewBase extends ItemView {
                             this.plugin.tagInfo[tag] = toggleObjectProp(this.plugin.tagInfo[tag], "redirect", redirect == "" ? false : redirect);
                             this.plugin.applyTagInfo();
                             await this.plugin.saveTagInfo();
-                })
+                        })
                 });
                 menu.addItem(item => {
                     item.setTitle(`Open scroll view`)

TagFolderViewComponent.svelte

@@ -157,24 +157,24 @@
 		{/if}
 	</div>
 </div>
+{#if showSearch && isMainTree}
+	<div class="search-input-container">
+		<input
+			type="search"
+			spellcheck="false"
+			placeholder="Type to start search..."
+			bind:value={search}
+		/>
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<div
+			class="search-input-clear-button"
+			aria-label="Clear search"
+			style="display:{search.trim() == '' ? 'none' : ''};"
+			on:click={clearSearch}
+		/>
+	</div>
+{/if}
 <div class="nav-files-container">
-	{#if showSearch && isMainTree}
-		<div class="search-input-container">
-			<input
-				type="text"
-				spellcheck="false"
-				placeholder="Type to start search..."
-				bind:value={search}
-			/>
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<div
-				class="search-input-clear-button"
-				aria-label="Clear search"
-				style="display:{search.trim() == '' ? 'none' : ''};"
-				on:click={clearSearch}
-			/>
-		</div>
-	{/if}
 	<div class="nav-folder mod-root">
 		<div class="nav-folder-title">
 			<div class="nav-folder-collapse-indicator collapse-icon" />
@@ -204,9 +204,6 @@
 </div>
 
 <style>
-	.nav-folder {
-		padding-bottom: 64px;
-	}
 	.nav-files-container {
 		height: 100%;
 	}