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": { "counts": {
"agents": 140, "agents": 140,
"prompts": 134, "prompts": 134,

View File

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