adjust mobile ui

app/javascript/application.js

@@ -25,6 +25,7 @@ import PromptPassword from './elements/prompt_password'
 import EmailsTextarea from './elements/emails_textarea'
 import ToggleOnSubmit from './elements/toggle_on_submit'
 import PasswordInput from './elements/password_input'
+import SearchInput from './elements/search_input'
 
 import * as TurboInstantClick from './lib/turbo_instant_click'
 
@@ -87,6 +88,7 @@ safeRegisterElement('emails-textarea', EmailsTextarea)
 safeRegisterElement('toggle-cookies', ToggleCookies)
 safeRegisterElement('toggle-on-submit', ToggleOnSubmit)
 safeRegisterElement('password-input', PasswordInput)
+safeRegisterElement('search-input', SearchInput)
 
 safeRegisterElement('template-builder', class extends HTMLElement {
   connectedCallback () {

app/javascript/elements/search_input.js

@@ -0,0 +1,25 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.input.addEventListener('focus', () => {
+      if (this.title) {
+        this.title.classList.add('hidden', 'md:block')
+        this.input.classList.add('w-60')
+      }
+    })
+
+    this.input.addEventListener('blur', (e) => {
+      if (this.title && !e.target.value) {
+        this.title.classList.remove('hidden')
+        this.input.classList.remove('w-60')
+      }
+    })
+  }
+
+  get input () {
+    return this.querySelector('input')
+  }
+
+  get title () {
+    return document.querySelector(this.dataset.title)
+  }
+}