LobotomyLabs/dumpsterChat
2
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 10 Wiki Activity

fix(android): bump safe-top to 2rem, enlarge toolbar icons, fix login spacing

Browse Source 
- --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
This commit is contained in:
Dustin Newkirk
2026-07-21 09:58:02 -04:00
parent 34c18c13ae
commit 978e94da90
2 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/MessageInput.tsx
+25 -25
View File
@@ -610,8 +610,8 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(f
<button type="button" disabled={disabled || uploading} <button type="button" disabled={disabled || uploading}
onClick={() => fileInputRef.current?.click()} onClick={() => fileInputRef.current?.click()}
title="Upload file" title="Upload file"
className="text-gb-fg-f hover:text-gb-orange p-1 disabled:opacity-50"> className="text-gb-fg-f hover:text-gb-orange p-1.5 disabled:opacity-50">
<FontAwesomeIcon icon={faPlus} className={`w-3.5 h-3.5 ${uploading ? "animate-pulse" : ""}`} /> <FontAwesomeIcon icon={faPlus} className={`w-4 h-4 ${uploading ? "animate-pulse" : ""}`} />
</button> </button>
<span className="text-gb-bg-t mx-1">│</span> <span className="text-gb-bg-t mx-1">│</span>
@@ -619,28 +619,28 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(f
{/* block formatting */} {/* block formatting */}
<button type="button" disabled={disabled} <button type="button" disabled={disabled}
onClick={() => execBlock("ul")} title="Unordered list" onClick={() => execBlock("ul")} title="Unordered list"
className="text-gb-fg-f hover:text-gb-orange p-1 disabled:opacity-50"> className="text-gb-fg-f hover:text-gb-orange p-1.5 disabled:opacity-50">
<FontAwesomeIcon icon={faListUl} className="w-3 h-3" /> <FontAwesomeIcon icon={faListUl} className="w-4 h-4" />
</button> </button>
<button type="button" disabled={disabled} <button type="button" disabled={disabled}
onClick={() => execBlock("ol")} title="Ordered list" onClick={() => execBlock("ol")} title="Ordered list"
className="text-gb-fg-f hover:text-gb-orange p-1 disabled:opacity-50"> className="text-gb-fg-f hover:text-gb-orange p-1.5 disabled:opacity-50">
<FontAwesomeIcon icon={faListOl} className="w-3 h-3" /> <FontAwesomeIcon icon={faListOl} className="w-4 h-4" />
</button> </button>
<button type="button" disabled={disabled} <button type="button" disabled={disabled}
onClick={() => execBlock("blockquote")} title="Blockquote" onClick={() => execBlock("blockquote")} title="Blockquote"
className="text-gb-fg-f hover:text-gb-orange p-1 disabled:opacity-50"> className="text-gb-fg-f hover:text-gb-orange p-1.5 disabled:opacity-50">
<FontAwesomeIcon icon={faQuoteRight} className="w-3 h-3" /> <FontAwesomeIcon icon={faQuoteRight} className="w-4 h-4" />
</button> </button>
<button type="button" disabled={disabled} <button type="button" disabled={disabled}
onClick={execLink} title="Insert link" onClick={execLink} title="Insert link"
className="text-gb-fg-f hover:text-gb-orange p-1 disabled:opacity-50"> className="text-gb-fg-f hover:text-gb-orange p-1.5 disabled:opacity-50">
<FontAwesomeIcon icon={faLink} className="w-3 h-3" /> <FontAwesomeIcon icon={faLink} className="w-4 h-4" />
</button> </button>
<button type="button" disabled={disabled} <button type="button" disabled={disabled}
onClick={() => execBlock("h2")} title="Heading" onClick={() => execBlock("h2")} title="Heading"
className="text-gb-fg-f hover:text-gb-orange p-1 disabled:opacity-50"> className="text-gb-fg-f hover:text-gb-orange p-1.5 disabled:opacity-50">
<FontAwesomeIcon icon={faHeading} className="w-3 h-3" /> <FontAwesomeIcon icon={faHeading} className="w-4 h-4" />
</button> </button>
<span className="text-gb-bg-t mx-1">│</span> <span className="text-gb-bg-t mx-1">│</span>
@@ -648,43 +648,43 @@ export const MessageInput = forwardRef<HTMLTextAreaElement, MessageInputProps>(f
{/* inline formatting */} {/* inline formatting */}
<button type="button" disabled={disabled} <button type="button" disabled={disabled}
onClick={() => execInline("**", "**")} title="Bold" onClick={() => execInline("**", "**")} title="Bold"
className="text-gb-fg-f hover:text-gb-orange p-1 disabled:opacity-50"> className="text-gb-fg-f hover:text-gb-orange p-1.5 disabled:opacity-50">
<FontAwesomeIcon icon={faBold} className="w-3 h-3" /> <FontAwesomeIcon icon={faBold} className="w-4 h-4" />
</button> </button>
<button type="button" disabled={disabled} <button type="button" disabled={disabled}
onClick={() => execInline("*", "*")} title="Italic" onClick={() => execInline("*", "*")} title="Italic"
className="text-gb-fg-f hover:text-gb-orange p-1 disabled:opacity-50"> className="text-gb-fg-f hover:text-gb-orange p-1.5 disabled:opacity-50">
<FontAwesomeIcon icon={faItalic} className="w-3 h-3" /> <FontAwesomeIcon icon={faItalic} className="w-4 h-4" />
</button> </button>
<button type="button" disabled={disabled} <button type="button" disabled={disabled}
onClick={() => execInline("~~", "~~")} title="Strikethrough" onClick={() => execInline("~~", "~~")} title="Strikethrough"
className="text-gb-fg-f hover:text-gb-orange p-1 disabled:opacity-50"> className="text-gb-fg-f hover:text-gb-orange p-1.5 disabled:opacity-50">
<FontAwesomeIcon icon={faStrikethrough} className="w-3 h-3" /> <FontAwesomeIcon icon={faStrikethrough} className="w-4 h-4" />
</button> </button>
<button type="button" disabled={disabled} <button type="button" disabled={disabled}
onClick={() => execInline("`", "`")} title="Code" onClick={() => execInline("`", "`")} title="Code"
className="text-gb-fg-f hover:text-gb-orange p-1 disabled:opacity-50"> className="text-gb-fg-f hover:text-gb-orange p-1.5 disabled:opacity-50">
<FontAwesomeIcon icon={faCode} className="w-3 h-3" /> <FontAwesomeIcon icon={faCode} className="w-4 h-4" />
</button> </button>
<button type="button" disabled={disabled} <button type="button" disabled={disabled}
onClick={() => execInline("||", "||")} title="Spoiler" onClick={() => execInline("||", "||")} title="Spoiler"
className="text-gb-fg-f hover:text-gb-orange p-1 disabled:opacity-50"> className="text-gb-fg-f hover:text-gb-orange p-1.5 disabled:opacity-50">
<FontAwesomeIcon icon={faEyeSlash} className="w-3 h-3" /> <FontAwesomeIcon icon={faEyeSlash} className="w-4 h-4" />
</button> </button>
<span className="text-gb-bg-t mx-1">│</span> <span className="text-gb-bg-t mx-1">│</span>
{/* emoji / kaomoji / gif */} {/* emoji / kaomoji / gif */}
<button type="button" disabled={disabled} onClick={toggleEmoji} title="Emoji" <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" /> <FontAwesomeIcon icon={faSmile} className="w-4 h-4" />
</button> </button>
<button type="button" disabled={disabled} onClick={toggleKaomoji} title="Kaomoji" <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" /> <FontAwesomeIcon icon={faGrin} className="w-4 h-4" />
</button> </button>
<button type="button" disabled={disabled} onClick={toggleGif} title="GIF" <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" /> <FontAwesomeIcon icon={faFilm} className="w-4 h-4" />
</button> </button>
web/src/main.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ if (isTauri) {
// WebView safe-area fallbacks: Android doesn't support CSS env(), and // WebView safe-area fallbacks: Android doesn't support CSS env(), and
// Linux WebKitGTK chokes on env() inside var(). Set explicit values via JS. // Linux WebKitGTK chokes on env() inside var(). Set explicit values via JS.
if (navigator.userAgent.includes('Android')) { 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-bottom', '0.75rem');
document.documentElement.style.setProperty('--safe-left', '0px'); document.documentElement.style.setProperty('--safe-left', '0px');
document.documentElement.style.setProperty('--safe-right', '0px'); document.documentElement.style.setProperty('--safe-right', '0px');