diff --git a/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue b/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue index 42750120f6b4..ca6072840b4d 100644 --- a/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue +++ b/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue @@ -57,11 +57,11 @@ export default { setup(props) { /* Consider: - * avatar size (and two lines of text) or compact mode (34px) + * avatar size (and two lines of text) or compact mode (28px) * list-item padding * list-item__wrapper padding */ - const itemSize = computed(() => props.compact ? 34 + 2 * 2 + 0 * 2 : AVATAR.SIZE.DEFAULT + 2 * 4 + 2 * 2) + const itemSize = computed(() => props.compact ? 28 + 2 * 2 + 0 * 2 : AVATAR.SIZE.DEFAULT + 2 * 4 + 2 * 2) return { itemSize, } diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue index cf5f94fad3cc..10199870e2d5 100644 --- a/src/components/LeftSidebar/LeftSidebar.vue +++ b/src/components/LeftSidebar/LeftSidebar.vue @@ -1168,8 +1168,22 @@ export default { } } -// Overwrite NcListItem styles: remove padding in compact view +/* Overwrite NcListItem styles for compact view */ :deep(.list-item--compact) { padding-block: 0 !important; } + +:deep(.list-item--compact:not(:has(.list-item-content__subname))) { + --list-item-height: calc(var(--clickable-area-small, 24px) + 4px) !important; +} + +:deep(.list-item--compact .button-vue--size-normal) { + --button-size: var(--clickable-area-small, 24px); + --button-radius: var(--border-radius); +} + +:deep(.list-item--compact .list-item-content__actions) { + height: var(--clickable-area-small, 24px); +} + diff --git a/src/constants.js b/src/constants.js index 47bac3424ead..f091c54994f1 100644 --- a/src/constants.js +++ b/src/constants.js @@ -300,8 +300,8 @@ export const BOT = { export const AVATAR = { SIZE: { - COMPACT: 20, EXTRA_SMALL: 22, + COMPACT: 24, SMALL: 32, DEFAULT: 40, MEDIUM: 64,