style: reduce Conversation component height

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
nextcloud · Jul 22, 2024 · cb3a7fa · cb3a7fa
1 parent 29d49cd
commit cb3a7fa
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -329,6 +329,15 @@ export default {
 }
 
 .conversation {
+	// Overwrite NcListItem styles to reduce a component height
+	padding: 0 !important;
+	margin: var(--default-grid-baseline);
+	width: calc(100% - var(--default-grid-baseline) * 2);
+
+	:deep(.list-item) {
+		padding-block: var(--default-grid-baseline);
+	}
+
 	// Overwrite ConversationIcon styles to blend a type icon with NcListItem
 	& :deep(.list-item:hover .conversation-icon__type) {
 		background-color: var(--color-background-hover);

diff --git a/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue b/src/components/LeftSidebar/ConversationsList/ConversationsListVirtual.vue
@@ -26,7 +26,12 @@ import LoadingPlaceholder from '../../UIShared/LoadingPlaceholder.vue'
 
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
-const CONVERSATION_ITEM_SIZE = 66
+/* Consider:
+ * 48 = 2 * var(--default-line-height) - 2 lines of text
+ * 8 = 2 * var(--default-grid-baseline) - item padding
+ * 4 = var(--default-grid-baseline) - item margin (collapsed)
+ */
+const CONVERSATION_ITEM_SIZE = 60
 
 export default {
 	name: 'ConversationsListVirtual',