web/emojipicker: mobile optimize emoji and gif pickers

web/src/ui/composer/MessageComposer.tsx

@@ -27,6 +27,7 @@ import type {
 	RoomID,
 } from "@/api/types"
 import { PartialEmoji, emojiToMarkdown } from "@/util/emoji"
+import { isMobileDevice } from "@/util/ismobile.ts"
 import { escapeMarkdown } from "@/util/markdown.ts"
 import useEvent from "@/util/useEvent.ts"
 import ClientContext from "../ClientContext.ts"
@@ -62,7 +63,6 @@ export interface ComposerState {
 	uninited?: boolean
 }
 
-const isMobileDevice = window.ontouchstart !== undefined && window.innerWidth < 800
 const MAX_TEXTAREA_ROWS = 10
 
 const emptyComposer: ComposerState = { text: "", media: null, replyTo: null, location: null }

web/src/ui/emojipicker/EmojiPicker.css

@@ -199,3 +199,28 @@ div.emoji-picker {
 		margin-bottom: .25rem;
 	}
 }
+
+@media screen and (max-width: 37.5rem) {
+	div.emoji-picker, div.gif-picker {
+		inset: 0 0 40px 0 !important;
+		width: 100%;
+		height: calc(100% - 40px);
+		border-radius: 0;
+	}
+
+	div.gif-picker > div.gif-list > div.gif-entry {
+		max-width: 33%;
+	}
+}
+
+@media screen and (max-width: 30rem) {
+	div.gif-picker > div.gif-list > div.gif-entry {
+		max-width: 50%;
+	}
+}
+
+@media screen and (max-width: 20rem) {
+	div.gif-picker > div.gif-list > div.gif-entry {
+		max-width: 100%;
+	}
+}

web/src/ui/emojipicker/EmojiPicker.tsx

@@ -18,6 +18,7 @@ import { getMediaURL } from "@/api/media.ts"
 import { RoomStateStore, useCustomEmojis } from "@/api/statestore"
 import { roomStateGUIDToString } from "@/api/types"
 import { CATEGORY_FREQUENTLY_USED, Emoji, PartialEmoji, categories, useFilteredEmojis } from "@/util/emoji"
+import { isMobileDevice } from "@/util/ismobile.ts"
 import useEvent from "@/util/useEvent.ts"
 import ClientContext from "../ClientContext.ts"
 import { ModalCloseContext } from "../modal/Modal.tsx"
@@ -118,7 +119,13 @@ const EmojiPicker = ({ style, selected, onSelect, room, allowFreeform, closeOnSe
 			)}
 		</div>
 		<div className="emoji-search">
-			<input autoFocus onChange={onChangeQuery} value={query} type="search" placeholder="Search emojis"/>
+			<input
+				autoFocus={!isMobileDevice}
+				onChange={onChangeQuery}
+				value={query}
+				type="search"
+				placeholder="Search emojis"
+			/>
 			<button onClick={clearQuery} disabled={query === ""}>
 				{query !== "" ? <CloseIcon/> : <SearchIcon/>}
 			</button>

web/src/ui/emojipicker/GIFPicker.tsx

@@ -16,6 +16,7 @@
 import React, { CSSProperties, use, useCallback, useEffect, useState } from "react"
 import { RoomStateStore, usePreference } from "@/api/statestore"
 import { MediaMessageEventContent } from "@/api/types"
+import { isMobileDevice } from "@/util/ismobile.ts"
 import ClientContext from "../ClientContext.ts"
 import { ModalCloseContext } from "../modal/Modal.tsx"
 import { GIF, getTrendingGIFs, searchGIF } from "./gifsource.ts"
@@ -104,7 +105,7 @@ const GIFPicker = ({ style, onSelect, room }: GIFPickerProps) => {
 	return <div className="gif-picker" style={style}>
 		<div className="gif-search">
 			<input
-				autoFocus
+				autoFocus={!isMobileDevice}
 				onChange={onChangeQuery}
 				value={query}
 				type="search"

web/src/util/ismobile.ts

@@ -0,0 +1,16 @@
+// gomuks - A Matrix client written in Go.
+// Copyright (C) 2024 Tulir Asokan
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+export const isMobileDevice = window.ontouchstart !== undefined && window.innerWidth < 800