minor fix - email thread reply button stylings/corrections (#7168)

fixes #7155

packages/twenty-front/src/modules/activities/emails/right-drawer/components/RightDrawerEmailThread.tsx

@@ -13,33 +13,38 @@ import { Button } from '@/ui/input/button/components/Button';
 import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
 import { messageThreadState } from '@/ui/layout/right-drawer/states/messageThreadState';
 import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { IconArrowBackUp } from 'twenty-ui';
 
+const StyledWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
 const StyledContainer = styled.div`
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  flex: 1;
   height: 85%;
-  justify-content: flex-start;
   overflow-y: auto;
-  position: relative;
 `;
 
-const StyledButtonContainer = styled.div`
+const StyledButtonContainer = styled.div<{ isMobile: boolean }>`
   background: ${({ theme }) => theme.background.secondary};
-  bottom: 0;
+  border-top: 1px solid ${({ theme }) => theme.border.color.light};
   display: flex;
-  height: 110px;
+  justify-content: flex-end;
-  left: 0;
+  height: ${({ isMobile }) => (isMobile ? '100px' : '50px')};
-  padding-left: ${({ theme }) => theme.spacing(7)};
+  padding: ${({ theme }) => theme.spacing(2)};
-  padding-top: ${({ theme }) => theme.spacing(5)};
+  width: 100%;
-  position: fixed;
+  box-sizing: border-box;
-  right: 0;
 `;
 
 export const RightDrawerEmailThread = () => {
   const setMessageThread = useSetRecoilState(messageThreadState);
-
+  const isMobile = useIsMobile();
   const {
     thread,
     messages,
@@ -118,6 +123,7 @@ export const RightDrawerEmailThread = () => {
     return null;
   }
   return (
+    <StyledWrapper>
       <StyledContainer>
         {threadLoading ? (
           <EmailLoader loadingText="Loading thread" />
@@ -149,16 +155,17 @@ export const RightDrawerEmailThread = () => {
             />
           </>
         )}
-      {canReply && !messageChannelLoading ? (
+      </StyledContainer>
-        <StyledButtonContainer>
+      {canReply && !messageChannelLoading && (
+        <StyledButtonContainer isMobile={isMobile}>
           <Button
             onClick={handleReplyClick}
-            title="Reply (View in Gmail)"
+            title="Reply"
             Icon={IconArrowBackUp}
             disabled={!canReply}
-          ></Button>
+          />
         </StyledButtonContainer>
-      ) : null}
+      )}
-    </StyledContainer>
+    </StyledWrapper>
   );
 };

packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawer.tsx

@@ -32,7 +32,7 @@ const StyledContainer = styled(motion.div)`
   background: ${({ theme }) => theme.background.primary};
   border-left: 1px solid ${({ theme }) => theme.border.color.medium};
   box-shadow: ${({ theme }) => theme.boxShadow.strong};
-  height: 100%;
+  height: 100dvh;
   overflow-x: hidden;
   position: fixed;