From d04c811f8f35c9aa0f424b1ef8942deff0ee98dc Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 14 Oct 2025 03:23:28 +0200
Subject: [PATCH] Fix close button position in various modals

---
 .../common/pickers/ChatOrUserPicker.scss      |  4 ---
 .../common/pickers/ChatOrUserPicker.tsx       |  6 ++--
 src/components/common/pickers/PickerModal.tsx |  2 +-
 .../composer/AttachmentModal.module.scss      |  1 -
 .../middle/composer/AttachmentModal.tsx       | 21 ++++++------
 .../EmojiStatusAccessModal.module.scss        |  1 +
 .../modals/webApp/WebAppModalTabContent.tsx   |  8 ++---
 src/components/ui/Modal.scss                  |  4 +--
 src/components/ui/Modal.tsx                   | 33 +++++++++----------
 9 files changed, 35 insertions(+), 45 deletions(-)

diff --git a/src/components/common/pickers/ChatOrUserPicker.scss b/src/components/common/pickers/ChatOrUserPicker.scss
index 0e3914f83..73cd3d203 100644
--- a/src/components/common/pickers/ChatOrUserPicker.scss
+++ b/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;
     }
diff --git a/src/components/common/pickers/ChatOrUserPicker.tsx b/src/components/common/pickers/ChatOrUserPicker.tsx
index 7da1fab55..77c1b5fac 100644
--- a/src/components/common/pickers/ChatOrUserPicker.tsx
+++ b/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">
         {() => {
diff --git a/src/components/common/pickers/PickerModal.tsx b/src/components/common/pickers/PickerModal.tsx
index 5fd3413e4..3a7209163 100644
--- a/src/components/common/pickers/PickerModal.tsx
+++ b/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 && (
diff --git a/src/components/middle/composer/AttachmentModal.module.scss b/src/components/middle/composer/AttachmentModal.module.scss
index 3a1a0dc84..17664b399 100644
--- a/src/components/middle/composer/AttachmentModal.module.scss
+++ b/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;
     }
diff --git a/src/components/middle/composer/AttachmentModal.tsx b/src/components/middle/composer/AttachmentModal.tsx
index bcdd43918..247c1b151 100644
--- a/src/components/middle/composer/AttachmentModal.tsx
+++ b/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 {
-  memo, useEffect, useMemo, useRef, useState,
-} from '../../../lib/teact/teact';
+import type { FC } from '../../../lib/teact/teact';
+import { memo, useEffect, useMemo, useRef, useState } from '../../../lib/teact/teact';
 import { getActions, withGlobal } from '../../../global';
 
-import type {
-  ApiAttachment, ApiChatMember, ApiMessage, ApiSticker,
-} from '../../../api/types';
+import type { 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}
diff --git a/src/components/modals/emojiStatusAccess/EmojiStatusAccessModal.module.scss b/src/components/modals/emojiStatusAccess/EmojiStatusAccessModal.module.scss
index af99ac25f..4a6fd515d 100644
--- a/src/components/modals/emojiStatusAccess/EmojiStatusAccessModal.module.scss
+++ b/src/components/modals/emojiStatusAccess/EmojiStatusAccessModal.module.scss
@@ -1,6 +1,7 @@
 .content {
   display: flex;
   flex-direction: column;
+  gap: 1rem;
   align-items: center;
 }
 
diff --git a/src/components/modals/webApp/WebAppModalTabContent.tsx b/src/components/modals/webApp/WebAppModalTabContent.tsx
index e39e92df2..0ee5a6b8d 100644
--- a/src/components/modals/webApp/WebAppModalTabContent.tsx
+++ b/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}
-          onClose={handleAppPopupModalClose}
-          hasCloseButton
+          title={popupParameters.title}
           className={
             buildClassName(styles.webAppPopup, !popupParameters.title?.trim().length && styles.withoutTitle)
           }
+          hasAbsoluteCloseButton
+          onClose={handleAppPopupModalClose}
         >
           {popupParameters.message}
           <div className="dialog-buttons mt-2">
diff --git a/src/components/ui/Modal.scss b/src/components/ui/Modal.scss
index 14b83417b..a16858cb5 100644
--- a/src/components/ui/Modal.scss
+++ b/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;
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index 0a2e81e2a..46578ac6f 100644
--- a/src/components/ui/Modal.tsx
+++ b/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}
-        <div className="modal-title">{title}</div>
+        {withCloseButton && (
+          <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>
     );
   }