From 5d2cc354f3f64b22eb55c4af71f5d7582ca3dcad Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Wed, 30 Oct 2024 23:04:30 +0200
Subject: [PATCH] web/composer: fix autocomplete not overflowing

---
 web/src/ui/RoomView.css                 |  1 +
 web/src/ui/composer/Autocompleter.css   |  3 +-
 web/src/ui/composer/MessageComposer.css |  1 +
 web/src/ui/composer/MessageComposer.tsx | 86 +++++++++++++------------
 4 files changed, 48 insertions(+), 43 deletions(-)

diff --git a/web/src/ui/RoomView.css b/web/src/ui/RoomView.css
index 8ed804f..9c33e0b 100644
--- a/web/src/ui/RoomView.css
+++ b/web/src/ui/RoomView.css
@@ -7,6 +7,7 @@ div.room-view {
 	grid-template:
 		"header" 3rem
 		"messageview" 1fr
+		"autocomplete" 0
 		"input" auto
 		/ 1fr;
 }
diff --git a/web/src/ui/composer/Autocompleter.css b/web/src/ui/composer/Autocompleter.css
index 0cc0411..391adb3 100644
--- a/web/src/ui/composer/Autocompleter.css
+++ b/web/src/ui/composer/Autocompleter.css
@@ -1,10 +1,11 @@
 div.autocompletions-wrapper {
 	position: relative;
+	grid-area: autocomplete;
 }
 
 div.autocompletions {
 	position: absolute;
-	bottom: 1px;
+	bottom: 0;
 	border-top: 1px solid var(--border-color);
 	border-right: 1px solid var(--border-color);
 	background-color: var(--background-color);
diff --git a/web/src/ui/composer/MessageComposer.css b/web/src/ui/composer/MessageComposer.css
index 752cec5..92bf90d 100644
--- a/web/src/ui/composer/MessageComposer.css
+++ b/web/src/ui/composer/MessageComposer.css
@@ -1,6 +1,7 @@
 div.message-composer {
 	border-top: 1px solid var(--border-color);
 	overflow: hidden;
+	grid-area: input;
 
 	blockquote.reply-body {
 		pre, a.hicli-matrix-uri {
diff --git a/web/src/ui/composer/MessageComposer.tsx b/web/src/ui/composer/MessageComposer.tsx
index 4a886da..9ab9f6e 100644
--- a/web/src/ui/composer/MessageComposer.tsx
+++ b/web/src/ui/composer/MessageComposer.tsx
@@ -355,7 +355,7 @@ const MessageComposer = () => {
 		})
 	})
 	const Autocompleter = getAutocompleter(autocomplete)
-	return <div className="message-composer" ref={composerRef}>
+	return <>
 		{Autocompleter && autocomplete && <div className="autocompletions-wrapper"><Autocompleter
 			params={autocomplete}
 			room={room}
@@ -363,48 +363,50 @@ const MessageComposer = () => {
 			setState={setState}
 			setAutocomplete={setAutocomplete}
 		/></div>}
-		{replyToEvt && <ReplyBody
-			room={room}
-			event={replyToEvt}
-			onClose={closeReply}
-			isThread={replyToEvt.content?.["m.relates_to"]?.rel_type === "m.thread"}
-		/>}
-		{editing && <ReplyBody
-			room={room}
-			event={editing}
-			isEditing={true}
-			isThread={false}
-			onClose={stopEditing}
-		/>}
-		{loadingMedia && <div className="composer-media"><ScaleLoader/></div>}
-		{state.media && <ComposerMedia content={state.media} clearMedia={clearMedia}/>}
-		<div className="input-area">
-			<textarea
-				autoFocus={!isMobileDevice}
-				ref={textInput}
-				rows={textRows.current}
-				value={state.text}
-				onKeyDown={onComposerKeyDown}
-				onKeyUp={onComposerCaretChange}
-				onClick={onComposerCaretChange}
-				onPaste={onPaste}
-				onChange={onChange}
-				placeholder="Send a message"
-				id="message-composer"
-			/>
-			<button onClick={openEmojiPicker}><EmojiIcon/></button>
-			<button
-				onClick={openFilePicker}
-				disabled={!!state.media || loadingMedia}
-				title={state.media ? "You can only attach one file at a time" : ""}
-			><AttachIcon/></button>
-			<button
-				onClick={sendMessage}
-				disabled={(!state.text && !state.media) || loadingMedia}
-			><SendIcon/></button>
-			<input ref={fileInput} onChange={onAttachFile} type="file" value="" style={{ display: "none" }}/>
+		<div className="message-composer" ref={composerRef}>
+			{replyToEvt && <ReplyBody
+				room={room}
+				event={replyToEvt}
+				onClose={closeReply}
+				isThread={replyToEvt.content?.["m.relates_to"]?.rel_type === "m.thread"}
+			/>}
+			{editing && <ReplyBody
+				room={room}
+				event={editing}
+				isEditing={true}
+				isThread={false}
+				onClose={stopEditing}
+			/>}
+			{loadingMedia && <div className="composer-media"><ScaleLoader/></div>}
+			{state.media && <ComposerMedia content={state.media} clearMedia={clearMedia}/>}
+			<div className="input-area">
+				<textarea
+					autoFocus={!isMobileDevice}
+					ref={textInput}
+					rows={textRows.current}
+					value={state.text}
+					onKeyDown={onComposerKeyDown}
+					onKeyUp={onComposerCaretChange}
+					onClick={onComposerCaretChange}
+					onPaste={onPaste}
+					onChange={onChange}
+					placeholder="Send a message"
+					id="message-composer"
+				/>
+				<button onClick={openEmojiPicker}><EmojiIcon/></button>
+				<button
+					onClick={openFilePicker}
+					disabled={!!state.media || loadingMedia}
+					title={state.media ? "You can only attach one file at a time" : ""}
+				><AttachIcon/></button>
+				<button
+					onClick={sendMessage}
+					disabled={(!state.text && !state.media) || loadingMedia}
+				><SendIcon/></button>
+				<input ref={fileInput} onChange={onAttachFile} type="file" value="" style={{ display: "none" }}/>
+			</div>
 		</div>
-	</div>
+	</>
 }
 
 interface ComposerMediaProps {