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,6 +124,8 @@ export const EmojiPicker = ({ style, selected, onSelect, room, allowFreeform, cl
 			</button>
 		</div>
 		<div className="emoji-list">
+			{/* 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
@@ -146,6 +148,7 @@ export const EmojiPicker = ({ style, selected, onSelect, room, allowFreeform, cl
 					onClick={onClickFreeformReact}
 				>React with "{query}"</button>}
 			</div>
+		</div>
 		{previewEmoji ? <div className="emoji-preview">
 			<div className="big-emoji">{renderEmoji(previewEmoji)}</div>
 			<div className="emoji-name">{previewEmoji.t}</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 {