Hide character counter for short messages on mobile

frontend/src/components/MessageInput.tsx

@@ -166,8 +166,10 @@ export const MessageInput = forwardRef<MessageInputHandle, MessageInputProps>(fu
   // For repeater mode, always allow submit (empty = guest login)
   const canSubmit = isRepeaterMode ? true : text.trim().length > 0;
 
-  // Show character counter for messages (not repeater mode or raw)
+  // Show counter for messages (not repeater mode or raw).
+  // Desktop: always visible. Mobile: only show count after 100 characters.
   const showCharCounter = !isRepeaterMode && limits !== null;
+  const showMobileCounterValue = text.length > 100;
 
   return (
     <form
@@ -206,7 +208,8 @@ export const MessageInput = forwardRef<MessageInputHandle, MessageInputProps>(fu
         </Button>
       </div>
       {showCharCounter && (
-        <div className="flex items-center justify-end gap-2 text-xs">
+        <>
+          <div className="hidden sm:flex items-center justify-end gap-2 text-xs">
             <span
               className={cn(
                 'tabular-nums',
@@ -217,7 +220,8 @@ export const MessageInput = forwardRef<MessageInputHandle, MessageInputProps>(fu
                     : 'text-muted-foreground'
               )}
             >
-            {textByteLen}/{limits!.hardLimit}b{remaining < 0 && ` (${remaining})`}
+              {textByteLen}/{limits!.hardLimit}
+              {remaining < 0 && ` (${remaining})`}
             </span>
             {warningMessage && (
               <span className={cn(limitState === 'error' ? 'text-red-500' : 'text-yellow-500')}>
@@ -225,6 +229,32 @@ export const MessageInput = forwardRef<MessageInputHandle, MessageInputProps>(fu
               </span>
             )}
           </div>
+
+          {(showMobileCounterValue || warningMessage) && (
+            <div className="flex sm:hidden items-center justify-end gap-2 text-xs">
+              {showMobileCounterValue && (
+                <span
+                  className={cn(
+                    'tabular-nums',
+                    limitState === 'error' || limitState === 'danger'
+                      ? 'text-red-500 font-medium'
+                      : limitState === 'warning'
+                        ? 'text-yellow-500'
+                        : 'text-muted-foreground'
+                  )}
+                >
+                  {textByteLen}/{limits!.hardLimit}
+                  {remaining < 0 && ` (${remaining})`}
+                </span>
+              )}
+              {warningMessage && (
+                <span className={cn(limitState === 'error' ? 'text-red-500' : 'text-yellow-500')}>
+                  — {warningMessage}
+                </span>
+              )}
+            </div>
+          )}
+        </>
       )}
     </form>
   );