UI: Adjust styles in the chat folder modal (#4874)

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;
+}

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
+      <div className={buildClassName(styles.main, 'custom-scroll')}>
-        options={folders}
+        <CheckboxGroup
-        selected={selectedFolderIds}
+          options={folders}
-        onChange={setSelectedFolderIds}
+          selected={selectedFolderIds}
-      />
+          onChange={setSelectedFolderIds}
-      <div className="dialog-buttons">
+        />
-        <Button color="primary" className="confirm-dialog-button" isText onClick={handleSubmit}>
+      </div>
-          {lang('FilterAddTo')}
+      <div className={styles.footer}>
-        </Button>
+        <div className="dialog-buttons">
-        <Button className="confirm-dialog-button" isText onClick={onClose}>{lang('Cancel')}</Button>
+          <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>
   );

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 = {