From 4ae133bb6751a47e26b5ac1013534b31414c130c Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Thu, 23 May 2024 11:39:51 +1000
Subject: [PATCH] feat: only center textarea placeholder text and not value in
 sessioninput

---
 ts/components/dialog/UserDetailsDialog.tsx       | 2 --
 ts/components/inputs/SessionInput.tsx            | 9 ++++++---
 ts/components/leftpane/overlay/OverlayInvite.tsx | 1 +
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/ts/components/dialog/UserDetailsDialog.tsx b/ts/components/dialog/UserDetailsDialog.tsx
index 8d2afadab..f3cd311eb 100644
--- a/ts/components/dialog/UserDetailsDialog.tsx
+++ b/ts/components/dialog/UserDetailsDialog.tsx
@@ -16,8 +16,6 @@ import { SessionWrapperModal } from '../SessionWrapperModal';
 
 const StyledInputContainer = styled(Flex)`
   textarea {
-    position: unset;
-    top: unset;
     overflow: hidden;
   }
 `;
diff --git a/ts/components/inputs/SessionInput.tsx b/ts/components/inputs/SessionInput.tsx
index 895e03255..b18a6c902 100644
--- a/ts/components/inputs/SessionInput.tsx
+++ b/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,
diff --git a/ts/components/leftpane/overlay/OverlayInvite.tsx b/ts/components/leftpane/overlay/OverlayInvite.tsx
index cb3cbb3fe..f6200d29c 100644
--- a/ts/components/leftpane/overlay/OverlayInvite.tsx
+++ b/ts/components/leftpane/overlay/OverlayInvite.tsx
@@ -54,6 +54,7 @@ const StyledButtonerContainer = styled.div`
 
 const StyledInputContainer = styled(Flex)`
   textarea {
+    position: absolute;
     top: 8px;
   }
 `;