More css

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);
 }

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>

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 {