fix: overflow in session modal title

user details dialog is now a fixed width
oxen-io · Jul 24, 2024 · 8ea7daa · 8ea7daa
1 parent 6f2947e
commit 8ea7daa
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 2 deletions.
diff --git a/stylesheets/_modal.scss b/stylesheets/_modal.scss
@@ -142,3 +142,14 @@
     }
   }
 }
+
+.user-details-dialog {
+  .session-confirm-wrapper {
+    .session-modal__header {
+      max-width: 400px;
+    }
+    .session-modal__body {
+      width: 400px;
+    }
+  }
+}
diff --git a/ts/components/SessionWrapperModal.tsx b/ts/components/SessionWrapperModal.tsx
@@ -2,13 +2,21 @@ import classNames from 'classnames';
 import { ReactNode, useRef } from 'react';
 import useKey from 'react-use/lib/useKey';
 
+import styled from 'styled-components';
 import { SessionIconButton } from './icon';
 
 import { SessionFocusTrap } from './SessionFocusTrap';
 import { Flex } from './basic/Flex';
 import { SessionButton, SessionButtonColor, SessionButtonType } from './basic/SessionButton';
 import { SpacerXL } from './basic/Text';
 
+const StyledTitle = styled.div`
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  padding: 0 var(--margins-sm);
+`;
+
 export type SessionWrapperModalType = {
   title?: string;
   showHeader?: boolean;
@@ -115,7 +123,7 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
                       })
                     : null}
                 </Flex>
-                <div className="session-modal__header__title">{title}</div>
+                <StyledTitle className="session-modal__header__title">{title}</StyledTitle>
                 <Flex
                   container={true}
                   flexDirection={headerReverse ? 'row-reverse' : 'row'}

diff --git a/ts/components/dialog/UserDetailsDialog.tsx b/ts/components/dialog/UserDetailsDialog.tsx
@@ -17,6 +17,7 @@ import { ConversationTypeEnum } from '../../models/types';
 const StyledInputContainer = styled(Flex)`
   textarea {
     overflow: hidden;
+    padding-top: var(--margins-xs);
   }
 `;
 
@@ -59,7 +60,12 @@ export const UserDetailsDialog = (props: UserDetailsModalState) => {
   }
 
   return (
-    <SessionWrapperModal title={props.userName} onClose={closeDialog} showExitIcon={true}>
+    <SessionWrapperModal
+      title={props.userName}
+      onClose={closeDialog}
+      showExitIcon={true}
+      additionalClassName="user-details-dialog"
+    >
       <div className="avatar-center">
         <div className="avatar-center-inner">
           <Avatar