style: fix collection modal spacing and make items more compact

This commit is contained in:
Aaron Powell
2026-01-29 10:39:41 +11:00
parent 3bb799616a
commit 10e42f4bed

View File

@@ -839,42 +839,42 @@ a:hover {
/* Collection Modal View */ /* Collection Modal View */
.collection-view { .collection-view {
padding: 24px; padding: 20px 24px;
} }
.collection-description { .collection-description {
font-size: 15px; font-size: 14px;
color: var(--color-text); color: var(--color-text);
margin-bottom: 16px; margin-bottom: 16px;
line-height: 1.6; line-height: 1.5;
} }
.collection-tags { .collection-tags {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 8px; gap: 6px;
margin-bottom: 20px; margin-bottom: 16px;
} }
.collection-items-header { .collection-items-header {
padding: 12px 0; padding: 10px 0;
border-bottom: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
margin-bottom: 12px; margin-bottom: 8px;
color: var(--color-text-muted); color: var(--color-text-muted);
font-size: 14px; font-size: 13px;
} }
.collection-items-list { .collection-items-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 2px;
} }
.collection-item { .collection-item {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 10px;
padding: 12px 16px; padding: 10px 12px;
background: var(--color-bg); background: var(--color-bg);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--border-radius); border-radius: var(--border-radius);
@@ -888,8 +888,10 @@ a:hover {
} }
.collection-item-icon { .collection-item-icon {
font-size: 20px; font-size: 16px;
flex-shrink: 0; flex-shrink: 0;
width: 20px;
text-align: center;
} }
.collection-item-info { .collection-item-info {
@@ -898,7 +900,7 @@ a:hover {
} }
.collection-item-name { .collection-item-name {
font-size: 14px; font-size: 13px;
font-weight: 500; font-weight: 500;
color: var(--color-text); color: var(--color-text);
overflow: hidden; overflow: hidden;
@@ -907,7 +909,7 @@ a:hover {
} }
.collection-item-usage { .collection-item-usage {
font-size: 13px; font-size: 12px;
color: var(--color-text-muted); color: var(--color-text-muted);
margin-top: 2px; margin-top: 2px;
overflow: hidden; overflow: hidden;
@@ -916,12 +918,13 @@ a:hover {
} }
.collection-item-type { .collection-item-type {
font-size: 12px; font-size: 11px;
color: var(--color-text-muted); color: var(--color-text-muted);
background: var(--color-bg-tertiary); background: var(--color-bg-tertiary);
padding: 4px 8px; padding: 2px 6px;
border-radius: 4px; border-radius: 4px;
flex-shrink: 0; flex-shrink: 0;
text-transform: capitalize;
} }
.collection-loading, .collection-loading,