From 4ebc3b0cccb03e88e778588759de978fd0ef3bdd Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Wed, 3 Dec 2025 19:14:49 -0500
Subject: [PATCH] ssb: Make the search box behave better on mobile.

---
 apps/ssb.json      |  2 +-
 apps/ssb/tf-app.js | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index 45c16ee6..67cb89a4 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&rq/9Dr780VM2+ozyeKZI4nq2t83JRgemzlJINlYYP4c=.sha256"
+	"previous": "&Do4vIjdE5vJgJ+fIZ10zOeDQcqNd+VUacQl2wzRjGhw=.sha256"
 }
diff --git a/apps/ssb/tf-app.js b/apps/ssb/tf-app.js
index c53554de..0533af52 100644
--- a/apps/ssb/tf-app.js
+++ b/apps/ssb/tf-app.js
@@ -753,7 +753,13 @@ class TfElement extends LitElement {
 	}
 
 	search() {
-		this.set_hash('#q=' + this.renderRoot.getElementById('search_text').value);
+		let search_text = this.renderRoot.getElementById('search_text');
+		if (!search_text.value.length) {
+			search_text.focus();
+			this.set_tab('search');
+		} else {
+			this.set_hash('#q=' + search_text.value);
+		}
 	}
 
 	search_keydown(event) {
@@ -825,8 +831,8 @@ class TfElement extends LitElement {
 							`
 						: undefined
 				}
-				<button class="w3-bar-item w3-button w3-right" @click=${this.search}>🔍Search</button>
-				<input type="text" class="w3-input w3-bar-item w3-right w3-theme-d1" placeholder="keywords, @id, #channel" id="search_text" @keydown=${this.search_keydown}></input>
+				<button class="w3-bar-item w3-button w3-right" @click=${this.search}>🔍<span class="w3-hide-small">Search</span></button>
+				<input type="text" class=${'w3-input w3-bar-item w3-right w3-theme-d1' + (this.tab == 'search' ? ' w3-mobile' : ' w3-hide-small')} placeholder="keywords, @id, #channel" id="search_text" @keydown=${this.search_keydown}></input>
 			</div>
 		`;
 		let contents = this.guest