From c2a7a082fcdecbff083ee81ab83e75ccc251024f Mon Sep 17 00:00:00 2001
From: FoxxMD <FoxxMD@users.noreply.github.com>
Date: Tue, 13 Oct 2026 17:46:25 +0000
Subject: [PATCH] feat(ui): More item contrast for mobile screens

---
 src/client/components/play/MetadataResults.tsx | 2 +-
 src/client/index.css                           | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/client/components/play/MetadataResults.tsx b/src/client/components/play/MetadataResults.tsx
index 410b7f97..2c304d6c 100644
--- a/src/client/components/play/MetadataResults.tsx
+++ b/src/client/components/play/MetadataResults.tsx
@@ -234,7 +234,7 @@ export const MetadataSearchCombobox = <T extends MetadataSearchResult>(props: Me
                                     <Combobox.Context>
                                         {(combobox) => {
                                             return collection.items?.map((item) => (
-                                            <Combobox.Item key={item.id} item={item.id}>
+                                            <Combobox.Item key={item.id} item={item.id} marginY={{smDown: '1.5'}}>
                                                 {renderItem(item, (val) => {
                                                     onChange(val);
                                                     combobox.setInputValue(collection.stringifyItem(val) ?? '', 'item-select');
diff --git a/src/client/index.css b/src/client/index.css
index 2170a2c8..641ca4af 100644
--- a/src/client/index.css
+++ b/src/client/index.css
@@ -117,4 +117,9 @@
 
 .chakra-select__itemGroup .chakra-select__item {
       padding-inline: var(--chakra-spacing-3)
+}
+
+.chakra-combobox__item:nth-child(odd):not([data-highlighted=""]) {
+      --mix-subtle-background: color-mix(in srgb, var(--chakra-colors-bg-muted) 60%, transparent);
+      background: var(--mix-subtle-background)
 }
\ No newline at end of file
-- 
2.54.0