From a349b61ffa700069c3c182df0d9bfc9fe0e57de2 Mon Sep 17 00:00:00 2001
From: Mark <mark@heymiyagi.ai>
Date: Tue, 24 Sep 2024 17:57:04 +1000
Subject: [PATCH] Remove fixed padding to allow more seamless integration into
 existing layout systems (e.g. tailwind css)

---
 lib/ContentEditable.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/lib/ContentEditable.tsx b/lib/ContentEditable.tsx
index 39f9930..73f98ce 100644
--- a/lib/ContentEditable.tsx
+++ b/lib/ContentEditable.tsx
@@ -268,7 +268,7 @@ const ContentEditable: React.FC<ContentEditableProps> = ({
   return (
     <div
       className={containerClassName}
-      style={{ display: "flex", alignItems: "center" }}
+      style={{ display: "flex", alignItems: "center", position: "relative" }}
     >
       <div
         ref={divRef}
@@ -280,12 +280,14 @@ const ContentEditable: React.FC<ContentEditableProps> = ({
         aria-label={placeholder ?? ""}
         className={contentEditableClassName}
         style={{
-          padding: "calc((1.5rem * 1.3125)/2) 0 calc((1.5rem * 1.3125)/2) 1rem",
           overflow: "auto",
           height: "auto",
           textAlign: "initial",
           wordBreak: "break-word",
           unicodeBidi: "plaintext",
+          boxSizing: "border-box",
+          minHeight: "1.5rem",
+          lineHeight: "1.5",
         }}
         onInput={(e: React.FormEvent<HTMLDivElement>) => {
           if (disabled) return
@@ -318,6 +320,8 @@ const ContentEditable: React.FC<ContentEditableProps> = ({
             position: "absolute",
             pointerEvents: "none",
             textAlign: "initial",
+            top: 0,
+            left: 0,
           }}
         >
           {placeholder ?? ""}