ui: fix search dropdown width and alignment
This commit is contained in:
@@ -143,10 +143,10 @@ func (h *Handler) HandleQuickSearch(w http.ResponseWriter, r *http.Request) {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
// Limit to 10 results
|
// Limit to 5 results
|
||||||
results := res.Animes
|
results := res.Animes
|
||||||
if len(results) > 10 {
|
if len(results) > 5 {
|
||||||
results = results[:10]
|
results = results[:5]
|
||||||
}
|
}
|
||||||
|
|
||||||
type SearchResult struct {
|
type SearchResult struct {
|
||||||
|
|||||||
@@ -108,8 +108,8 @@ header {
|
|||||||
.search-dropdown {
|
.search-dropdown {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 100%;
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 320px;
|
|
||||||
background: var(--surface);
|
background: var(--surface);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
border-top: none;
|
border-top: none;
|
||||||
@@ -141,6 +141,7 @@ header {
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
transition: background 0.15s;
|
transition: background 0.15s;
|
||||||
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-result-item:hover {
|
.search-result-item:hover {
|
||||||
@@ -163,17 +164,20 @@ header {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: var(--surface-hover);
|
background: var(--surface-hover);
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
font-size: 10px;
|
font-size: 9px;
|
||||||
color: var(--text-muted);
|
color: var(--text-muted);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
text-align: center;
|
||||||
|
padding: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-result-info {
|
.search-result-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 2px;
|
gap: 3px;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
padding-top: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-result-title {
|
.search-result-title {
|
||||||
@@ -181,9 +185,10 @@ header {
|
|||||||
color: var(--text);
|
color: var(--text);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 1;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-result-type {
|
.search-result-type {
|
||||||
|
|||||||
Reference in New Issue
Block a user