Modal: More fixes for header layout

This commit is contained in:
Alexander Zinchuk 2025-10-15 19:57:22 +02:00
parent 8325bd7dbb
commit 2c61fe2cb1
3 changed files with 20 additions and 22 deletions

View File

@ -77,9 +77,7 @@
} }
.ratingProgress { .ratingProgress {
margin: 0 auto; margin: 4.5rem auto 1.5rem;
margin-top: 5.625rem;
margin-bottom: 1.5rem;
&.withPreview { &.withPreview {
margin-bottom: 1rem; margin-bottom: 1rem;

View File

@ -107,6 +107,8 @@ const DEFAULT_BUTTON_TEXT: Record<string, string> = {
close: 'Close', close: 'Close',
}; };
const NBSP = '\u00A0';
const WebAppModalTabContent: FC<OwnProps & StateProps> = ({ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
modal, modal,
webApp, webApp,
@ -1109,7 +1111,7 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
{popupParameters && ( {popupParameters && (
<Modal <Modal
isOpen={Boolean(popupParameters)} isOpen={Boolean(popupParameters)}
title={popupParameters.title} title={popupParameters.title || NBSP}
className={ className={
buildClassName(styles.webAppPopup, !popupParameters.title?.trim().length && styles.withoutTitle) buildClassName(styles.webAppPopup, !popupParameters.title?.trim().length && styles.withoutTitle)
} }

View File

@ -54,8 +54,6 @@ export type OwnProps = {
isCondensedHeader?: boolean; isCondensedHeader?: boolean;
}; };
const NBSP = '\u00A0';
const Modal: FC<OwnProps> = ({ const Modal: FC<OwnProps> = ({
dialogRef, dialogRef,
title, title,
@ -147,25 +145,25 @@ const Modal: FC<OwnProps> = ({
return header; return header;
} }
if (!title && !withCloseButton) return undefined; const closeButton = withCloseButton ? (
<Button
className={buildClassName(hasAbsoluteCloseButton && 'modal-absolute-close-button')}
round
color={absoluteCloseButtonColor}
size="smaller"
ariaLabel={lang('Close')}
onClick={onClose}
>
<Icon name="close" />
</Button>
) : undefined;
return ( return title ? (
<div className={buildClassName('modal-header', headerClassName, isCondensedHeader && 'modal-header-condensed')}> <div className={buildClassName('modal-header', headerClassName, isCondensedHeader && 'modal-header-condensed')}>
{withCloseButton && ( {closeButton}
<Button <div className="modal-title">{title}</div>
className={buildClassName(hasAbsoluteCloseButton && 'modal-absolute-close-button')}
round
color={absoluteCloseButtonColor}
size="smaller"
ariaLabel={lang('Close')}
onClick={onClose}
>
<Icon name="close" />
</Button>
)}
<div className="modal-title">{title || NBSP}</div>
</div> </div>
); ) : closeButton;
} }
const fullClassName = buildClassName( const fullClassName = buildClassName(