Fix close button position in various modals

src/components/common/pickers/ChatOrUserPicker.scss

@@ -17,10 +17,6 @@
   }
 
   .modal-header {
-    display: flex;
-    align-items: center;
-    padding: 0.25rem 0.5rem;
-
     .Button {
       margin-right: 0.5rem;
     }

src/components/common/pickers/ChatOrUserPicker.tsx

@@ -244,7 +244,7 @@ const ChatOrUserPicker: FC<OwnProps> = ({
   function renderTopicList() {
     return (
       <>
-        <div className="modal-header" dir={oldLang.isRtl ? 'rtl' : undefined}>
+        <div className="modal-header modal-header-condensed" dir={oldLang.isRtl ? 'rtl' : undefined}>
           <Button round color="translucent" size="smaller" ariaLabel={oldLang('Back')} onClick={handleHeaderBackClick}>
             <Icon name="arrow-left" />
           </Button>
@@ -291,7 +291,7 @@ const ChatOrUserPicker: FC<OwnProps> = ({
   function renderChatList() {
     return (
       <>
-        <div className="modal-header" dir={oldLang.isRtl ? 'rtl' : undefined}>
+        <div className="modal-header modal-header-condensed" dir={oldLang.isRtl ? 'rtl' : undefined}>
           <Button
             round
             color="translucent"
@@ -335,9 +335,9 @@ const ChatOrUserPicker: FC<OwnProps> = ({
     <Modal
       isOpen={isOpen}
       className={buildClassName('ChatOrUserPicker', className)}
+      isLowStackPriority={isLowStackPriority}
       onClose={onClose}
       onCloseAnimationEnd={onCloseAnimationEnd}
-      isLowStackPriority={isLowStackPriority}
     >
       <Transition activeKey={activeKey} name="slideFade" slideClassName="ChatOrUserPicker_slide">
         {() => {

src/components/common/pickers/PickerModal.tsx

@@ -32,7 +32,6 @@ const PickerModal = ({
 
   return (
     <Modal
-
       {...modalProps}
       isSlim
       className={buildClassName(
@@ -42,6 +41,7 @@ const PickerModal = ({
       )}
       contentClassName={buildClassName(styles.content, modalProps.contentClassName)}
       headerClassName={buildClassName(styles.header, modalProps.headerClassName)}
+      isCondensedHeader
     >
       {modalProps.children}
       {hasButton && (

src/components/middle/composer/AttachmentModal.module.scss

@@ -11,7 +11,6 @@
     }
 
     .modal-header-condensed {
-      padding: 0.375rem 1.125rem !important;
       border-bottom: 1px solid transparent;
       transition: border-color 250ms ease-in-out;
     }

src/components/middle/composer/AttachmentModal.tsx

@@ -1,13 +1,9 @@
-import type { FC } from '../../../lib/teact/teact';
 import type React from '../../../lib/teact/teact';
-import {
+import type { FC } from '../../../lib/teact/teact';
-  memo, useEffect, useMemo, useRef, useState,
+import { memo, useEffect, useMemo, useRef, useState } from '../../../lib/teact/teact';
-} from '../../../lib/teact/teact';
 import { getActions, withGlobal } from '../../../global';
 
-import type {
+import type { ApiAttachment, ApiChatMember, ApiMessage, ApiSticker } from '../../../api/types';
-  ApiAttachment, ApiChatMember, ApiMessage, ApiSticker,
-} from '../../../api/types';
 import type { GlobalState } from '../../../global/types';
 import type { MessageListType, ThreadId } from '../../../types';
 import type { Signal } from '../../../util/signals';
@@ -544,7 +540,7 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
         {notEditingFile && !isInAlbum
           && (
             <DropdownMenu
-              className="attachmeneditingMessaget-modal-more-menu with-menu-transitions"
+              className="with-menu-transitions"
               trigger={MoreMenuButton}
               positionX="right"
             >
@@ -623,17 +619,18 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
   }
 
   const isBottomDividerShown = !areAttachmentsScrolledToBottom || !isCaptionNotScrolled;
-  const buttonSendCaption = paidMessagesStars ? formatStarsAsIcon(lang,
+  const buttonSendCaption = paidMessagesStars ? formatStarsAsIcon(
+    lang,
     attachmentsLength * paidMessagesStars,
     {
       className: styles.sendButtonStar,
       asFont: true,
-    }) : oldLang('Send');
+    },
+  ) : oldLang('Send');
 
   return (
     <Modal
       isOpen={isOpen}
-      onClose={onClear}
       header={renderHeader()}
       className={buildClassName(
         styles.root,
@@ -643,8 +640,10 @@ const AttachmentModal: FC<OwnProps & StateProps> = ({
         isSymbolMenuOpen && styles.symbolMenuOpen,
         forceDarkTheme && 'component-theme-dark',
       )}
+      hasAbsoluteCloseButton={Boolean(renderingAttachments)}
       noBackdropClose
       isLowStackPriority
+      onClose={onClear}
     >
       <div
         className={styles.dropTarget}

src/components/modals/emojiStatusAccess/EmojiStatusAccessModal.module.scss

@@ -1,6 +1,7 @@
 .content {
   display: flex;
   flex-direction: column;
+  gap: 1rem;
   align-items: center;
 }
 

src/components/modals/webApp/WebAppModalTabContent.tsx

@@ -86,8 +86,6 @@ type StateProps = {
   botAppPermissions?: BotAppPermissions;
 };
 
-const NBSP = '\u00A0';
-
 const MAIN_BUTTON_ANIMATION_TIME = 250;
 const ANIMATION_WAIT = 400;
 const COLLAPSING_WAIT = 350;
@@ -1111,12 +1109,12 @@ const WebAppModalTabContent: FC<OwnProps & StateProps> = ({
       {popupParameters && (
         <Modal
           isOpen={Boolean(popupParameters)}
-          title={popupParameters.title || NBSP}
+          title={popupParameters.title}
-          onClose={handleAppPopupModalClose}
-          hasCloseButton
           className={
             buildClassName(styles.webAppPopup, !popupParameters.title?.trim().length && styles.withoutTitle)
           }
+          hasAbsoluteCloseButton
+          onClose={handleAppPopupModalClose}
         >
           {popupParameters.message}
           <div className="dialog-buttons mt-2">

src/components/ui/Modal.scss

@@ -133,14 +133,14 @@
     text-overflow: ellipsis;
 
     &:not(:only-child) {
-      margin: 0 1.5rem;
+      margin: 0 1rem;
     }
   }
 
   .modal-header-condensed {
     @extend %modal-header;
 
-    padding: 0.5rem 1.25rem 0 0.9375rem !important;
+    padding: 0.375rem 0.5rem !important;
 
     .modal-action-button {
       width: auto;

src/components/ui/Modal.tsx

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