diff --git a/frontend/src/components/ChannelView.svelte b/frontend/src/components/ChannelView.svelte index a5b4883..9874632 100644 --- a/frontend/src/components/ChannelView.svelte +++ b/frontend/src/components/ChannelView.svelte @@ -17,6 +17,7 @@ flex-direction: column; width: 100%; height: 100%; + contain: content; } diff --git a/frontend/src/components/MessageInput.svelte b/frontend/src/components/MessageInput.svelte index fc79a04..92d04f7 100644 --- a/frontend/src/components/MessageInput.svelte +++ b/frontend/src/components/MessageInput.svelte @@ -96,6 +96,7 @@ width: 100%; padding: var(--space-norm); padding-bottom: 0; + contain: content; } .message-input-container.small { @@ -118,6 +119,7 @@ font-size: inherit; line-height: inherit; resize: none; + contain: strict; } .message-input:focus-visible { diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css index 7afa317..dba748c 100644 --- a/frontend/src/styles/global.css +++ b/frontend/src/styles/global.css @@ -8,6 +8,7 @@ font-stretch: normal; font-style: normal; src: url("/assets/woff2/iosevka-waffle-regular.woff2") format("woff2"); + font-display: fallback; } @font-face { @@ -17,6 +18,7 @@ font-stretch: normal; font-style: normal; src: url("/assets/woff2/iosevka-waffle-bold.woff2") format("woff2"); + font-display: fallback; } @font-face { @@ -26,6 +28,7 @@ font-stretch: normal; font-style: normal; src: url("/assets/woff2/iosevka-waffle-light.woff2") format("woff2"); + font-display: fallback; } /* top-level */ @@ -183,11 +186,13 @@ body { z-index: 15; background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(1.5px); + contain: strict; } .modal-backdrop-opaque { background-color: var(--background-color-1); backdrop-filter: unset; + contain: strict; } .modal { @@ -195,6 +200,7 @@ body { flex-direction: column; background-color: var(--background-color-1); border-radius: var(--radius-lg); + contain: content; } .modal-header { @@ -417,6 +423,7 @@ body { height: 100%; min-width: 255px; max-width: 255px; + contain: content; } @media screen and (max-width: 768px) { @@ -433,6 +440,7 @@ body { padding: var(--space-xs); overflow-x: hidden; overflow-y: auto; + contain: strict; } .sidebar-button {