Merge pull request #1286 from Umang-Khemka/fix/navbar-layout

feat: add long word validation for name input in onboarding and settings

Author: rohan-pandeyy

frontend/src/components/Navigation/Navbar/Navbar.tsx

@@ -81,7 +81,13 @@ export function Navbar() {
         <ThemeSelector />
         <div className="flex items-center space-x-2">
           <span className="hidden text-sm sm:inline-block">
-            Welcome <span className="text-muted-foreground">{userName}</span>
+            Welcome{' '}
+            <span
+              className="text-muted-foreground inline-block max-w-[150px] truncate align-bottom"
+              title={userName}
+            >
+              {userName?.split(' ')[0] ?? ''}
+            </span>
           </span>
           <Link to="/settings#account" className="p-2">
             <img

frontend/src/components/OnboardingSteps/AvatarSelectionStep.tsx

@@ -40,6 +40,7 @@ export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
   const isEditing = useSelector(
     (state: RootState) => state.onboarding.isEditing,
   );
+  const [longWordError, setLongWordError] = useState(false);
 
   useEffect(() => {
     if (
@@ -56,6 +57,13 @@ export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
   };
 
   const handleNameChange = (value: string) => {
+    const words = value.split(' ');
+    const hasLongWord = words.some((word) => word.length > 30);
+    if (hasLongWord) {
+      setLongWordError(true);
+      return;
+    }
+    setLongWordError(false);
     setLocalName(value);
   };
 
@@ -115,6 +123,11 @@ export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
               onChange={(e) => handleNameChange(e.target.value)}
               className="h-8 text-sm placeholder:text-sm"
             />
+            {longWordError && (
+              <p className="mt-2 text-xs text-red-500">
+                A single word in your name cannot exceed 30 characters.
+              </p>
+            )}
           </div>
 
           {/* Avatar Grid */}
@@ -152,7 +165,7 @@ export const AvatarSelectionStep: React.FC<AvatarNameSelectionStepProps> = ({
           <Button
             className="cursor-pointer px-4 py-1 text-sm"
             onClick={handleNextClick}
-            disabled={!name || !selectedAvatar}
+            disabled={!name || !selectedAvatar || longWordError}
           >
             Next
           </Button>

frontend/src/pages/SettingsPage/components/AccountSettingsCard.tsx

@@ -19,6 +19,7 @@ const AccountSettingsCard: React.FC = () => {
     return avatars.includes(stored) ? stored : '';
   });
   const [nameError, setNameError] = useState(false);
+  const [longWordError, setLongWordError] = useState(false);
 
   // The redundant useEffect has been removed.
 
@@ -27,10 +28,15 @@ const AccountSettingsCard: React.FC = () => {
   };
 
   const handleNameChange = (value: string) => {
-    setLocalName(value);
-    if (nameError) {
-      setNameError(false);
+    const words = value.split(' ');
+    const hasLongWord = words.some((word) => word.length > 30);
+    if (hasLongWord) {
+      setLongWordError(true);
+      return;
     }
+    setLongWordError(false);
+    setLocalName(value);
+    if (nameError) setNameError(false);
   };
 
   const handleSave = () => {
@@ -78,6 +84,11 @@ const AccountSettingsCard: React.FC = () => {
                   : ''
               }`}
             />
+            {longWordError && (
+              <p className="mt-2 text-xs text-red-500">
+                A single word in your name cannot exceed 30 characters.
+              </p>
+            )}
           </div>
 
           {/* Avatar Section */}
@@ -115,7 +126,7 @@ const AccountSettingsCard: React.FC = () => {
         <Button
           className="mt-4 w-auto bg-blue-500 px-6 py-2 text-sm font-medium text-white hover:bg-blue-600"
           onClick={handleSave}
-          disabled={!selectedAvatar}
+          disabled={!selectedAvatar || longWordError}
         >
           Save Changes
         </Button>