fix(app): cap the height of list picker modals (#3431)

fluxer_app/src/features/app/components/dialogs/shared/SelectorModalStyles.module.css

@@ -17,14 +17,25 @@
 	color: var(--text-secondary);
 }
 
+.selectorRoot {
+	height: 45rem;
+}
+
 .selectorContent {
-	--selector-modal-content-height: clamp(20rem, 48vh, 23.75rem);
 	display: flex;
 	flex-direction: column;
+	padding: 0;
+}
+
+:global(html.mobile-layout) .selectorRoot {
+	height: auto;
+}
+
+:global(html.mobile-layout) .selectorContent {
+	--selector-modal-content-height: clamp(20rem, 48vh, 23.75rem);
 	height: var(--selector-modal-content-height);
 	min-height: var(--selector-modal-content-height);
 	max-height: var(--selector-modal-content-height);
-	padding: 0;
 }
 
 .listContainer {

fluxer_app/src/features/channel/components/modals/CreateDMModal.tsx

@@ -45,7 +45,12 @@ export const CreateDMModal = observer((props: CreateDMModalProps) => {
 		}
 	}, [modalLogic]);
 	return (
-		<Modal.Root size="small" centered data-flx="channel.create-dm-modal.modal-root">
+		<Modal.Root
+			size="small"
+			centered
+			className={selectorStyles.selectorRoot}
+			data-flx="channel.create-dm-modal.modal-root"
+		>
 			<Modal.Header title={i18n._(SELECT_FRIENDS_DESCRIPTOR)} data-flx="channel.create-dm-modal.modal-header">
 				{!restriction && (
 					<>

fluxer_app/src/features/expressions/components/modals/GiftSendToFriendModal.tsx

@@ -48,7 +48,12 @@ export const GiftSendToFriendModal = observer(function GiftSendToFriendModal({co
 	const handleCopy = useCopyLinkHandler(giftUrl, true);
 	const {sendingTo, sentTo, send: handleSendGift} = useSendLinkToRecipients(() => giftUrl);
 	return (
-		<Modal.Root size="small" centered data-flx="expressions.gift-send-to-friend-modal.modal-root">
+		<Modal.Root
+			size="small"
+			centered
+			className={selectorStyles.selectorRoot}
+			data-flx="expressions.gift-send-to-friend-modal.modal-root"
+		>
 			<Modal.Header
 				title={i18n._(YOU_ALREADY_HAVE_LIFETIME_DESCRIPTOR, {premiumProductName: getPremiumProductName()})}
 				data-flx="expressions.gift-send-to-friend-modal.modal-header"

fluxer_app/src/features/invite/components/modals/InviteModal.tsx

@@ -326,7 +326,12 @@ const InviteModalContent = observer(function InviteModalContent({
 		return i18n._(YOUR_INVITE_LINK_EXPIRES_IN_SECONDS_DESCRIPTOR, {seconds});
 	};
 	return (
-		<Modal.Root size="small" centered data-flx="invite.invite-modal.modal-root--2">
+		<Modal.Root
+			size="small"
+			centered
+			className={selectorStyles.selectorRoot}
+			data-flx="invite.invite-modal.modal-root--2"
+		>
 			<Modal.Header
 				title={!showAdvanced ? title : i18n._(INVITE_LINK_SETTINGS_DESCRIPTOR)}
 				data-flx="invite.invite-modal.modal-header--2"

fluxer_app/src/features/messaging/components/modals/ForwardModal.module.css

@@ -21,14 +21,6 @@
 	caret-color: var(--text-chat);
 }
 
-.destinationList {
-	display: flex;
-	flex-direction: column;
-	height: clamp(20rem, 48vh, 23.75rem);
-	min-height: 0;
-	max-height: clamp(20rem, 48vh, 23.75rem);
-}
-
 .footerSection {
 	position: relative;
 	display: flex;

fluxer_app/src/features/messaging/components/modals/ForwardModal.tsx

@@ -361,6 +361,7 @@ export const ForwardModal = observer(
 			<Modal.Root
 				size="small"
 				centered
+				className={selectorStyles.selectorRoot}
 				initialFocusRef={shouldFocusSearch ? searchInputRef : undefined}
 				data-flx="messaging.forward-modal.modal-root"
 			>
@@ -388,7 +389,7 @@ export const ForwardModal = observer(
 				</Modal.Header>
 				<Modal.Content
 					padding="none"
-					className={modalStyles.destinationList}
+					className={selectorStyles.selectorContent}
 					data-flx="messaging.forward-modal.modal-content"
 				>
 					<div className={selectorStyles.listContainer} data-flx="messaging.forward-modal.div--2">

fluxer_app/src/features/relationship/components/modals/AddFriendsToGroupModal.tsx

@@ -48,7 +48,12 @@ export const AddFriendsToGroupModal = observer((props: AddFriendsToGroupModalPro
 			? i18n._(LINK_HIDDEN_WHILE_SHARING_DESCRIPTOR)
 			: (modalLogic.inviteLink ?? '');
 	return (
-		<Modal.Root size="small" centered data-flx="relationship.add-friends-to-group-modal.modal-root">
+		<Modal.Root
+			size="small"
+			centered
+			className={selectorStyles.selectorRoot}
+			data-flx="relationship.add-friends-to-group-modal.modal-root"
+		>
 			<Modal.Header
 				title={i18n._(SELECT_FRIENDS_DESCRIPTOR)}
 				data-flx="relationship.add-friends-to-group-modal.modal-header"

fluxer_app/src/features/theme/components/modals/ShareThemeModal.tsx

@@ -144,7 +144,12 @@ export const ShareThemeModal = observer(({themeCss}: {themeCss: string}) => {
 		send: handleSendTheme,
 	} = useSendLinkToRecipients(() => (themeUrl ? `${i18n._(CHECK_OUT_MY_CUSTOM_THEME_DESCRIPTOR)}\n${themeUrl}` : null));
 	return (
-		<Modal.Root size="small" centered data-flx="theme.share-theme-modal.modal-root">
+		<Modal.Root
+			size="small"
+			centered
+			className={selectorStyles.selectorRoot}
+			data-flx="theme.share-theme-modal.modal-root"
+		>
 			<Modal.Header title={i18n._(SHARE_YOUR_THEME_DESCRIPTOR)} data-flx="theme.share-theme-modal.modal-header">
 				<div className={selectorStyles.headerSearch} data-flx="theme.share-theme-modal.div">
 					<Input