fix(app): restore mobile channel list scrolling (#1558)

This commit is contained in:
Hampus authored and GitHub committed 2026-08-11 17:06:09 +02:00
1 parent 0b08e1de2c
commit 1907860b26
56 files changed
+206 -188

No files matched your search

@@ -68,8 +68,8 @@
}
.layer.layerFullscreenMobile {
--fullscreen-pad-y: 0;
--fullscreen-pad-x: 0;
--fullscreen-pad-y: 0px;
--fullscreen-pad-x: 0px;
padding: 0 !important;
}
@@ -109,8 +109,8 @@
}
.layer.layerCentered {
padding: calc(1.5rem + env(safe-area-inset-top, 0)) calc(1rem + env(safe-area-inset-right, 0))
calc(1.5rem + env(safe-area-inset-bottom, 0)) calc(1rem + env(safe-area-inset-left, 0));
padding: calc(1.5rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px))
calc(1.5rem + env(safe-area-inset-bottom, 0px)) calc(1rem + env(safe-area-inset-left, 0px));
}
.root.centeredOnMobile {
@@ -417,8 +417,8 @@
.insetCloseButtonContainer {
position: absolute;
top: calc(0.75rem + env(safe-area-inset-top, 0));
right: calc(0.75rem + env(safe-area-inset-right, 0));
top: calc(0.75rem + env(safe-area-inset-top, 0px));
right: calc(0.75rem + env(safe-area-inset-right, 0px));
z-index: 10;
pointer-events: auto;
}
@@ -615,8 +615,8 @@
content: '';
position: absolute;
left: 0;
top: var(--active-top, 0);
height: var(--active-height, 0);
top: var(--active-top, 0px);
height: var(--active-height, 0px);
width: var(--settings-sidebar-subtree-line-width);
background: var(--settings-sidebar-highlight);
border-radius: 999px;
@@ -228,7 +228,7 @@
.mobileContainer {
min-height: 100dvh;
background-color: var(--background-secondary);
padding: calc(2rem + env(safe-area-inset-top, 0)) 1.5rem calc(2.5rem + env(safe-area-inset-bottom, 0));
padding: calc(2rem + env(safe-area-inset-top, 0px)) 1.5rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
@@ -71,9 +71,9 @@
.typingAvatars {
height: 1.25rem;
--avatar-stack-padding-block-start: 0;
--avatar-stack-padding-block-end: 0;
--avatar-stack-extra-height: 0;
--avatar-stack-padding-block-start: 0px;
--avatar-stack-padding-block-end: 0px;
--avatar-stack-extra-height: 0px;
--avatar-stack-outline-color: var(--background-secondary);
}
@@ -55,6 +55,6 @@
}
.bottomSpacer {
height: calc(var(--layout-user-area-overlay-height, var(--layout-user-area-reserved-height, 0)) + var(--spacing-2));
height: calc(var(--layout-user-area-overlay-height, var(--layout-user-area-reserved-height, 0px)) + var(--spacing-2));
flex: 0 0 auto;
}
@@ -1,10 +1,17 @@
/* SPDX-License-Identifier: AGPL-3.0-or-later */
.guildNavbarContainer {
--scroller-track-block-end-inset: var(--layout-user-area-overlay-height, var(--layout-user-area-reserved-height, 0));
--scroller-track-block-end-inset: var(
--layout-user-area-overlay-height,
var(--layout-user-area-reserved-height, 0px)
);
display: grid;
grid-template-rows: auto 1fr;
height: calc(100% - var(--layout-user-area-reserved-height, 0) - var(--layout-mobile-bottom-nav-reserved-height, 0));
height: calc(
100% -
var(--layout-user-area-reserved-height, 0px) -
var(--layout-mobile-bottom-nav-reserved-height, 0px)
);
min-height: 0;
width: var(--layout-sidebar-width);
min-width: 0;
@@ -3,7 +3,7 @@
.skeletonContainer {
display: grid;
grid-template-rows: auto 1fr;
height: calc(100% - var(--layout-user-area-reserved-height, 0));
height: calc(100% - var(--layout-user-area-reserved-height, 0px));
min-height: 0;
width: var(--layout-sidebar-width);
min-width: 0;
@@ -1,9 +1,9 @@
/* SPDX-License-Identifier: AGPL-3.0-or-later */
.guildsLayoutContainer {
--layout-user-area-overlay-height: 0;
--layout-user-area-reserved-height: 0;
--layout-mobile-bottom-nav-reserved-height: 0;
--layout-user-area-overlay-height: 0px;
--layout-user-area-reserved-height: 0px;
--layout-mobile-bottom-nav-reserved-height: 0px;
position: relative;
display: grid;
grid-template-columns: var(--layout-guild-list-width) minmax(0, 1fr);
@@ -19,7 +19,7 @@
}
.guildsLayoutReserveSpace {
--layout-user-area-overlay-height: calc(var(--layout-user-area-height) + var(--layout-voice-connection-height, 0));
--layout-user-area-overlay-height: calc(var(--layout-user-area-height) + var(--layout-voice-connection-height, 0px));
}
.guildsLayoutReserveMobileBottomNav {
@@ -38,11 +38,18 @@
}
.guildListScrollerWrapper {
--scroller-track-block-end-inset: var(--layout-user-area-overlay-height, var(--layout-user-area-reserved-height, 0));
--scroller-track-block-end-inset: var(
--layout-user-area-overlay-height,
var(--layout-user-area-reserved-height, 0px)
);
grid-column: 1;
grid-row: 1;
min-height: 0;
height: calc(100% - var(--layout-user-area-reserved-height, 0) - var(--layout-mobile-bottom-nav-reserved-height, 0));
height: calc(
100% -
var(--layout-user-area-reserved-height, 0px) -
var(--layout-mobile-bottom-nav-reserved-height, 0px)
);
width: var(--layout-guild-list-width);
min-width: 0;
background-color: var(--background-secondary);
@@ -72,7 +79,7 @@
width: 100%;
min-width: 0;
padding-bottom: calc(
var(--layout-user-area-overlay-height, var(--layout-user-area-reserved-height, 0)) +
var(--layout-user-area-overlay-height, var(--layout-user-area-reserved-height, 0px)) +
var(--spacing-2)
);
}
@@ -212,7 +219,7 @@
color 70ms ease-out;
container-type: size;
--initials-font-size: clamp(0.85rem, 45cqi, 1.35rem);
--initials-letter-spacing: 0;
--initials-letter-spacing: 0px;
--initials-scale: 1;
}
@@ -273,13 +280,13 @@
.guildIcon[data-initials-length='medium'] .guildIconInitials {
--initials-font-size: clamp(0.85rem, 38cqi, 1.11rem);
--initials-letter-spacing: 0;
--initials-letter-spacing: 0px;
--initials-scale: 0.92;
}
.guildIcon[data-initials-length='long'] .guildIconInitials {
--initials-font-size: clamp(0.85rem, 32cqi, 0.87rem);
--initials-letter-spacing: 0;
--initials-letter-spacing: 0px;
--initials-scale: 0.78;
}
@@ -566,7 +573,7 @@
}
.outlineFrame {
--outline-radius: 0;
--outline-radius: 0px;
}
.outlineFrameFullscreen {
@@ -6,7 +6,7 @@
width: 100%;
border: 0.0625rem solid var(--user-area-divider-color);
border-top: none;
border-top-left-radius: var(--outline-radius, 0);
border-top-left-radius: var(--outline-radius, 0px);
background: var(--background-secondary-lighter);
overflow: hidden;
display: flex;
@@ -41,7 +41,7 @@
.actionButton {
composes: item textItem from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
--action-toolbar-item-border-width: 0;
--action-toolbar-item-border-width: 0px;
--action-toolbar-item-radius: 0.25rem;
--action-toolbar-item-background: var(--background-primary);
--action-toolbar-item-color: var(--text-primary-muted);
@@ -54,7 +54,7 @@
.actionIconButton {
composes: item from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
--action-toolbar-item-size: 1.5rem;
--action-toolbar-item-border-width: 0;
--action-toolbar-item-border-width: 0px;
--action-toolbar-item-radius: 0.25rem;
--action-toolbar-item-background: var(--background-primary);
--action-toolbar-item-color: var(--text-primary-muted);