ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web App Popup: Fix layout (#6581)

Browse Source
This commit is contained in:
Alexander Zinchuk 2026-01-13 01:14:30 +01:00
parent d6f2f1cb4a
commit bb56647584
2 changed files with 30 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/modals/webApp/WebAppModalTabContent.module.scss
View File

@ -242,11 +242,13 @@
.web-app-popup { .web-app-popup {
:global(.modal-dialog) { :global(.modal-dialog) {
width: auto;
min-width: min(22rem, 100%) !important;
max-width: min(30rem, 100%); max-width: min(30rem, 100%);
} }
&.without-title :global(.modal-content) { &.without-title :global(.modal-content) {
padding-top: 0; padding-top: 0.75rem;
} }
:global(.modal-content) { :global(.modal-content) {

53
src/components/modals/webApp/WebAppModalTabContent.tsx
View File

@ -150,6 +150,9 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
const [isLoaded, markLoaded, markUnloaded] = useFlag(false); const [isLoaded, markLoaded, markUnloaded] = useFlag(false);
const [popupParameters, setPopupParameters] = useState<PopupOptions>(); const [popupParameters, setPopupParameters] = useState<PopupOptions>();
const renderingPopupParameters = useCurrentOrPrev(popupParameters);
const [isRequestingPhone, setIsRequestingPhone] = useState(false); const [isRequestingPhone, setIsRequestingPhone] = useState(false);
const [isRequestingWriteAccess, setIsRequestingWriteAccess] = useState(false); const [isRequestingWriteAccess, setIsRequestingWriteAccess] = useState(false);
const [clipboardRequestId, setClipboardRequestId] = useState<string>(); const [clipboardRequestId, setClipboardRequestId] = useState<string>();
@ -1153,32 +1156,30 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
</Button> </Button>
</div> </div>
)} )}
{popupParameters && ( <Modal
<Modal isOpen={Boolean(popupParameters)}
isOpen={Boolean(popupParameters)} title={renderingPopupParameters?.title || NBSP}
title={popupParameters.title || NBSP} className={
className={ buildClassName(styles.webAppPopup, !renderingPopupParameters?.title?.trim().length && styles.withoutTitle)
buildClassName(styles.webAppPopup, !popupParameters.title?.trim().length && styles.withoutTitle) }
} hasCloseButton
hasAbsoluteCloseButton onClose={handleAppPopupModalClose}
onClose={handleAppPopupModalClose} >
> {renderingPopupParameters?.message}
{popupParameters.message} <div className="dialog-buttons mt-2">
<div className="dialog-buttons mt-2"> {renderingPopupParameters?.buttons.map((button) => (
{popupParameters.buttons.map((button) => ( <Button
<Button key={button.id || button.type}
key={button.id || button.type} className="confirm-dialog-button"
className="confirm-dialog-button" color={button.type === 'destructive' ? 'danger' : 'primary'}
color={button.type === 'destructive' ? 'danger' : 'primary'} isText
isText onClick={() => handleAppPopupClose(button.id)}
onClick={() => handleAppPopupClose(button.id)} >
> {button.text || oldLang(DEFAULT_BUTTON_TEXT[button.type])}
{button.text || oldLang(DEFAULT_BUTTON_TEXT[button.type])} </Button>
</Button> ))}
))} </div>
</div> </Modal>
</Modal>
)}
<ConfirmDialog <ConfirmDialog
isOpen={isRequestingPhone} isOpen={isRequestingPhone}