From ac2f6056494fc500fd78ca6e40356a66eef16ab2 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Thu, 29 Aug 2024 15:52:35 +0200
Subject: [PATCH] UI: Adjust styles in the chat folder modal  (#4874)

---
 .../left/ChatFolderModal.module.scss          | 26 ++++++++++++++++
 src/components/left/ChatFolderModal.tsx       | 30 ++++++++++++-------
 src/hooks/reducers/useFoldersReducer.ts       |  2 +-
 3 files changed, 46 insertions(+), 12 deletions(-)
 create mode 100644 src/components/left/ChatFolderModal.module.scss

diff --git a/src/components/left/ChatFolderModal.module.scss b/src/components/left/ChatFolderModal.module.scss
new file mode 100644
index 000000000..51017d188
--- /dev/null
+++ b/src/components/left/ChatFolderModal.module.scss
@@ -0,0 +1,26 @@
+@use '../../styles/mixins';
+
+.modalContent {
+  padding: 0 !important;
+  overflow-y: hidden !important;
+  display: flex;
+  flex-direction: column;
+}
+
+.root :global(.modal-dialog) {
+  height: 70%;
+  max-width: 26.25rem;
+  overflow: hidden;
+}
+
+.main {
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  padding: 1rem 0.5rem;
+
+  @include mixins.adapt-padding-to-scrollbar(0.5rem);
+}
+
+.footer {
+  margin: 0.5rem;
+}
diff --git a/src/components/left/ChatFolderModal.tsx b/src/components/left/ChatFolderModal.tsx
index 0e36c31b4..dd048a20f 100644
--- a/src/components/left/ChatFolderModal.tsx
+++ b/src/components/left/ChatFolderModal.tsx
@@ -7,6 +7,7 @@ import { getActions, withGlobal } from '../../global';
 import type { ApiChatFolder } from '../../api/types';
 
 import { ALL_FOLDER_ID } from '../../config';
+import buildClassName from '../../util/buildClassName';
 
 import useOldLang from '../../hooks/useOldLang';
 
@@ -14,6 +15,8 @@ import Button from '../ui/Button';
 import CheckboxGroup from '../ui/CheckboxGroup';
 import Modal from '../ui/Modal';
 
+import styles from './ChatFolderModal.module.scss';
+
 export type OwnProps = {
   isOpen: boolean;
   chatId: string;
@@ -80,19 +83,24 @@ const ChatFolderModal: FC<OwnProps & StateProps> = ({
       onClose={onClose}
       onCloseAnimationEnd={onCloseAnimationEnd}
       onEnter={handleSubmit}
-      className="delete"
+      className={buildClassName(styles.root, 'delete')}
+      contentClassName={styles.modalContent}
       title={lang('FilterAddTo')}
     >
-      <CheckboxGroup
-        options={folders}
-        selected={selectedFolderIds}
-        onChange={setSelectedFolderIds}
-      />
-      <div className="dialog-buttons">
-        <Button color="primary" className="confirm-dialog-button" isText onClick={handleSubmit}>
-          {lang('FilterAddTo')}
-        </Button>
-        <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
+      <div className={buildClassName(styles.main, 'custom-scroll')}>
+        <CheckboxGroup
+          options={folders}
+          selected={selectedFolderIds}
+          onChange={setSelectedFolderIds}
+        />
+      </div>
+      <div className={styles.footer}>
+        <div className="dialog-buttons">
+          <Button color="primary" className="confirm-dialog-button" isText onClick={handleSubmit}>
+            {lang('FilterAddTo')}
+          </Button>
+          <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
+        </div>
       </div>
     </Modal>
   );
diff --git a/src/hooks/reducers/useFoldersReducer.ts b/src/hooks/reducers/useFoldersReducer.ts
index dc4b67a49..a8fa7e14b 100644
--- a/src/hooks/reducers/useFoldersReducer.ts
+++ b/src/hooks/reducers/useFoldersReducer.ts
@@ -117,7 +117,7 @@ export type FoldersActions = (
   'setTitle' | 'saveFilters' | 'editFolder' | 'reset' | 'setChatFilter' | 'setIsLoading' | 'setError' |
   'editIncludeFilters' | 'editExcludeFilters' | 'setIncludeFilters' | 'setExcludeFilters' | 'setIsTouched' |
   'setFolderId' | 'setIsChatlist'
-);
+  );
 export type FolderEditDispatch = Dispatch<FoldersState, FoldersActions>;
 
 const INITIAL_STATE: FoldersState = {