fix: large spacing + padding issue in input box

arc53 · Jun 25, 2024 · 85c648d · 85c648d
1 parent a6ff606
commit 85c648d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
@@ -243,7 +243,7 @@ export default function Conversation() {
             placeholder={t('inputPlaceholder')}
             contentEditable
             onPaste={handlePaste}
-            className={`max-h-24 min-h-[3.8rem] w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-white py-2 pl-4 pr-9 text-base leading-10 opacity-100 focus:outline-none dark:bg-raisin-black dark:text-bright-gray`}
+            className={`inputbox-style max-h-24 w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-white pt-5 pb-[22px] text-base leading-tight opacity-100 focus:outline-none dark:bg-raisin-black dark:text-bright-gray`}
             onKeyDown={(e) => {
               if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -412,3 +412,8 @@ template {
 .bottom-safe {
   bottom: env(safe-area-inset-bottom, 0);
 }
+
+.inputbox-style[contenteditable] {
+  padding-left: 36px;
+  padding-right: 36px;
+}