From 9696e0b8b10abf9d69fa2cb2c4629cfd0b982dcc Mon Sep 17 00:00:00 2001
From: Brandon Dow <bdow@homebound.com>
Date: Wed, 27 Sep 2023 16:02:13 -0400
Subject: [PATCH] fix: Improve layout for multiline TextFields

Adds padding for multiline textfields to match the height of their single line counter parts
---
 src/inputs/TextFieldBase.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/inputs/TextFieldBase.tsx b/src/inputs/TextFieldBase.tsx
index 60f56395e..839ba2ae3 100644
--- a/src/inputs/TextFieldBase.tsx
+++ b/src/inputs/TextFieldBase.tsx
@@ -142,9 +142,11 @@ export function TextFieldBase<X extends Only<TextFieldXss, X>>(props: TextFieldB
           .mhPx(compactFieldHeight - maybeSmaller).$),
     },
     input: {
-      ...Css.w100.mw0.outline0.fg1.bgColor(bgColor).if(multiline).br4.$,
+      ...Css.w100.mw0.outline0.fg1.bgColor(bgColor).$,
       // Not using Truss's inline `if` statement here because `addIn` properties do not respect the if statement.
       ...(contrast && Css.addIn("&::selection", Css.bgGray800.$).$),
+      // For "multiline" fields we add top and bottom padding of 7px for compact, or 11px for non-compact, to properly match the height of the single line fields
+      ...(multiline ? Css.br4.h100.pyPx(compact ? 7 : 11).add("resize", "none").$ : Css.truncate.$),
     },
     hover: Css.bgColor(hoverBgColor).if(contrast).bGray600.$,
     focus: Css.bBlue700.if(contrast).bBlue500.$,
@@ -205,7 +207,7 @@ export function TextFieldBase<X extends Only<TextFieldXss, X>>(props: TextFieldB
               )}
               {multiline
                 ? (inputProps.value as string | undefined)?.split("\n\n").map((p, i) => (
-                    <p key={i} css={Css.my1.$}>
+                    <p key={i}>
                       {p.split("\n").map((sentence, j) => (
                         <span key={j}>
                           {sentence}
@@ -247,7 +249,6 @@ export function TextFieldBase<X extends Only<TextFieldXss, X>>(props: TextFieldB
                   ...fieldStyles.input,
                   ...(inputProps.disabled ? fieldStyles.disabled : {}),
                   ...(showHover ? fieldStyles.hover : {}),
-                  ...(multiline ? Css.h100.py1.add("resize", "none").$ : Css.truncate.$),
                   ...xss,
                 }}
                 {...tid}