fix: improve homepage search results dropdown styling

- Left-align search results content
- Add proper icon container with background
- Improve spacing and padding
- Add highlight styling for search matches
- Add empty state styling
- Support both .search-result and .search-result-item classes
This commit is contained in:
Aaron Powell
2026-01-28 17:07:20 +11:00
parent 57edb2a34b
commit 4411eea562
2 changed files with 44 additions and 21 deletions

View File

@@ -1,5 +1,5 @@
{
"generated": "2026-01-28T06:03:00.479Z",
"generated": "2026-01-28T06:04:12.934Z",
"counts": {
"agents": 140,
"prompts": 134,

View File

@@ -354,11 +354,11 @@ a:hover {
top: 100%;
left: 0;
right: 0;
background-color: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
margin-top: 8px;
max-height: 400px;
background: var(--color-bg-secondary);
border: 1px solid var(--color-glass-border);
border-radius: var(--border-radius-lg);
margin-top: 12px;
max-height: 450px;
overflow-y: auto;
box-shadow: var(--shadow-lg);
z-index: 1000;
@@ -368,46 +368,69 @@ a:hover {
display: none;
}
.search-result,
.search-result-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
align-items: flex-start;
gap: 14px;
padding: 14px 18px;
cursor: pointer;
border-bottom: 1px solid var(--color-border);
transition: background-color var(--transition);
border-bottom: 1px solid var(--color-glass-border);
transition: all var(--transition);
text-align: left;
}
.search-result:last-child,
.search-result-item:last-child {
border-bottom: none;
}
.search-result:hover,
.search-result-item:hover {
background-color: var(--color-bg-tertiary);
background: var(--color-bg-tertiary);
}
.search-result-type {
font-size: 12px;
padding: 2px 8px;
border-radius: 12px;
background-color: var(--color-bg-tertiary);
color: var(--color-text-muted);
font-weight: 500;
text-transform: capitalize;
font-size: 20px;
flex-shrink: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-tertiary);
border-radius: var(--border-radius);
}
.search-result-title {
font-weight: 500;
font-weight: 600;
font-size: 15px;
color: var(--color-text-emphasis);
margin-bottom: 4px;
}
.search-result-title mark {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(236, 72, 153, 0.3));
color: inherit;
padding: 0 2px;
border-radius: 2px;
}
.search-result-description {
font-size: 13px;
color: var(--color-text-muted);
line-height: 1.4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 300px;
max-width: 400px;
}
.search-result-empty {
padding: 20px;
text-align: center;
color: var(--color-text-muted);
font-size: 14px;
}
/* Cards Grid */