From 60c2a18dbe3b3c0f98746d238d5c80a5e78e32a8 Mon Sep 17 00:00:00 2001
From: Talon <talon@iamtalon.me>
Date: Tue, 2 Sep 2025 22:48:55 +0200
Subject: [PATCH] More css

---
 .../src/components/base/BaseButton.vue        | 16 ++++++++++-
 .../src/components/chat/InputActions.vue      |  8 +++---
 .../src/components/chat/MessageInput.vue      | 27 ++++++++++++++++++-
 3 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/frontend-vue/src/components/base/BaseButton.vue b/frontend-vue/src/components/base/BaseButton.vue
index b8854b2..da2360f 100644
--- a/frontend-vue/src/components/base/BaseButton.vue
+++ b/frontend-vue/src/components/base/BaseButton.vue
@@ -24,7 +24,7 @@
 interface Props {
   type?: 'button' | 'submit' | 'reset'
   variant?: 'primary' | 'secondary' | 'danger' | 'ghost'
-  size?: 'sm' | 'md' | 'lg'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
   disabled?: boolean
   loading?: boolean
   ariaLabel?: string
@@ -84,6 +84,13 @@ const handleKeydown = (event: KeyboardEvent) => {
 }
 
 /* Sizes */
+.base-button--xs {
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
+  min-height: 2.25rem; /* 36px - smaller but still usable */
+  min-width: 2.25rem;
+}
+
 .base-button--sm {
   padding: 0.5rem 0.75rem;
   font-size: 0.875rem;
@@ -146,6 +153,13 @@ const handleKeydown = (event: KeyboardEvent) => {
   justify-content: center;
 }
 
+/* Adjust xs ghost buttons for better emoji display */
+.base-button--ghost.base-button--xs {
+  min-height: 2.25rem;
+  min-width: 2.25rem;
+  padding: 0.25rem; /* Tighter padding for emoji buttons */
+}
+
 .base-button--ghost:hover:not(:disabled) {
   background-color: rgba(100, 108, 255, 0.1);
 }
diff --git a/frontend-vue/src/components/chat/InputActions.vue b/frontend-vue/src/components/chat/InputActions.vue
index 81d7426..2889955 100644
--- a/frontend-vue/src/components/chat/InputActions.vue
+++ b/frontend-vue/src/components/chat/InputActions.vue
@@ -2,7 +2,7 @@
   <div class="input-actions">
     <BaseButton
       variant="ghost"
-      size="sm"
+      size="xs"
       @click="$emit('file-upload')"
       aria-label="Upload file"
       :disabled="disabled"
@@ -12,7 +12,7 @@
     
     <BaseButton
       variant="ghost"
-      size="sm"
+      size="xs"
       @click="$emit('camera')"
       aria-label="Take photo"
       :disabled="disabled"
@@ -22,7 +22,7 @@
     
     <BaseButton
       variant="ghost"
-      size="sm"
+      size="xs"
       @click="$emit('voice')"
       aria-label="Record voice message"
       :disabled="disabled"
@@ -67,7 +67,7 @@ defineEmits<{
 .input-actions {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.25rem; /* Reduced gap to save space */
   flex-shrink: 0;
 }
 </style>
\ No newline at end of file
diff --git a/frontend-vue/src/components/chat/MessageInput.vue b/frontend-vue/src/components/chat/MessageInput.vue
index dd1a150..ff1a143 100644
--- a/frontend-vue/src/components/chat/MessageInput.vue
+++ b/frontend-vue/src/components/chat/MessageInput.vue
@@ -84,10 +84,35 @@ defineExpose({
 .message-input {
   display: flex;
   align-items: flex-end;
-  gap: 0.75rem;
+  gap: 0.5rem; /* Reduced gap to save space */
   max-width: 100%;
 }
 
+.message-input :deep(.base-textarea) {
+  flex: 1; /* Take all available space */
+  min-width: 200px; /* Ensure minimum usable width */
+}
+
+.message-input :deep(.input-actions) {
+  flex-shrink: 0; /* Don't allow action buttons to shrink */
+}
+
+/* Mobile responsiveness */
+@media (max-width: 480px) {
+  .message-input-container {
+    padding: 0.75rem; /* Slightly less padding on very small screens */
+  }
+  
+  .message-input :deep(.base-textarea) {
+    min-width: 150px; /* Allow smaller minimum width on mobile */
+  }
+  
+  /* Ensure buttons remain accessible on small screens */
+  .message-input :deep(.input-actions) {
+    gap: 0.125rem; /* Even tighter gap on mobile */
+  }
+}
+
 /* Dark mode */
 @media (prefers-color-scheme: dark) {
   .message-input-container {