From 41bf4eb73a272bfc7f0d5fac36db02445ea58407 Mon Sep 17 00:00:00 2001
From: Jack Kingsman <jack.kingsman@gmail.com>
Date: Fri, 20 Feb 2026 16:42:04 -0800
Subject: [PATCH] Hide character counter for short messages on mobile

---
 frontend/src/components/MessageInput.tsx | 66 +++++++++++++++++-------
 1 file changed, 48 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/MessageInput.tsx b/frontend/src/components/MessageInput.tsx
index f8f628c..9ceeebb 100644
--- a/frontend/src/components/MessageInput.tsx
+++ b/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,25 +208,53 @@ export const MessageInput = forwardRef<MessageInputHandle, MessageInputProps>(fu
         </Button>
       </div>
       {showCharCounter && (
-        <div className="flex items-center justify-end gap-2 text-xs">
-          <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}b{remaining < 0 && ` (${remaining})`}
-          </span>
-          {warningMessage && (
-            <span className={cn(limitState === 'error' ? 'text-red-500' : 'text-yellow-500')}>
-              — {warningMessage}
+        <>
+          <div className="hidden sm:flex items-center justify-end gap-2 text-xs">
+            <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>
+
+          {(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>
           )}
-        </div>
+        </>
       )}
     </form>
   );