fix(android): bump safe-top to 2rem, enlarge toolbar icons, fix login spacing
- --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:
@@ -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>
|
||||
|
||||
|
||||
+1
-1
@@ -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');
|
||||
|
||||
Reference in New Issue
Block a user