Skip to content

fix(ui): prevent bio textarea overlap and add character limit (#26903) #26969

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shoaibansari5398 wants to merge 4 commits into
base: main
Choose a base branch
from
+26 −8
Open

fix(ui): prevent bio textarea overlap and add character limit (#26903) #26969

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
aeb3233
fix(ui): prevent bio textarea overlap and add character limit (#26903)
shoaibansari5398 Jan 18, 2026
b872f73
fix(ui): truncate bio input to 256 chars
shoaibansari5398 Jan 18, 2026
5f8fc2d
fix(ui): truncate bio at word boundary
shoaibansari5398 Jan 18, 2026
004c223
fix(ui): add defensive check for bio value
shoaibansari5398 Jan 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 21 additions & 3 deletions apps/web/components/getting-started/steps-views/UserProfile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,17 @@ interface UserProfileProps {
user: RouterOutputs["viewer"]["me"]["get"];
}

const MAX_BIO_LENGTH = 256;

const UserProfile = ({ user }: UserProfileProps) => {
const { t } = useLocale();
const avatarRef = useRef<HTMLInputElement>(null);
const { setValue, handleSubmit, getValues } = useForm<FormData>({
const { setValue, handleSubmit, getValues, watch } = useForm<FormData>({
defaultValues: { bio: user?.bio || "" },
});

const bio = watch("bio") ?? "";

const { data: eventTypes } = trpc.viewer.eventTypes.list.useQuery();
const [imageSrc, setImageSrc] = useState<string>(user?.avatar || "");
const utils = trpc.useUtils();
Expand Down Expand Up @@ -152,13 +156,27 @@ const UserProfile = ({ user }: UserProfileProps) => {
<fieldset className="mt-8">
<Label className="text-default mb-2 block text-sm font-medium">{t("about")}</Label>
<Editor
maxHeight="200px"
getText={() => md.render(getValues("bio") || user?.bio || "")}
setText={(value: string) => setValue("bio", turndown(value))}
setText={(value: string) => {
let markdown = turndown(value);
if (markdown.length > MAX_BIO_LENGTH) {
const sliced = markdown.slice(0, MAX_BIO_LENGTH);
const lastSpace = sliced.lastIndexOf(" ");
markdown = lastSpace > 0 ? sliced.slice(0, lastSpace) : sliced;
}
setValue("bio", markdown);
}}
excludedToolbarItems={["blockType"]}
firstRender={firstRender}
setFirstRender={setFirstRender}
/>
<p className="text-default mt-2 font-sans text-sm font-normal">{t("few_sentences_about_yourself")}</p>
<div className="mt-2 flex items-center justify-between">
<p className="text-default font-sans text-sm font-normal">{t("few_sentences_about_yourself")}</p>
<p className="text-subtle text-xs">
{bio.length}/{MAX_BIO_LENGTH}
</p>
</div>
</fieldset>
<Button
loading={mutation.isPending}
Expand Down
10 changes: 5 additions & 5 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2131,7 +2131,7 @@ __metadata:
postcss-cli: "npm:11.0.1"
postcss-import: "npm:16.1.0"
postcss-prefixer: "npm:3.0.0"
postcss-prefixwrap: "npm:1.46.0"
postcss-prefixwrap: "npm:1.57.0"
react-use: "npm:17.6.0"
tailwind-merge: "npm:1.13.2"
tailwindcss: "npm:4.1.17"
Expand Down Expand Up @@ -32606,12 +32606,12 @@ __metadata:
languageName: node
linkType: hard

"postcss-prefixwrap@npm:1.46.0":
version: 1.46.0
resolution: "postcss-prefixwrap@npm:1.46.0"
"postcss-prefixwrap@npm:1.57.0":
version: 1.57.0
resolution: "postcss-prefixwrap@npm:1.57.0"
peerDependencies:
postcss: "*"
checksum: 10/94f02abbd2ce4e2c685807316c53659bdfd653121408221a83e5321942fb8dd8d2af597643d32312cda215db87d1bb9b75ee382bec4a65146864f49874691478
checksum: 10/56f334040a22f5cea8324d1c0fa836b3c3c4bd6ab6dbd800da49f3bb75f48fef7565ac9b56474e365af47a9cebf63e795d4cd8c02d773de07dd064e8a946940c
languageName: node
linkType: hard

Expand Down
Loading