From 978e94da900aa281f6537ea4395fefdb914f9b54 Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Tue, 21 Jul 2026 09:58:02 -0400
Subject: [PATCH] fix(android): bump safe-top to 2rem, enlarge toolbar icons,
 fix login spacing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- --safe-top: 1.5rem → 2rem for extra status bar clearance
- Formatting toolbar: w-3→w-4, p-1→p-1.5 for better touch targets
- Login form: increased vertical spacing between buttons, text-xs on passkey
---
 web/src/components/MessageInput.tsx | 50 ++++++++++++++---------------
 web/src/main.tsx                    |  2 +-
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/web/src/components/MessageInput.tsx b/web/src/components/MessageInput.tsx
index 16c1bb8..53175d9 100644
--- a/web/src/components/MessageInput.tsx
+++ b/web/src/components/MessageInput.tsx
@@ -610,8 +610,8 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(f
             <button type="button" disabled={disabled || uploading}
               onClick={() => fileInputRef.current?.click()}
               title="Upload file"
-              className="text-gb-fg-f hover:text-gb-orange p-1 disabled:opacity-50">
-              <FontAwesomeIcon icon={faPlus} className={`w-3.5 h-3.5 ${uploading ? "animate-pulse" : ""}`} />
+              className="text-gb-fg-f hover:text-gb-orange p-1.5 disabled:opacity-50">
+              <FontAwesomeIcon icon={faPlus} className={`w-4 h-4 ${uploading ? "animate-pulse" : ""}`} />
             </button>
 
             <span className="text-gb-bg-t mx-1">│</span>
@@ -619,28 +619,28 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(f
             {/* block formatting */}
             <button type="button" disabled={disabled}
               onClick={() => execBlock("ul")} title="Unordered list"
-              className="text-gb-fg-f hover:text-gb-orange p-1 disabled:opacity-50">
-              <FontAwesomeIcon icon={faListUl} className="w-3 h-3" />
+              className="text-gb-fg-f hover:text-gb-orange p-1.5 disabled:opacity-50">
+              <FontAwesomeIcon icon={faListUl} className="w-4 h-4" />
             </button>
             <button type="button" disabled={disabled}
               onClick={() => execBlock("ol")} title="Ordered list"
-              className="text-gb-fg-f hover:text-gb-orange p-1 disabled:opacity-50">
-              <FontAwesomeIcon icon={faListOl} className="w-3 h-3" />
+              className="text-gb-fg-f hover:text-gb-orange p-1.5 disabled:opacity-50">
+              <FontAwesomeIcon icon={faListOl} className="w-4 h-4" />
             </button>
             <button type="button" disabled={disabled}
               onClick={() => execBlock("blockquote")} title="Blockquote"
-              className="text-gb-fg-f hover:text-gb-orange p-1 disabled:opacity-50">
-              <FontAwesomeIcon icon={faQuoteRight} className="w-3 h-3" />
+              className="text-gb-fg-f hover:text-gb-orange p-1.5 disabled:opacity-50">
+              <FontAwesomeIcon icon={faQuoteRight} className="w-4 h-4" />
             </button>
             <button type="button" disabled={disabled}
               onClick={execLink} title="Insert link"
-              className="text-gb-fg-f hover:text-gb-orange p-1 disabled:opacity-50">
-              <FontAwesomeIcon icon={faLink} className="w-3 h-3" />
+              className="text-gb-fg-f hover:text-gb-orange p-1.5 disabled:opacity-50">
+              <FontAwesomeIcon icon={faLink} className="w-4 h-4" />
             </button>
             <button type="button" disabled={disabled}
               onClick={() => execBlock("h2")} title="Heading"
-              className="text-gb-fg-f hover:text-gb-orange p-1 disabled:opacity-50">
-              <FontAwesomeIcon icon={faHeading} className="w-3 h-3" />
+              className="text-gb-fg-f hover:text-gb-orange p-1.5 disabled:opacity-50">
+              <FontAwesomeIcon icon={faHeading} className="w-4 h-4" />
             </button>
 
             <span className="text-gb-bg-t mx-1">│</span>
@@ -648,43 +648,43 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(f
             {/* inline formatting */}
             <button type="button" disabled={disabled}
               onClick={() => execInline("**", "**")} title="Bold"
-              className="text-gb-fg-f hover:text-gb-orange p-1 disabled:opacity-50">
-              <FontAwesomeIcon icon={faBold} className="w-3 h-3" />
+              className="text-gb-fg-f hover:text-gb-orange p-1.5 disabled:opacity-50">
+              <FontAwesomeIcon icon={faBold} className="w-4 h-4" />
             </button>
             <button type="button" disabled={disabled}
               onClick={() => execInline("*", "*")} title="Italic"
-              className="text-gb-fg-f hover:text-gb-orange p-1 disabled:opacity-50">
-              <FontAwesomeIcon icon={faItalic} className="w-3 h-3" />
+              className="text-gb-fg-f hover:text-gb-orange p-1.5 disabled:opacity-50">
+              <FontAwesomeIcon icon={faItalic} className="w-4 h-4" />
             </button>
             <button type="button" disabled={disabled}
               onClick={() => execInline("~~", "~~")} title="Strikethrough"
-              className="text-gb-fg-f hover:text-gb-orange p-1 disabled:opacity-50">
-              <FontAwesomeIcon icon={faStrikethrough} className="w-3 h-3" />
+              className="text-gb-fg-f hover:text-gb-orange p-1.5 disabled:opacity-50">
+              <FontAwesomeIcon icon={faStrikethrough} className="w-4 h-4" />
             </button>
             <button type="button" disabled={disabled}
               onClick={() => execInline("`", "`")} title="Code"
-              className="text-gb-fg-f hover:text-gb-orange p-1 disabled:opacity-50">
-              <FontAwesomeIcon icon={faCode} className="w-3 h-3" />
+              className="text-gb-fg-f hover:text-gb-orange p-1.5 disabled:opacity-50">
+              <FontAwesomeIcon icon={faCode} className="w-4 h-4" />
             </button>
             <button type="button" disabled={disabled}
               onClick={() => execInline("||", "||")} title="Spoiler"
-              className="text-gb-fg-f hover:text-gb-orange p-1 disabled:opacity-50">
-              <FontAwesomeIcon icon={faEyeSlash} className="w-3 h-3" />
+              className="text-gb-fg-f hover:text-gb-orange p-1.5 disabled:opacity-50">
+              <FontAwesomeIcon icon={faEyeSlash} className="w-4 h-4" />
             </button>
 
             <span className="text-gb-bg-t mx-1">│</span>
 
             {/* emoji / kaomoji / gif */}
             <button type="button" disabled={disabled} onClick={toggleEmoji} title="Emoji"
-              className={`p-1 disabled:opacity-50 ${showEmoji ? "text-gb-orange" : "text-gb-fg-f hover:text-gb-orange"}`}>
+              className={`p-1.5 disabled:opacity-50 ${showEmoji ? "text-gb-orange" : "text-gb-fg-f hover:text-gb-orange"}`}>
               <FontAwesomeIcon icon={faSmile} className="w-4 h-4" />
             </button>
             <button type="button" disabled={disabled} onClick={toggleKaomoji} title="Kaomoji"
-              className={`p-1 disabled:opacity-50 ${showKaomoji ? "text-gb-orange" : "text-gb-fg-f hover:text-gb-orange"}`}>
+              className={`p-1.5 disabled:opacity-50 ${showKaomoji ? "text-gb-orange" : "text-gb-fg-f hover:text-gb-orange"}`}>
               <FontAwesomeIcon icon={faGrin} className="w-4 h-4" />
             </button>
             <button type="button" disabled={disabled} onClick={toggleGif} title="GIF"
-              className={`p-1 disabled:opacity-50 ${showGif ? "text-gb-orange" : "text-gb-fg-f hover:text-gb-orange"}`}>
+              className={`p-1.5 disabled:opacity-50 ${showGif ? "text-gb-orange" : "text-gb-fg-f hover:text-gb-orange"}`}>
               <FontAwesomeIcon icon={faFilm} className="w-4 h-4" />
             </button>
 
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 431c658..6275c6d 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -8,7 +8,7 @@ if (isTauri) {
   // WebView safe-area fallbacks: Android doesn't support CSS env(), and
   // Linux WebKitGTK chokes on env() inside var(). Set explicit values via JS.
   if (navigator.userAgent.includes('Android')) {
-    document.documentElement.style.setProperty('--safe-top', '1.5rem');
+    document.documentElement.style.setProperty('--safe-top', '2rem');
     document.documentElement.style.setProperty('--safe-bottom', '0.75rem');
     document.documentElement.style.setProperty('--safe-left', '0px');
     document.documentElement.style.setProperty('--safe-right', '0px');