Skip to content

Truncated names and values can't be read in full #4111

Closed

Description

@AlexAndBear

Initial Checklist

  • I understand this is a bug report and questions should be posted in the Community Discussions
  • I searched issues and couldn’t find anything (or linked relevant results below)

Bug Description

Lots of places truncate user content (names, emails, paths, notes) with no way to read the full value. A few even clip it without an ellipsis. We want one convention everywhere: truncated user content gets a native title with the full value, like ResourceName.vue already does.

We use title instead of v-oc-tooltip because it's less intrusive: it only shows after a short hover delay, so it doesn't get in the way when moving across lists.

Design system (fixes many callers at once):

  • OcBreadcrumbItem.vue – breadcrumb folder/space names
  • OcModal.vue – modal titles with names ("Rename »…«", "Delete user …")
  • OcMobileDrop.vue – mobile drawer header of the "…" menus
  • OcFilterChip.vue – selected tag / "Shared by" / group in filter chips
  • OcDefinitionList.vue – .details-list dd values in the sidebar details are hard-clipped; these should wrap instead

Per place:

  • web-pkg: parent folder in ResourceListItem.vue, space description in ResourceTile.vue, ItemFilter.vue options, AccountsSwitch.vue name/email (clipped without ellipsis), tag in SearchHighlights.vue, YjsCollaborators.vue, MentionMenu.vue, WebDAV path/URL in WebDavDetails.vue (tooltip only)
  • web-runtime: UserMenu.vue name/email (clipped without ellipsis), app token note in AppTokens.vue, Announcement.vue, link in Notifications.vue, CalDAV URL in accountCalendar.vue
  • admin settings: group name in GroupsList.vue, sidebar header in views/Users.vue and views/Groups.vue
  • files: tag options in TagsSelect.vue, invite search results in AutocompleteItem.vue (secondary lines clipped without ellipsis)
  • app store: AppTitle.vue, AppListItem.vue, AppTile.vue, AppDetailsGallery.vue, AppResources.vue
  • contacts: AddressBooksList.vue, ContactsListItem.vue, ContactsList.vue
  • mail: subject/sender/recipients in MailDetails.vue ("To:" doesn't truncate at all), MailListItem.vue, MailAppointmentItem.vue, MailboxTree.vue
  • ocm: token in OutgoingInvitations.vue

Not part of this: the admin Users/Spaces tables (#4101), the EPUB reader, and intentional excerpts (search snippet, mail preview).

Reproduction Steps

  1. Give a user, folder, space, tag, app token or contact a long name without spaces
  2. Look at it in the places listed above and hover it

Expected Outcome

The value is truncated with an ellipsis and hovering shows the full value.

Actual Outcome

The value is cut off (sometimes without an ellipsis) and the full value can't be read there.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions