Menu List Styles

File Information

• Path: app/assets/scss/components/_menu-list.scss
• Purpose: Menu list item styles with active and hover states
• Type: Component

Overview

This file contains styles for .menu-list dropdowns (list items, active and hover states, size variants).

Text truncation (6417154)

Selector	Rules
.v-list-item__content	min-width: 0; overflow: hidden
.v-list-item-title	font-size: $font-size-14, white-space: nowrap, overflow: hidden, text-overflow: ellipsis
&.searchFilterMenuList	max-width: 230px, max-height: calc(100vh - (var(--filter-header-offsettop, 60px) + 96px)), 5px scrollbar

min-width: 0 on the flex content is what lets the title shrink below its text width so the ellipsis applies; without it a long label would push the menu wider. Only text inside v-list-item-title is truncated, which is why SearchFilter.vue moved its labels into that element. The search filter menu pairs this with a tooltip that shows the full custom-field name.

Related Documentation

• SCSS Architecture Overview - Overall architecture
• Variables - Design tokens
• Mixins - Reusable mixins