From 3cbf265def0cd48151cf5fa1b59e608648ceada5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Mon, 13 Feb 2023 17:52:01 +0100
Subject: [PATCH] Don't expand search bar on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Also don't show the connect button in the mobile layout. We don't
support running nodes on mobile anyway.

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>
---
 src/App/Header.svelte        | 13 +++----------
 src/App/Header/Search.svelte | 29 ++++++++++++++++++-----------
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/App/Header.svelte b/src/App/Header.svelte
index ca24e4da4..863d69e45 100644
--- a/src/App/Header.svelte
+++ b/src/App/Header.svelte
@@ -62,7 +62,9 @@
   </div>
 
   <div class="right">
-    <Connect />
+    <div class="layout-desktop">
+      <Connect />
+    </div>
     <Floating>
       <div slot="toggle">
         <button class="toggle" name="Settings">
@@ -71,14 +73,5 @@
       </div>
       <SettingsDropdown slot="modal" />
     </Floating>
-    <div class="layout-mobile">
-      <Floating>
-        <div slot="toggle">
-          <span style="transform: scale(1.2);">
-            <Icon name="ellipsis" />
-          </span>
-        </div>
-      </Floating>
-    </div>
   </div>
 </header>
diff --git a/src/App/Header/Search.svelte b/src/App/Header/Search.svelte
index 04d188013..c4c963a47 100644
--- a/src/App/Header/Search.svelte
+++ b/src/App/Header/Search.svelte
@@ -16,15 +16,14 @@
   }>();
 
   export let input = "";
+
   let loading = false;
   let shaking = false;
+  let expanded = false;
 
   // Clears search input on user navigation.
   router.historyStore.subscribe(() => (input = ""));
 
-  const collapsedWidth = 13;
-  const expandedWidth = 20;
-
   function shake() {
     shaking = true;
     debounce(() => (shaking = false), 500)();
@@ -69,7 +68,7 @@
         });
       }
       dispatch("finished");
-      searchBarWidth = collapsedWidth;
+      expanded = false;
     } else {
       unreachable(searchResult);
     }
@@ -77,7 +76,6 @@
   }
 
   $: valid = input !== "";
-  $: searchBarWidth = collapsedWidth;
 </script>
 
 <style>
@@ -106,24 +104,33 @@
   }
   .search {
     transition: all 0.2s;
+    width: 13rem;
+  }
+  .expanded {
+    width: 20rem;
   }
   @media (max-width: 720px) {
-    .search {
-      display: none;
+    .expanded {
+      width: 13rem;
     }
   }
 </style>
 
-<div class="search" style:width={`${searchBarWidth}rem`}>
+<div class="search" class:expanded>
   <div class="search-bar" class:shaking>
     <TextInput
       valid={input !== ""}
       {loading}
       disabled={loading}
       bind:value={input}
-      on:focus={() => (searchBarWidth = expandedWidth)}
-      on:blur={() =>
-        input === "" ? (searchBarWidth = collapsedWidth) : undefined}
+      on:focus={() => {
+        expanded = true;
+      }}
+      on:blur={() => {
+        if (input === "") {
+          expanded = false;
+        }
+      }}
       on:submit={search}
       placeholder="Search a name…">
       <div slot="left">