From 9430bf4507345bd5e9a2d3cd49605f1e1a95ed91 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 5 Sep 2023 23:40:11 +0530
Subject: [PATCH] chore: improve list item vault info spacing

---
 .../Components/ContentListView/FileListItem.tsx            | 2 +-
 .../Components/ContentListView/ListItemVaultInfo.tsx       | 7 ++++---
 .../Components/ContentListView/NoteListItem.tsx            | 2 +-
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx b/packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx
index a80bc9b50..6646e935a 100644
--- a/packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/FileListItem.tsx
@@ -104,7 +104,7 @@ const FileListItemCard: FunctionComponent<DisplayableListItemProps<FileItem>> =
         <ListItemMetadata item={file} hideDate={hideDate} sortBy={sortBy} />
         <ListItemTags hideTags={hideTags} tags={tags} />
         <ListItemConflictIndicator item={file} />
-        <ListItemVaultInfo item={file} />
+        <ListItemVaultInfo item={file} className="mt-1.5" />
       </div>
       <ListItemFlagIcons className="p-4" item={file} isFileBackedUp={!!backupInfo} />
     </div>
diff --git a/packages/web/src/javascripts/Components/ContentListView/ListItemVaultInfo.tsx b/packages/web/src/javascripts/Components/ContentListView/ListItemVaultInfo.tsx
index 256d95e2a..953cb25af 100644
--- a/packages/web/src/javascripts/Components/ContentListView/ListItemVaultInfo.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/ListItemVaultInfo.tsx
@@ -1,15 +1,16 @@
 import { FunctionComponent } from 'react'
 import { useApplication } from '../ApplicationProvider'
 import Icon from '../Icon/Icon'
-import { DecryptedItemInterface } from '@standardnotes/snjs'
+import { DecryptedItemInterface, classNames } from '@standardnotes/snjs'
 import VaultNameBadge from '../Vaults/VaultNameBadge'
 import { featureTrunkVaultsEnabled } from '@/FeatureTrunk'
 
 type Props = {
   item: DecryptedItemInterface
+  className?: string
 }
 
-const ListItemVaultInfo: FunctionComponent<Props> = ({ item }) => {
+const ListItemVaultInfo: FunctionComponent<Props> = ({ item, className }) => {
   const application = useApplication()
 
   if (!featureTrunkVaultsEnabled()) {
@@ -28,7 +29,7 @@ const ListItemVaultInfo: FunctionComponent<Props> = ({ item }) => {
   const sharedByContact = application.sharedVaults.getItemSharedBy(item)
 
   return (
-    <div className="flex flex-wrap items-center gap-2">
+    <div className={classNames('flex flex-wrap items-center gap-2', className)}>
       <VaultNameBadge vault={vault} />
 
       {sharedByContact && (
diff --git a/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx b/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx
index 500b09c03..491e0ae43 100644
--- a/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx
+++ b/packages/web/src/javascripts/Components/ContentListView/NoteListItem.tsx
@@ -146,7 +146,7 @@ const NoteListItem: FunctionComponent<DisplayableListItemProps<SNNote>> = ({
         <ListItemMetadata item={item} hideDate={hideDate} sortBy={sortBy} />
         <ListItemTags hideTags={hideTags} tags={tags} />
         <ListItemConflictIndicator item={item} />
-        <ListItemVaultInfo item={item} />
+        <ListItemVaultInfo item={item} className="mt-1.5" />
       </div>
       <ListItemFlagIcons className="p-4" item={item} hasFiles={hasFiles} hasBorder={hasOffsetBorder} />
     </div>