fix: make sure to show scroll bar on fixed height session input

ts/components/dialog/UserDetailsDialog.tsx

@@ -13,12 +13,15 @@ import { CopyToClipboardButton } from '../buttons/CopyToClipboardButton';
 import { SessionInput } from '../inputs';
 import { SessionWrapperModal } from '../SessionWrapperModal';
 import { ConversationTypeEnum } from '../../models/types';
+import { StyledTextAreaContainer } from '../inputs/SessionInput';
 
 const StyledInputContainer = styled(Flex)`
+  ${StyledTextAreaContainer} {
+    overflow-y: hidden;
     textarea {
       cursor: default;
-    overflow: hidden;
-    top: 14px;
+      top: 10px;
+    }
   }
 `;
 

ts/components/inputs/SessionInput.tsx

@@ -99,9 +99,12 @@ export const StyledTextAreaContainer = styled(motion.div)<{
 }>`
   display: flex;
   align-items: center;
-  overflow: hidden;
+  overflow-y: ${props => (props.noValue ? 'hidden' : 'auto')};
   position: relative;
-  height: ${props => (props.textSize ? `calc(var(--font-size-${props.textSize}) * 4)` : '48px')};
+  min-height: 48px;
+  height: 100%;
+  max-height: ${props =>
+    props.textSize ? `calc(var(--font-size-${props.textSize}) * 4)` : '48px'};
   width: 100%;
   margin: var(--margins-sm) var(--margins-md);
 

ts/components/leftpane/overlay/OverlayInvite.tsx

@@ -56,10 +56,11 @@ const StyledButtonerContainer = styled.div`
 const StyledInputContainer = styled(Flex)`
   ${StyledTextAreaContainer} {
     margin: var(--margins-sm);
+    overflow-y: hidden;
+
     textarea {
       cursor: default;
-      overflow: hidden;
-      top: 12px;
+      top: 10px;
     }
   }
 `;