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

fluxer_app/src/features/channel/components/MessageActionBottomSheet.module.css

@@ -16,7 +16,7 @@
 .quickReactionButton {
 	composes: item roundItem from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
 	--action-toolbar-item-size: 2.75rem;
-	--action-toolbar-item-border-width: 0;
+	--action-toolbar-item-border-width: 0px;
 	--action-toolbar-item-background: var(--background-modifier-hover);
 }
 

fluxer_app/src/features/channel/components/MobileEmojiPicker.module.css

@@ -66,5 +66,5 @@
 	align-items: center;
 	justify-content: flex-start;
 	min-width: max-content;
-	padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0)) 0.5rem;
+	padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px)) 0.5rem;
 }

fluxer_app/src/features/channel/components/QuickReactionsRow.module.css

@@ -9,7 +9,7 @@
 
 .button {
 	composes: item fluidItem 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.5rem;
 	--action-toolbar-item-background: var(--background-modifier-hover);
 	flex: 1;

fluxer_app/src/features/channel/components/VoiceMessageRecorder.module.css

@@ -27,7 +27,7 @@
 	bottom: 0;
 	z-index: 2000;
 	background-color: var(--brand-primary);
-	padding-bottom: env(safe-area-inset-bottom, 0);
+	padding-bottom: env(safe-area-inset-bottom, 0px);
 	box-shadow: 0 -0.5rem 1.25rem rgba(0, 0, 0, 0.25);
 	box-sizing: border-box;
 }

fluxer_app/src/features/channel/components/bottomsheets/ChannelDetailsBottomSheet.module.css

@@ -842,7 +842,7 @@
 	justify-content: flex-end;
 	gap: 0.5rem;
 	padding: 1rem;
-	padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
+	padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
 	border-top: 0.0625rem solid var(--border-color);
 }
 

fluxer_app/src/features/channel/components/bottomsheets/CreateDMBottomSheet.module.css

@@ -18,7 +18,7 @@
 	flex-direction: column;
 	gap: 1rem;
 	padding: 1rem;
-	padding-bottom: var(--create-dm-scroll-padding-bottom, calc(1rem + env(safe-area-inset-bottom, 0)));
+	padding-bottom: var(--create-dm-scroll-padding-bottom, calc(1rem + env(safe-area-inset-bottom, 0px)));
 }
 
 .description {
@@ -38,7 +38,7 @@
 	justify-content: flex-end;
 	gap: 0.5rem;
 	padding: 1rem;
-	padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
+	padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
 	border-top: 0.0625rem solid var(--border-color);
 }
 

fluxer_app/src/features/channel/components/direct_message/DMChannelView.module.css

@@ -170,14 +170,14 @@
 }
 
 .callBannerResizable .callControlBarSection {
-	padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0));
+	padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
 }
 
 .callControlBarSection {
 	position: relative;
 	display: flex;
 	justify-content: center;
-	padding: 0 1rem calc(0.875rem + env(safe-area-inset-bottom, 0));
+	padding: 0 1rem calc(0.875rem + env(safe-area-inset-bottom, 0px));
 	z-index: 2;
 	pointer-events: none;
 }

fluxer_app/src/features/channel/components/direct_message/DirectMessageList.module.css

@@ -1,10 +1,13 @@
 /* SPDX-License-Identifier: AGPL-3.0-or-later */
 
 .dmListContainer {
-	--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 auto;
-	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;
@@ -210,7 +213,7 @@
 .mobileFab {
 	position: fixed;
 	right: 1rem;
-	bottom: calc(3.75rem + env(safe-area-inset-bottom, 0) + 1rem);
+	bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px) + 1rem);
 	z-index: 50;
 	display: flex;
 	height: 3.5rem;
@@ -237,7 +240,7 @@
 }
 
 .desktopBottomSpacer {
-	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;
 }
 

fluxer_app/src/features/channel/components/embeds/attachments/TextualAttachmentPreview.module.css

@@ -62,7 +62,7 @@
 .previewActionButton {
 	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: var(--radius-sm);
 	--action-toolbar-item-background: var(--bg-secondary);
 	--action-toolbar-item-color: var(--text-secondary);
@@ -169,7 +169,7 @@
 }
 
 .previewCode {
-	--pre-padding: 0;
+	--pre-padding: 0px;
 	margin: 0;
 	border: 0;
 	background-color: transparent;
@@ -232,7 +232,7 @@
 .expandButton {
 	composes: item from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
 	--action-toolbar-item-size: 2rem;
-	--action-toolbar-item-border-width: 0;
+	--action-toolbar-item-border-width: 0px;
 	--action-toolbar-item-radius: 0.625rem;
 	--action-toolbar-item-background: var(--background-modifier-hover);
 	--action-toolbar-item-color: var(--text-secondary);
@@ -293,7 +293,7 @@
 .controlButton {
 	composes: item from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
 	--action-toolbar-item-size: 2rem;
-	--action-toolbar-item-border-width: 0;
+	--action-toolbar-item-border-width: 0px;
 	--action-toolbar-item-radius: 0.5rem;
 	--action-toolbar-item-background: transparent;
 	--action-toolbar-item-color: var(--text-secondary);

fluxer_app/src/features/channel/components/embeds/attachments/TextualAttachmentPreviewBottomSheet.module.css

@@ -24,7 +24,7 @@
 	align-items: center;
 	gap: 0.5rem;
 	padding: 0.5rem 0.625rem;
-	padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0));
+	padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
 	border-top: 0.0625rem solid var(--border-color);
 	background-color: var(--background-secondary);
 }
@@ -68,7 +68,7 @@
 .actionButton {
 	composes: item from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
 	--action-toolbar-item-size: 2.25rem;
-	--action-toolbar-item-border-width: 0;
+	--action-toolbar-item-border-width: 0px;
 	--action-toolbar-item-radius: 0.5rem;
 	--action-toolbar-item-background: transparent;
 	--action-toolbar-item-color: var(--text-secondary);

fluxer_app/src/features/channel/components/embeds/media/EmbedGifv.module.css

@@ -10,7 +10,7 @@
 	padding: 0;
 	text-align: left;
 	cursor: pointer;
-	border-radius: var(--media-border-radius, 0);
+	border-radius: var(--media-border-radius, 0px);
 	overflow: hidden;
 }
 
@@ -25,7 +25,7 @@
 	flex-direction: column;
 	cursor: default;
 	overflow: hidden;
-	border-radius: var(--media-border-radius, 0);
+	border-radius: var(--media-border-radius, 0px);
 	border: none;
 	background: var(--background-primary);
 	padding: 0;
@@ -49,7 +49,7 @@
 	display: grid;
 	max-width: 100%;
 	cursor: pointer;
-	border-radius: var(--media-border-radius, 0);
+	border-radius: var(--media-border-radius, 0px);
 	border: none;
 	background: transparent;
 	padding: 0;
@@ -70,7 +70,7 @@
 	height: auto;
 	max-height: 100%;
 	max-width: 100%;
-	border-radius: var(--media-border-radius, 0);
+	border-radius: var(--media-border-radius, 0px);
 	transition: opacity 80ms ease-out;
 	object-fit: contain;
 	pointer-events: none;
@@ -89,7 +89,7 @@
 	width: 100%;
 	height: 100%;
 	display: block;
-	border-radius: var(--media-border-radius, 0);
+	border-radius: var(--media-border-radius, 0px);
 	object-fit: contain;
 	pointer-events: none;
 	opacity: 0;

fluxer_app/src/features/channel/components/embeds/media/EmbedImage.module.css

@@ -10,7 +10,7 @@
 	text-align: left;
 	cursor: pointer;
 	-webkit-touch-callout: none;
-	border-radius: var(--media-border-radius, 0);
+	border-radius: var(--media-border-radius, 0px);
 	overflow: hidden;
 }
 

fluxer_app/src/features/channel/components/embeds/media/EmbedVideo.module.css

@@ -67,7 +67,7 @@
 	user-select: none;
 	-webkit-user-select: none;
 	overflow: hidden;
-	border-radius: var(--media-border-radius, 0);
+	border-radius: var(--media-border-radius, 0px);
 }
 
 .blurInner {
@@ -97,7 +97,7 @@
 	border: 0;
 	padding: 0;
 	cursor: pointer;
-	border-radius: var(--media-border-radius, 0);
+	border-radius: var(--media-border-radius, 0px);
 }
 
 .mobileContainer {
@@ -105,7 +105,7 @@
 	height: 100%;
 	width: 100%;
 	background: #000;
-	border-radius: var(--media-border-radius, 0);
+	border-radius: var(--media-border-radius, 0px);
 	overflow: hidden;
 }
 
@@ -118,7 +118,7 @@
 .videoPlayerBlock {
 	display: block;
 	width: 100%;
-	border-radius: var(--media-border-radius, 0);
+	border-radius: var(--media-border-radius, 0px);
 	overflow: hidden;
 }
 

fluxer_app/src/features/channel/components/embeds/media/MediaButtons.module.css

@@ -8,7 +8,7 @@
 .overlayButton {
 	composes: item roundItem from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
 	--action-toolbar-item-size: 3.5rem;
-	--action-toolbar-item-border-width: 0;
+	--action-toolbar-item-border-width: 0px;
 	--action-toolbar-item-background: rgba(0, 0, 0, 0.75);
 	--action-toolbar-item-color: var(--text-on-brand-primary);
 }

fluxer_app/src/features/channel/components/embeds/media/MediaContainer.module.css

@@ -2,9 +2,9 @@
 
 .mediaContainer {
 	position: relative;
-	border-radius: var(--media-border-radius, 0);
+	border-radius: var(--media-border-radius, 0px);
 	overflow: hidden;
-	clip-path: inset(0 round var(--media-border-radius, 0));
+	clip-path: inset(0 round var(--media-border-radius, 0px));
 }
 
 .mediaHoverAction {

fluxer_app/src/features/channel/components/friends/ActionButton.module.css

@@ -3,7 +3,7 @@
 .button {
 	composes: item roundItem from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
 	--action-toolbar-item-size: 2.25rem;
-	--action-toolbar-item-border-width: 0;
+	--action-toolbar-item-border-width: 0px;
 	--action-toolbar-item-background: var(
 		--friend-action-neutral-background,
 		color-mix(in srgb, var(--background-modifier-hover) 94%, var(--text-primary-muted) 6%)

fluxer_app/src/features/channel/components/friends/MobileFriendRequestItem.module.css

@@ -32,7 +32,7 @@
 .actionButton {
 	composes: item roundItem from '@app/features/ui/action_toolbar/ActionToolbar.module.css';
 	--action-toolbar-item-size: 2.25rem;
-	--action-toolbar-item-border-width: 0;
+	--action-toolbar-item-border-width: 0px;
 	--action-toolbar-item-background: color-mix(
 		in srgb,
 		var(--background-modifier-hover) 94%,

fluxer_app/src/features/channel/components/modals/EditGroupBottomSheet.module.css

@@ -20,7 +20,7 @@
 
 .scrollContent {
 	padding: 1rem;
-	padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
+	padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
 }
 
 .form {

fluxer_app/src/features/channel/components/modals/GroupInvitesBottomSheet.module.css

@@ -24,7 +24,7 @@
 
 .content {
 	padding: 1rem;
-	padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
+	padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
 }
 
 .loadingContainer {

fluxer_app/src/features/channel/components/textarea/TextareaInput.module.css

@@ -4,20 +4,20 @@
 	--textarea-font-size: var(--font-size, 1rem);
 	--textarea-button-height: var(--user-area-content-height);
 	--textarea-button-icon-size: 1.625rem;
-	--textarea-button-padding-x: 0;
+	--textarea-button-padding-x: 0px;
 	--textarea-button-min-width: auto;
 
 	--textarea-button-compact-height: var(--user-area-content-height);
 	--textarea-button-compact-icon-size: 1.375rem;
 
-	--textarea-container-padding-y: 0;
-	--textarea-container-padding-x: 0;
+	--textarea-container-padding-y: 0px;
+	--textarea-container-padding-x: 0px;
 	--textarea-min-height: var(--input-container-min-height);
 	--textarea-horizontal-padding: var(--chat-horizontal-padding, var(--spacing-4));
 	--textarea-content-offset: calc((var(--user-area-content-height) - var(--textarea-line-height)) / 2);
 	--textarea-upload-gap: var(--message-gutter, 1rem);
 	--textarea-side-button-padding: max(
-		0,
+		0px,
 		calc((var(--message-avatar-size, 2.5rem) - var(--textarea-button-height)) / 2)
 	);