[TOOL-4028] Dashboard: Limit team name to 32 chars (#6685)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a maximum length restriction for the `teamName` input field in the `TeamGeneralSettingsPageUI` component and applies this restriction to the `TeamInfoFormUI` component as well, enhancing user experience by preventing excessively long team names.

### Detailed summary
- Added `maxLength` attribute with a value of `32` to the `teamName` input in `TeamGeneralSettingsPageUI`.
- Updated the `onChange` handler in `TeamGeneralSettingsPageUI` to set the `teamName` directly from the input value.
- Introduced a new constant `maxTeamNameLength` in `TeamInfoForm.tsx` set to `32`.
- Added `maxLength={maxTeamNameLength}` to the input field in `TeamInfoFormUI`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/app/login/onboarding/team-onboarding/TeamInfoForm.tsx

@@ -155,6 +155,8 @@ export function TeamInfoFormUI(props: {
     });
   }
 
+  const maxTeamNameLength = 32;
+
   return (
     <div className="rounded-lg border bg-card ">
       <Form {...form}>
@@ -199,6 +201,7 @@ export function TeamInfoFormUI(props: {
                       placeholder="Company Inc."
                       autoComplete="off"
                       {...field}
+                      maxLength={maxTeamNameLength}
                     />
                   </FormControl>
                   <FormDescription>

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPageUI.tsx

@@ -85,8 +85,9 @@ function TeamNameFormControl(props: {
     >
       <Input
         value={teamName}
+        maxLength={maxTeamNameLength}
         onChange={(e) => {
-          setTeamName(e.target.value.slice(0, maxTeamNameLength));
+          setTeamName(e.target.value);
         }}
         className="md:w-[450px]"
       />