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
- {emojis.map(group => {
- if (!group?.length) {
- return null
- }
- const categoryID = group[0].c
- const customPack = customEmojiPacks.find(pack => pack.id === categoryID)
- return
- })}
- {allowFreeform && query &&
}
+ {/* Chrome is dumb and doesn't allow scrolling without an inner div */}
+
+ {emojis.map(group => {
+ if (!group?.length) {
+ return null
+ }
+ const categoryID = group[0].c
+ const customPack = customEmojiPacks.find(pack => pack.id === categoryID)
+ return
+ })}
+ {allowFreeform && query && }
+
{previewEmoji ?
{renderEmoji(previewEmoji)}
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 {