From bd2c9d1f2fa52efe4e128a1a32f799f8687643ce Mon Sep 17 00:00:00 2001
From: Maud Royer <hello@maudroyer.fr>
Date: Sat, 23 Mar 2024 18:15:08 +0100
Subject: [PATCH] fix: minor style adjustments

---
 components/Card.svelte |  3 +--
 components/Root.svelte | 20 +++++++++++++-------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/components/Card.svelte b/components/Card.svelte
index b087dd1..e1da0e5 100644
--- a/components/Card.svelte
+++ b/components/Card.svelte
@@ -39,8 +39,7 @@
 		padding: var(--card-padding);
 		word-wrap: break-word;
 		overflow-y: hidden;
-		width: var(--card-size);
-		margin: 0 0 var(--card-gutter);
+		margin: 0;
 		transition-property: transform;
 		transition-duration: 0.4s;
 	}
diff --git a/components/Root.svelte b/components/Root.svelte
index 3abb6e4..5c75394 100644
--- a/components/Root.svelte
+++ b/components/Root.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import {debounce, Menu, setIcon, TFile} from "obsidian";
+	import {debounce, Menu, SearchComponent, setIcon, TFile} from "obsidian";
 	import {afterUpdate, onMount} from "svelte";
 	import MiniMasonry from "minimasonry";
 
@@ -17,12 +17,17 @@
 	let viewContent: HTMLElement;
 	let cardsContainer: HTMLElement;
 	let columns: number
-	let enableLayoutTransition = true;
 
 	const sortIcon = (element: HTMLElement) => {
 		setIcon(element, "arrow-down-wide-narrow");
 	}
 
+	const searchInput = (element: HTMLElement) => {
+		(new SearchComponent(element)).onChange((value) => {
+			$searchQuery =value;
+		});
+	}
+
 	function sortMenu(event: MouseEvent) {
 		const sortMenu = new Menu();
 		sortMenu.addItem((item) => {
@@ -48,6 +53,8 @@
 			container: cardsContainer,
 			baseWidth: settings.minCardWidth,
 			gutter: 20,
+			surroundingGutter: false,
+			ultimateGutter: 20,
 		});
 		notesGrid.layout();
 
@@ -68,9 +75,7 @@
 </script>
 
 <div class="action-bar" bind:this={viewContent}>
-	<div class="search-input-container">
-		<input type="search" enterkeyhint="search" bind:value={$searchQuery} />
-	</div>
+	<div use:searchInput />
 	<button class="clickable-icon sort-button" use:sortIcon on:click={sortMenu} />
 </div>
 <div class="cards-container" bind:this={cardsContainer} style:--columns={columns}>
@@ -97,9 +102,10 @@
 	.cards-container {
 		position: relative;
 		container-type: inline-size;
+	}
+
+	.cards-container :global(*) {
 		--card-padding: var(--size-4-3);
 		--card-gutter: var(--size-4-5);
-		--columns: 0;
-		--card-size: calc((100% - var(--card-gutter) * (var(--columns) - 1)) / var(--columns));
 	}
 </style>