web/css: work around chrome issues and add contain rules

web/src/index.css

@@ -147,6 +147,7 @@ pre, code {
 input, textarea {
 	color: inherit;
 	background-color: inherit;
+	font-size: 1em;
 }
 
 button, a.button {

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;

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>

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);

web/src/ui/roomview/RoomView.css

@@ -10,4 +10,5 @@ div.room-view {
 		"autocomplete" 0
 		"input" auto
 		/ 1fr;
+	contain: strict;
 }

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 {