From b5c8bcfa6ef0dc670036ecfc97714c6e411919a6 Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Sun, 16 Mar 2025 01:31:30 +0500
Subject: [PATCH] refactor: made voiceover selector in columns

---
 app/components/ReleasePlayer/VoiceoverSelector.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/components/ReleasePlayer/VoiceoverSelector.tsx b/app/components/ReleasePlayer/VoiceoverSelector.tsx
index 1c4a612..6ee2448 100644
--- a/app/components/ReleasePlayer/VoiceoverSelector.tsx
+++ b/app/components/ReleasePlayer/VoiceoverSelector.tsx
@@ -56,6 +56,10 @@ const DropdownItem = ({
   );
 };
 
+const DropdownTheme = {
+  content: "md:grid md:grid-cols-2 xl:grid-cols-4 gap-2 w-full container",
+};
+
 export const VoiceoverSelector = (props: {
   availableVoiceover: Voiceover[];
   voiceover: Voiceover;
@@ -66,6 +70,7 @@ export const VoiceoverSelector = (props: {
 
   return (
     <Dropdown
+      theme={DropdownTheme}
       label=""
       dismissOnClick={true}
       renderTrigger={() => (
@@ -76,9 +81,13 @@ export const VoiceoverSelector = (props: {
     >
       {props.availableVoiceover.map((voiceover: Voiceover) => (
         <Dropdown.Item
+          className="w-fit"
           key={`voiceover_${voiceover.id}`}
           onClick={() => {
-            playerPreferenceStore.setPreferredVoiceover(props.release_id, voiceover.name);
+            playerPreferenceStore.setPreferredVoiceover(
+              props.release_id,
+              voiceover.name
+            );
             props.setVoiceover({
               selected: voiceover,
               available: props.availableVoiceover,