feat: only center textarea placeholder text and not value in sessioninput

ts/components/dialog/UserDetailsDialog.tsx

@@ -16,8 +16,6 @@ import { SessionWrapperModal } from '../SessionWrapperModal';
 
 const StyledInputContainer = styled(Flex)`
   textarea {
-    position: unset;
-    top: unset;
     overflow: hidden;
   }
 `;

ts/components/inputs/SessionInput.tsx

@@ -89,6 +89,7 @@ const StyledInput = styled(motion.input)<{
 `;
 
 const StyledTextAreaContainer = styled(motion.div)<{
+  noValue: boolean;
   error: boolean;
   centerText?: boolean;
   textSize?: TextSizes;
@@ -119,9 +120,10 @@ const StyledTextAreaContainer = styled(motion.div)<{
     border: none;
     background: transparent;
 
-    position: absolute;
-    top: ${props =>
-      props.textSize ? `calc(var(--font-size-${props.textSize}) + 5px)` : 'calc(12px + 5px)'};
+    ${props =>
+      props.noValue &&
+      `position: absolute;
+    top: ${props.textSize ? `calc(var(--font-size-${props.textSize}) + 5px)` : 'calc(12px + 5px)'};`}
 
     resize: none;
     overflow-wrap: break-word;
@@ -306,6 +308,7 @@ export const SessionInput = (props: Props) => {
   };
 
   const containerProps = {
+    noValue: isEmpty(value),
     error: Boolean(error),
     centerText,
     textSize,

ts/components/leftpane/overlay/OverlayInvite.tsx

@@ -54,6 +54,7 @@ const StyledButtonerContainer = styled.div`
 
 const StyledInputContainer = styled(Flex)`
   textarea {
+    position: absolute;
     top: 8px;
   }
 `;