pepepper/fluxer
1
0 Fork 0
mirror of https://github.com/fluxerapp/fluxer synced 2026-10-17 13:05:32 +09:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Hampus authored and GitHub committed 2026-10-12 20:25:28 +02:00
1 parent d1b4b82895
commit 30b32c9a35
8 files changed
+45 -16
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

fluxer_app/src/features/app/components/dialogs/shared/SelectorModalStyles.module.css
+13 -2
View File
@@ -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
+6 -1
View File
@@ -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
+6 -1
View File
@@ -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
+6 -1
View File
@@ -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
-8
View File
@@ -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
+2 -1
View File
@@ -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
+6 -1
View File
@@ -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
+6 -1
View File
@@ -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