Merge pull request #2140 from daostack/remove-double-scroll-bar-chat

dev app- there are 2 scrollers in the chat (Android & iOS) #1456
daostack · Oct 4, 2023 · c5c8c1d · c5c8c1d
2 parents 4b3fcfb + 95649d6
commit c5c8c1d
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 50 deletions.
diff --git a/src/pages/common/components/ChatComponent/ChatComponent.module.scss b/src/pages/common/components/ChatComponent/ChatComponent.module.scss
@@ -10,11 +10,6 @@
   background-color: $white;
   box-sizing: border-box;
   --chat-input-wrapper-height: 3.125rem;
-
-  @include tablet {
-    height: 100%;
-    margin-top: 0;
-  }
 }
 
 .messages {
@@ -24,7 +19,7 @@
   display: flex;
   flex-direction: column-reverse;
   padding: 0.5rem 2rem 0;
-  padding-bottom: calc(var(--chat-input-wrapper-height) + 7rem);
+  padding-bottom: var(--chat-input-wrapper-height);
 }
 
 .emptyChat {

diff --git a/src/pages/common/components/ChatMobileModal/ChatMobileModal.module.scss b/src/pages/common/components/ChatMobileModal/ChatMobileModal.module.scss
@@ -38,14 +38,6 @@
   margin-right: 0.25rem;
 }
 
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  height: calc(100vh - #{$container-mobile-header-height});
-}
-
 .commonName {
   margin: 0;
 }

diff --git a/src/pages/common/components/ChatMobileModal/ChatMobileModal.tsx b/src/pages/common/components/ChatMobileModal/ChatMobileModal.tsx
@@ -56,44 +56,42 @@ const ChatMobileModal: FC<ChatMobileModalProps> = (props) => {
       isHeaderSticky={Boolean(header)}
       mobileFullScreen
     >
-      <div className={styles.content}>
-        {!header && (
-          <div className={styles.header}>
-            <div className={styles.headerContent}>
-              {hasBackButton && (
-                <ButtonIcon onClick={onClose}>
-                  <LongLeftArrowIcon className={styles.backButtonIcon} />
-                </ButtonIcon>
-              )}
-              <Image
-                className={styles.image}
-                src={commonImage}
-                alt={`${commonName}'s image`}
-                placeholderElement={null}
-                aria-hidden
-              />
-              <p className={styles.commonName}>{commonName}</p>
-            </div>
-            {hasCloseIcon && (
-              <CloseIcon
-                width={closeIconSize}
-                height={closeIconSize}
-                fill={Colors.secondaryBlue}
-              />
+      {!header && (
+        <div className={styles.header}>
+          <div className={styles.headerContent}>
+            {hasBackButton && (
+              <ButtonIcon onClick={onClose}>
+                <LongLeftArrowIcon className={styles.backButtonIcon} />
+              </ButtonIcon>
             )}
+            <Image
+              className={styles.image}
+              src={commonImage}
+              alt={`${commonName}'s image`}
+              placeholderElement={null}
+              aria-hidden
+            />
+            <p className={styles.commonName}>{commonName}</p>
           </div>
-        )}
-        {title && (
-          <p
-            className={classNames(styles.title, {
-              [styles.titleRTL]: isRTL(title),
-            })}
-          >
-            {title}
-          </p>
-        )}
-        <div className={styles.modalChildren}>{children}</div>
-      </div>
+          {hasCloseIcon && (
+            <CloseIcon
+              width={closeIconSize}
+              height={closeIconSize}
+              fill={Colors.secondaryBlue}
+            />
+          )}
+        </div>
+      )}
+      {title && (
+        <p
+          className={classNames(styles.title, {
+            [styles.titleRTL]: isRTL(title),
+          })}
+        >
+          {title}
+        </p>
+      )}
+      <div className={styles.modalChildren}>{children}</div>
     </Modal>
   );
 };