webui: run format, ignore src/types.ts
diff --git a/loop/webui/src/web-components/sketch-chat-input.test.ts b/loop/webui/src/web-components/sketch-chat-input.test.ts
index de41c31..a727c50 100644
--- a/loop/webui/src/web-components/sketch-chat-input.test.ts
+++ b/loop/webui/src/web-components/sketch-chat-input.test.ts
@@ -140,23 +140,27 @@
expect(content).toBe(testContent);
});
-test("resizes when user enters more text than will fit", async ({
- mount,
-}) => {
+test("resizes when user enters more text than will fit", async ({ mount }) => {
const testContent = "Test message\n\n\n\n\n\n\n\n\n\n\n\n\nends here.";
const component = await mount(SketchChatInput, {
props: {
- content: '',
+ content: "",
},
});
- const origHeight = await component.evaluate((el: SketchChatInput) => el.chatInput.style.height);
+ const origHeight = await component.evaluate(
+ (el: SketchChatInput) => el.chatInput.style.height,
+ );
// Enter very tall text in the textarea
await component.locator("#chatInput").fill(testContent);
// Check that textarea resized
- const newHeight = await component.evaluate((el: SketchChatInput) => el.chatInput.style.height);
- expect(Number.parseInt(newHeight)).toBeGreaterThan(Number.parseInt(origHeight));
+ const newHeight = await component.evaluate(
+ (el: SketchChatInput) => el.chatInput.style.height,
+ );
+ expect(Number.parseInt(newHeight)).toBeGreaterThan(
+ Number.parseInt(origHeight),
+ );
});
test("updates content when receiving update-content event", async ({
diff --git a/loop/webui/src/web-components/sketch-chat-input.ts b/loop/webui/src/web-components/sketch-chat-input.ts
index 483fbf0..c181724 100644
--- a/loop/webui/src/web-components/sketch-chat-input.ts
+++ b/loop/webui/src/web-components/sketch-chat-input.ts
@@ -42,7 +42,7 @@
min-height: 40px;
max-height: 300px;
background: #f7f7f7;
- overflow-y: auto;
+ overflow-y: auto;
box-sizing: border-box; /* Ensure padding is included in height calculation */
line-height: 1.4; /* Consistent line height for better height calculation */
}
@@ -123,13 +123,13 @@
adjustChatSpacing() {
if (!this.chatInput) return;
-
+
// Reset height to minimal value to correctly calculate scrollHeight
- this.chatInput.style.height = 'auto';
-
+ this.chatInput.style.height = "auto";
+
// Get the scroll height (content height)
const scrollHeight = this.chatInput.scrollHeight;
-
+
// Set the height to match content (up to max-height which is handled by CSS)
this.chatInput.style.height = `${scrollHeight}px`;
}