From 0da61668b03ed9215a8f24b9bbadb575c7859219 Mon Sep 17 00:00:00 2001
From: Simon Cambier <simon.cambier@protonmail.com>
Date: Fri, 23 Sep 2022 08:40:24 +0200
Subject: [PATCH] #96 - Fixed layout

---
 assets/styles.css                 | 14 ++++++--------
 src/components/InputSearch.svelte |  8 ++------
 src/components/ModalInFile.svelte |  2 +-
 src/components/ModalVault.svelte  |  2 +-
 4 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/assets/styles.css b/assets/styles.css
index e2ef8b4..a426b95 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -36,15 +36,13 @@
   gap: 5px;
 }
 
+@media only screen and (max-width: 600px) {
+  .omnisearch-input-container {
+    flex-direction: column;
+  }
+}
+
 .omnisearch-input-field {
   position: relative;
   flex-grow: 1;
 }
-
-.omnisearch-input__context {
-  position: absolute;
-  right: 1em;
-  top: calc(50% - 0.75em);
-  color: var(--text-faint);
-  font-size: small;
-}
\ No newline at end of file
diff --git a/src/components/InputSearch.svelte b/src/components/InputSearch.svelte
index 2ccc568..ca6bcc7 100644
--- a/src/components/InputSearch.svelte
+++ b/src/components/InputSearch.svelte
@@ -4,7 +4,7 @@
   import { createEventDispatcher, onMount, tick } from 'svelte'
 
   export let value = ''
-  export let label = ''
+  export let placeholder = ''
   const dispatch = createEventDispatcher()
 
   let elInput: HTMLInputElement
@@ -33,12 +33,8 @@
       on:compositionend="{_ => toggleInputComposition(false)}"
       type="text"
       class="prompt-input"
-      placeholder="Type to search through your notes"
+      {placeholder}
       spellcheck="false" />
-
-    <span class="omnisearch-input__context">
-      {label}
-    </span>
   </div>
   <slot></slot>
 </div>
diff --git a/src/components/ModalInFile.svelte b/src/components/ModalInFile.svelte
index 0397ba5..2355c81 100644
--- a/src/components/ModalInFile.svelte
+++ b/src/components/ModalInFile.svelte
@@ -143,7 +143,7 @@
 <InputSearch
   value={searchQuery}
   on:input={e => (searchQuery = e.detail)}
-  label="Omnisearch - File" />
+  placeholder="Omnisearch - File" />
 
 <ModalContainer>
   {#if groupedOffsets.length && note}
diff --git a/src/components/ModalVault.svelte b/src/components/ModalVault.svelte
index e31d069..45cfa1d 100644
--- a/src/components/ModalVault.svelte
+++ b/src/components/ModalVault.svelte
@@ -171,7 +171,7 @@
 <InputSearch
   value="{searchQuery}"
   on:input="{e => (searchQuery = e.detail)}"
-  label="Omnisearch - Vault">
+  placeholder="Omnisearch - Vault">
   {#if $settings.showCreateButton}
     <button on:click="{createNoteAndCloseModal}">Create note</button>
   {/if}