Fix textarea styles

apps/web/package.json

@@ -32,6 +32,7 @@
     "partysocket": "0.0.12",
     "postgres": "^3.3.5",
     "svelte": "^4.0.5",
+    "svelte-autosize": "^1.1.0",
     "tiny-invariant": "^1.3.1"
   },
   "devDependencies": {

apps/web/src/routes/(app)/projects/[projectId]/topics/[topicId]/chat/chat.svelte

@@ -9,8 +9,9 @@
   import clsx from 'clsx';
   import { createMessagesStore } from '$lib/stores/messages';
   import Message from '$lib/components/message.svelte';
-  import TextAreaAutosize from '$lib/components/textAreaAutosize.svelte';
   import throttle from 'just-throttle';
+  // @ts-expect-error
+  import autosize from 'svelte-autosize';
 
   export let data: PageData;
   export let form: ActionData;
@@ -72,6 +73,18 @@
   $: userClass = (authorId: string) =>
     authorId === data.user.id ? 'text-info' : 'text-primary-content';
 
+  function textareaKeyDown(e: KeyboardEvent) {
+    if (!e.key || (!e.metaKey && !e.shiftKey)) {
+      return;
+    }
+
+    // call handleSubmit if enter + cmd or enter + shift is pressed
+    if (e.key === 'Enter' && (e.metaKey || e.shiftKey)) {
+      e.preventDefault();
+      document.getElementById('send-btn')?.click();
+    }
+  }
+
   async function handleSubmit(event: { currentTarget: EventTarget & HTMLFormElement }) {
     const formData = new FormData(event.currentTarget);
     const content = formData.get('content')?.toString() ?? '';
@@ -177,21 +190,12 @@
     class="flex bg-base-300 sticky bottom-0 w-full join-horizontal p-4 sm:rounded-none"
     bind:clientHeight={inputHeight}
   >
-    <TextAreaAutosize
-      keydown={(e) => {
-        if (!e.key || (!e.metaKey && !e.shiftKey)) {
-          return;
-        }
-
-        // call handleSubmit if enter + cmd or enter + shift is pressed
-        if (e.key === 'Enter' && (e.metaKey || e.shiftKey)) {
-          e.preventDefault();
-          document.getElementById('send-btn')?.click();
-        }
-      }}
+    <textarea
+      on:keydown={textareaKeyDown}
+      use:autosize
       name="content"
-      className="join-item"
-      class="input input-bordered w-full"
+      style="overflow-x: hidden;"
+      class="input input-bordered w-full join-item max-h-36 !overflow-x-hidden resize-none"
     />
     <button id="send-btn" type="submit" class="join-item btn btn-ghost rounded-lg self-center"
       >Send</button

yarn.lock

@@ -1099,6 +1099,11 @@ autoprefixer@^10.4.14:
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
+autosize@*:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/autosize/-/autosize-6.0.1.tgz#64ee78dd7029be959eddd3afbbd33235b957e10f"
+  integrity sha512-f86EjiUKE6Xvczc4ioP1JBlWG7FKrE13qe/DxBCpe8GCipCq2nFw73aO8QEBKHfSbYGDN5eB9jXWKen7tspDqQ==
+
 axobject-query@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-3.2.1.tgz#39c378a6e3b06ca679f29138151e45b2b32da62a"
@@ -3590,6 +3595,13 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+svelte-autosize@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/svelte-autosize/-/svelte-autosize-1.1.0.tgz#60ccc1649e0f911f8af1d53c0cfed3cf365b834c"
+  integrity sha512-CPHq/K0ssrwuHBxFCCOtpWtXZwk4edjEIZ2mJT4KKzjSBq+CO9nOmstjpOh5TpoOf/4MtDcwAwnWmktqANjU6A==
+  dependencies:
+    autosize "*"
+
 svelte-check@^3.4.3:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/svelte-check/-/svelte-check-3.5.2.tgz#d6e650996afbe80f5e5b9b02d3fb9489f7d6fb8a"