From 2a89f10589e2ac46995634c8721cd1e37c99897b Mon Sep 17 00:00:00 2001
From: Tulir Asokan <tulir@maunium.net>
Date: Sat, 2 Nov 2024 00:16:51 +0200
Subject: [PATCH] web/css: work around chrome issues and add contain rules

---
 web/src/index.css                      |  1 +
 web/src/ui/emojipicker/EmojiPicker.css |  2 +-
 web/src/ui/emojipicker/EmojiPicker.tsx | 45 ++++++++++++++------------
 web/src/ui/roomlist/RoomList.css       |  2 ++
 web/src/ui/roomview/RoomView.css       |  1 +
 web/src/ui/timeline/TimelineEvent.css  |  2 ++
 6 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/web/src/index.css b/web/src/index.css
index 623609e..468b7b4 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -147,6 +147,7 @@ pre, code {
 input, textarea {
 	color: inherit;
 	background-color: inherit;
+	font-size: 1em;
 }
 
 button, a.button {
diff --git a/web/src/ui/emojipicker/EmojiPicker.css b/web/src/ui/emojipicker/EmojiPicker.css
index 0ee0c5c..7e343c3 100644
--- a/web/src/ui/emojipicker/EmojiPicker.css
+++ b/web/src/ui/emojipicker/EmojiPicker.css
@@ -58,7 +58,7 @@ div.emoji-picker {
 	}
 
 	div.emoji-list {
-		overflow: scroll;
+		overflow-y: auto;
 		padding: 0 1rem;
 		flex: 1;
 		display: flex;
diff --git a/web/src/ui/emojipicker/EmojiPicker.tsx b/web/src/ui/emojipicker/EmojiPicker.tsx
index 6334c44..204a97d 100644
--- a/web/src/ui/emojipicker/EmojiPicker.tsx
+++ b/web/src/ui/emojipicker/EmojiPicker.tsx
@@ -124,27 +124,30 @@ export const EmojiPicker = ({ style, selected, onSelect, room, allowFreeform, cl
 			</button>
 		</div>
 		<div className="emoji-list">
-			{emojis.map(group => {
-				if (!group?.length) {
-					return null
-				}
-				const categoryID = group[0].c
-				const customPack = customEmojiPacks.find(pack => pack.id === categoryID)
-				return <EmojiGroup
-					key={categoryID}
-					emojis={group}
-					categoryID={categoryID}
-					selected={selected}
-					pack={customPack}
-					isWatched={typeof categoryID === "string" && watchedEmojiPackKeys.includes(categoryID)}
-					onSelect={onSelectWrapped}
-					setPreviewEmoji={setPreviewEmoji}
-				/>
-			})}
-			{allowFreeform && query && <button
-				className="freeform-react"
-				onClick={onClickFreeformReact}
-			>React with "{query}"</button>}
+			{/* Chrome is dumb and doesn't allow scrolling without an inner div */}
+			<div className="emoji-list-inner">
+				{emojis.map(group => {
+					if (!group?.length) {
+						return null
+					}
+					const categoryID = group[0].c
+					const customPack = customEmojiPacks.find(pack => pack.id === categoryID)
+					return <EmojiGroup
+						key={categoryID}
+						emojis={group}
+						categoryID={categoryID}
+						selected={selected}
+						pack={customPack}
+						isWatched={typeof categoryID === "string" && watchedEmojiPackKeys.includes(categoryID)}
+						onSelect={onSelectWrapped}
+						setPreviewEmoji={setPreviewEmoji}
+					/>
+				})}
+				{allowFreeform && query && <button
+					className="freeform-react"
+					onClick={onClickFreeformReact}
+				>React with "{query}"</button>}
+			</div>
 		</div>
 		{previewEmoji ? <div className="emoji-preview">
 			<div className="big-emoji">{renderEmoji(previewEmoji)}</div>
diff --git a/web/src/ui/roomlist/RoomList.css b/web/src/ui/roomlist/RoomList.css
index 117be48..408a18b 100644
--- a/web/src/ui/roomlist/RoomList.css
+++ b/web/src/ui/roomlist/RoomList.css
@@ -1,4 +1,5 @@
 div.room-list-wrapper {
+	contain: strict;
 	grid-area: roomlist;
 	background: var(--room-list-background);
 	box-sizing: border-box;
@@ -32,6 +33,7 @@ div.room-entry {
 	height: 3rem;
 	contain-intrinsic-height: 3rem;
 	content-visibility: auto;
+	contain: strict;
 
 	&:hover, &:focus {
 		background-color: var(--room-list-entry-hover-color);
diff --git a/web/src/ui/roomview/RoomView.css b/web/src/ui/roomview/RoomView.css
index 9c33e0b..0283d40 100644
--- a/web/src/ui/roomview/RoomView.css
+++ b/web/src/ui/roomview/RoomView.css
@@ -10,4 +10,5 @@ div.room-view {
 		"autocomplete" 0
 		"input" auto
 		/ 1fr;
+	contain: strict;
 }
diff --git a/web/src/ui/timeline/TimelineEvent.css b/web/src/ui/timeline/TimelineEvent.css
index c9278da..b16cefb 100644
--- a/web/src/ui/timeline/TimelineEvent.css
+++ b/web/src/ui/timeline/TimelineEvent.css
@@ -8,6 +8,7 @@ div.timeline-event {
 		"avatar gap sender  sender" auto
 		"avatar gap content status" auto
 		/ 2.5rem .5rem 1fr 2rem;
+	contain: layout;
 
 	&.highlight {
 		background-color: var(--timeline-highlight-bg-color);
@@ -73,6 +74,7 @@ div.timeline-event {
 		grid-area: content;
 		overflow: hidden;
 		overflow-wrap: anywhere;
+		contain: content;
 	}
 
 	> div.event-send-status {