Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-20 10:33:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

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

Browse source
This commit is contained in:
Tulir Asokan 2024-11-02 00:16:51 +02:00
parent f6b0b12a5b
commit 2a89f10589
6 changed files with 31 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
web/src/index.css
View file

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

2
web/src/ui/emojipicker/EmojiPicker.css
View file

@ -58,7 +58,7 @@ div.emoji-picker {
} }
div.emoji-list { div.emoji-list {
overflow: scroll; overflow-y: auto;
padding: 0 1rem; padding: 0 1rem;
flex: 1; flex: 1;
display: flex; display: flex;

3
web/src/ui/emojipicker/EmojiPicker.tsx
View file

@ -124,6 +124,8 @@ export const EmojiPicker = ({ style, selected, onSelect, room, allowFreeform, cl
</button> </button>
</div> </div>
<div className="emoji-list"> <div className="emoji-list">
{/* Chrome is dumb and doesn't allow scrolling without an inner div */}
<div className="emoji-list-inner">
{emojis.map(group => { {emojis.map(group => {
if (!group?.length) { if (!group?.length) {
return null return null
@ -146,6 +148,7 @@ export const EmojiPicker = ({ style, selected, onSelect, room, allowFreeform, cl
onClick={onClickFreeformReact} onClick={onClickFreeformReact}
>React with "{query}"</button>} >React with "{query}"</button>}
</div> </div>
</div>
{previewEmoji ? <div className="emoji-preview"> {previewEmoji ? <div className="emoji-preview">
<div className="big-emoji">{renderEmoji(previewEmoji)}</div> <div className="big-emoji">{renderEmoji(previewEmoji)}</div>
<div className="emoji-name">{previewEmoji.t}</div> <div className="emoji-name">{previewEmoji.t}</div>

2
web/src/ui/roomlist/RoomList.css
View file

@ -1,4 +1,5 @@
div.room-list-wrapper { div.room-list-wrapper {
contain: strict;
grid-area: roomlist; grid-area: roomlist;
background: var(--room-list-background); background: var(--room-list-background);
box-sizing: border-box; box-sizing: border-box;
@ -32,6 +33,7 @@ div.room-entry {
height: 3rem; height: 3rem;
contain-intrinsic-height: 3rem; contain-intrinsic-height: 3rem;
content-visibility: auto; content-visibility: auto;
contain: strict;
&:hover, &:focus { &:hover, &:focus {
background-color: var(--room-list-entry-hover-color); background-color: var(--room-list-entry-hover-color);

1
web/src/ui/roomview/RoomView.css
View file

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

2
web/src/ui/timeline/TimelineEvent.css
View file

@ -8,6 +8,7 @@ div.timeline-event {
"avatar gap sender sender" auto "avatar gap sender sender" auto
"avatar gap content status" auto "avatar gap content status" auto
/ 2.5rem .5rem 1fr 2rem; / 2.5rem .5rem 1fr 2rem;
contain: layout;
&.highlight { &.highlight {
background-color: var(--timeline-highlight-bg-color); background-color: var(--timeline-highlight-bg-color);
@ -73,6 +74,7 @@ div.timeline-event {
grid-area: content; grid-area: content;
overflow: hidden; overflow: hidden;
overflow-wrap: anywhere; overflow-wrap: anywhere;
contain: content;
} }
> div.event-send-status { > div.event-send-status {