fix(ui): reduce omnibox suggestion item height
- commit
- 7d324aa78f76113c672a96e6824e5aacf1ba899c
- author
- bnema · · 2025-11-29 16:18 UTC
- parent
- e0a849f
- signature
- GPG Unverified
2B82207D370127A0The key is unknown
2 files · +7 -36
M gui/src/components/omnibox/OmniboxSuggestions.svelte +7 -7
| @@ -283,9 +283,9 @@ | |||
| 283 | 283 | ||
| 284 | 284 | .suggestion-item { | |
| 285 | 285 | display: flex; | |
| 286 | - | gap: 0.75rem; | |
| 286 | + | gap: 0.5rem; | |
| 287 | 287 | align-items: center; | |
| 288 | - | padding: 0.85rem 0.85rem; | |
| 288 | + | padding: 0.5rem 0.75rem; | |
| 289 | 289 | border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 50%, transparent); | |
| 290 | 290 | cursor: pointer; | |
| 291 | 291 | transition: background-color 100ms ease, border-left-color 100ms ease; | |
| @@ -338,10 +338,10 @@ | |||
| 338 | 338 | } | |
| 339 | 339 | ||
| 340 | 340 | .suggestion-favicon { | |
| 341 | - | width: 24px; | |
| 342 | - | height: 24px; | |
| 341 | + | width: 16px; | |
| 342 | + | height: 16px; | |
| 343 | 343 | border: none; | |
| 344 | - | border-radius: 3px; | |
| 344 | + | border-radius: 2px; | |
| 345 | 345 | display: flex; | |
| 346 | 346 | align-items: center; | |
| 347 | 347 | justify-content: center; | |
| @@ -351,8 +351,8 @@ | |||
| 351 | 351 | } | |
| 352 | 352 | ||
| 353 | 353 | .suggestion-favicon-img { | |
| 354 | - | width: 24px; | |
| 355 | - | height: 24px; | |
| 354 | + | width: 16px; | |
| 355 | + | height: 16px; | |
| 356 | 356 | object-fit: contain; | |
| 357 | 357 | image-rendering: auto; | |
| 358 | 358 | } | |
| @@ -283,9 +283,9 @@ | |||||
| 283 | 283 | ||||
| 284 | .suggestion-item { | 284 | .suggestion-item { | ||
| 285 | display: flex; | 285 | display: flex; | ||
| 286 | - | gap: 0.75rem; | 286 | + | gap: 0.5rem; |
| 287 | align-items: center; | 287 | align-items: center; | ||
| 288 | - | padding: 0.85rem 0.85rem; | 288 | + | padding: 0.5rem 0.75rem; |
| 289 | border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 50%, transparent); | 289 | border-bottom: 1px solid color-mix(in srgb, var(--dynamic-border) 50%, transparent); | ||
| 290 | cursor: pointer; | 290 | cursor: pointer; | ||
| 291 | transition: background-color 100ms ease, border-left-color 100ms ease; | 291 | transition: background-color 100ms ease, border-left-color 100ms ease; | ||
| @@ -338,10 +338,10 @@ | |||||
| 338 | } | 338 | } | ||
| 339 | 339 | ||||
| 340 | .suggestion-favicon { | 340 | .suggestion-favicon { | ||
| 341 | - | width: 24px; | 341 | + | width: 16px; |
| 342 | - | height: 24px; | 342 | + | height: 16px; |
| 343 | border: none; | 343 | border: none; | ||
| 344 | - | border-radius: 3px; | 344 | + | border-radius: 2px; |
| 345 | display: flex; | 345 | display: flex; | ||
| 346 | align-items: center; | 346 | align-items: center; | ||
| 347 | justify-content: center; | 347 | justify-content: center; | ||
| @@ -351,8 +351,8 @@ | |||||
| 351 | } | 351 | } | ||
| 352 | 352 | ||||
| 353 | .suggestion-favicon-img { | 353 | .suggestion-favicon-img { | ||
| 354 | - | width: 24px; | 354 | + | width: 16px; |
| 355 | - | height: 24px; | 355 | + | height: 16px; |
| 356 | object-fit: contain; | 356 | object-fit: contain; | ||
| 357 | image-rendering: auto; | 357 | image-rendering: auto; | ||
| 358 | } | 358 | } | ||
M gui/src/styles/tailwind.css +0 -29
| @@ -69,35 +69,6 @@ | |||
| 69 | 69 | color: var(--dynamic-muted); | |
| 70 | 70 | } | |
| 71 | 71 | ||
| 72 | - | .omnibox-results { | |
| 73 | - | background-color: var(--dynamic-bg); | |
| 74 | - | border: 1px solid var(--dynamic-border); | |
| 75 | - | border-radius: 0; | |
| 76 | - | box-shadow: | |
| 77 | - | 0 10px 15px -3px rgb(0 0 0 / 0.1), | |
| 78 | - | 0 4px 6px -4px rgb(0 0 0 / 0.1); | |
| 79 | - | max-height: 24rem; | |
| 80 | - | overflow-y: auto; | |
| 81 | - | } | |
| 82 | - | ||
| 83 | - | .omnibox-item { | |
| 84 | - | padding: 0.75rem 1rem; | |
| 85 | - | cursor: pointer; | |
| 86 | - | transition: colors 150ms; | |
| 87 | - | border-bottom: 1px solid var(--dynamic-border); | |
| 88 | - | } | |
| 89 | - | ||
| 90 | - | .omnibox-item:hover, | |
| 91 | - | .omnibox-item:focus { | |
| 92 | - | background-color: var(--dynamic-surface); | |
| 93 | - | outline: none; | |
| 94 | - | } | |
| 95 | - | ||
| 96 | - | .omnibox-item.selected { | |
| 97 | - | background-color: color-mix(in srgb, var(--dynamic-accent) 10%, transparent); | |
| 98 | - | color: var(--dynamic-accent); | |
| 99 | - | } | |
| 100 | - | ||
| 101 | 72 | /* Find bar specific styles */ | |
| 102 | 73 | .findbar { | |
| 103 | 74 | display: flex; | |
| @@ -69,35 +69,6 @@ | |||||
| 69 | color: var(--dynamic-muted); | 69 | color: var(--dynamic-muted); | ||
| 70 | } | 70 | } | ||
| 71 | 71 | ||||
| 72 | - | .omnibox-results { | |||
| 73 | - | background-color: var(--dynamic-bg); | |||
| 74 | - | border: 1px solid var(--dynamic-border); | |||
| 75 | - | border-radius: 0; | |||
| 76 | - | box-shadow: | |||
| 77 | - | 0 10px 15px -3px rgb(0 0 0 / 0.1), | |||
| 78 | - | 0 4px 6px -4px rgb(0 0 0 / 0.1); | |||
| 79 | - | max-height: 24rem; | |||
| 80 | - | overflow-y: auto; | |||
| 81 | - | } | |||
| 82 | - | ||||
| 83 | - | .omnibox-item { | |||
| 84 | - | padding: 0.75rem 1rem; | |||
| 85 | - | cursor: pointer; | |||
| 86 | - | transition: colors 150ms; | |||
| 87 | - | border-bottom: 1px solid var(--dynamic-border); | |||
| 88 | - | } | |||
| 89 | - | ||||
| 90 | - | .omnibox-item:hover, | |||
| 91 | - | .omnibox-item:focus { | |||
| 92 | - | background-color: var(--dynamic-surface); | |||
| 93 | - | outline: none; | |||
| 94 | - | } | |||
| 95 | - | ||||
| 96 | - | .omnibox-item.selected { | |||
| 97 | - | background-color: color-mix(in srgb, var(--dynamic-accent) 10%, transparent); | |||
| 98 | - | color: var(--dynamic-accent); | |||
| 99 | - | } | |||
| 100 | - | ||||
| 101 | /* Find bar specific styles */ | 72 | /* Find bar specific styles */ | ||
| 102 | .findbar { | 73 | .findbar { | ||
| 103 | display: flex; | 74 | display: flex; | ||