Chat message placeholder adjustment

src/app/features/chat/chat-messages/components/message-composer/chat-message-composer.component.html

@@ -132,7 +132,7 @@
       (dragleave)="onDragLeave($event)"
       (drop)="onDrop($event)"
     >
-      <div class="absolute bottom-3 right-3 z-10 flex items-center gap-2">
+      <div class="absolute bottom-3 right-3 z-10 flex items-center gap-2 m-0.5">
         @if (klipy.isEnabled()) {
           <button
             #klipyTrigger
@@ -184,9 +184,10 @@
         (dragleave)="onDragLeave($event)"
         (drop)="onDrop($event)"
         placeholder="Type a message..."
-        class="chat-textarea w-full rounded-[1.35rem] border border-border py-2 pl-4 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
+        class="chat-textarea w-full rounded-[1.35rem] border border-border pl-4 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
         [class.border-dashed]="dragActive()"
         [class.border-primary]="dragActive()"
+        [class.chat-textarea-expanded]="textareaExpanded()"
         [class.ctrl-resize]="ctrlHeld()"
         [class.pr-16]="!klipy.isEnabled()"
         [class.pr-40]="klipy.isEnabled()"

src/app/features/chat/chat-messages/components/message-composer/chat-message-composer.component.scss

@@ -1,12 +1,24 @@
 .chat-textarea {
-  --textarea-bg: hsl(40deg 3.7% 15.9% / 87%);
+  --textarea-bg: hsl(40deg 3.7% 15.9% / 25%);
+  --textarea-collapsed-padding-y: 18px;
+  --textarea-expanded-padding-y: 8px;
+
   background: var(--textarea-bg);
   height: 62px;
   min-height: 62px;
   max-height: 520px;
   overflow-y: hidden;
+  padding-top: var(--textarea-collapsed-padding-y);
+  padding-bottom: var(--textarea-collapsed-padding-y);
   resize: none;
-  transition: height 0.12s ease;
+  transition:
+    height 0.12s ease,
+    padding 0.12s ease;
+
+  &.chat-textarea-expanded {
+    padding-top: var(--textarea-expanded-padding-y);
+    padding-bottom: var(--textarea-expanded-padding-y);
+  }
 
   &.ctrl-resize {
     resize: vertical;

src/app/features/chat/chat-messages/components/message-composer/chat-message-composer.component.ts

@@ -45,6 +45,8 @@ type LocalFileWithPath = File & {
   path?: string;
 };
 
+const DEFAULT_TEXTAREA_HEIGHT = 62;
+
 @Component({
   selector: 'app-chat-message-composer',
   standalone: true,
@@ -91,6 +93,7 @@ export class ChatMessageComposerComponent implements AfterViewInit, OnDestroy {
   readonly dragActive = signal(false);
   readonly inputHovered = signal(false);
   readonly ctrlHeld = signal(false);
+  readonly textareaExpanded = signal(false);
 
   messageContent = '';
   pendingFiles: File[] = [];
@@ -351,6 +354,7 @@ export class ChatMessageComposerComponent implements AfterViewInit, OnDestroy {
     element.style.height = 'auto';
     element.style.height = Math.min(element.scrollHeight, 520) + 'px';
     element.style.overflowY = element.scrollHeight > 520 ? 'auto' : 'hidden';
+    this.syncTextareaExpandedState();
   }
 
   onInputFocus(): void {
@@ -621,15 +625,26 @@ export class ChatMessageComposerComponent implements AfterViewInit, OnDestroy {
     if (!root)
       return;
 
+    this.syncTextareaExpandedState();
     this.emitHeight();
 
     if (typeof ResizeObserver === 'undefined')
       return;
 
-    this.resizeObserver = new ResizeObserver(() => this.emitHeight());
+    this.resizeObserver = new ResizeObserver(() => {
+      this.syncTextareaExpandedState();
+      this.emitHeight();
+    });
+
     this.resizeObserver.observe(root);
   }
 
+  private syncTextareaExpandedState(): void {
+    const textarea = this.messageInputRef?.nativeElement;
+
+    this.textareaExpanded.set(Boolean(textarea && textarea.offsetHeight > DEFAULT_TEXTAREA_HEIGHT));
+  }
+
   private emitHeight(): void {
     const root = this.composerRoot?.nativeElement;