#96 - Fixed layout

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;
-}

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>

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}

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}