[Bug]: Group names need a stricter frontend length limit (long names break sidebar layout)

[bjrump]

Description

A long group name (Gruppenname) can break the sidebar group-row layout and, in the worst case, push the row's action controls (the … menu / expand chevron) out of reach. The robust fix is to guarantee the name truncates so the row width is always stable and all controls stay clickable — not to tighten the character limit. A character-based maxLength is fragile (it still overflows on long unbroken words, wide/emoji characters, or a narrow/collapsed sidebar) and only moves the arbitrary boundary instead of fixing the layout.

Steps to Reproduce

1. Create or edit a group and give it a very long name (try both a long sentence and a long single word with no spaces).
2. Open the sidebar and look at the group row; also check the dashboard group card.
3. Try to use the group row's action menu (MoreVertical / …) and the expand chevron.

Expected Behavior

• The group name truncates with an ellipsis; the full name stays available via the existing title tooltip.
• The group row keeps a fixed width regardless of name length — the chevron and … action menu stay visible and clickable.
• This holds for long unbroken words, wide characters/emojis, and the narrow/collapsed sidebar.

Actual Behavior

• A long group name shifts the sidebar row layout.
• Some buttons in the row can no longer be clicked.

Environment

• Component: Frontend
• Browser (if frontend): any
• OS: any

Additional Context

Preferred approach: robust truncation, not a stricter limit.

Truncation already exists at the visible render sites:

• Sidebar row: truncate on the name span with a min-w-0 chain (apps/frontend/components/sidebar/AppSidebar.tsx:441-452; SidebarGroup is w-full min-w-0 in apps/frontend/components/ui/sidebar.tsx:363).
• Dashboard group card: min-w-0 truncate on CardTitle (apps/frontend/components/common/CardTemplate.tsx:73).

On paper this flex chain is correct, so simply lowering MAX_NAME_LENGTH would not fix the underlying defect. The actual task is:

1. Reproduce the specific case where the row still overflows (long unbroken word vs. long sentence; expanded vs. collapsed sidebar) and pinpoint where truncation actually fails — likely a nested element missing min-w-0/overflow-hidden, or a long unbroken word needing break-all/break-words.
2. Fix that so the chevron and … menu can never be pushed out of the clickable area.

Secondary (sanity bound only, not the fix): keep a generous MAX_NAME_LENGTH (currently 40 in apps/frontend/components/groups/CreateGroupDialog.tsx:25 and apps/frontend/components/groups/EditGroupDialog.tsx:67) as a storage/UX guard, and add a matching maxLength attribute on the name <Input> so the limit is enforced at the input level. Do not rely on this for layout stability.

Related (out of scope): the backend name schema only validates z.string().min(1) with no maximum (apps/api/src/routes/team.ts:257 and :676), so any frontend limit can be bypassed via the API. Worth tracking separately.