From 2fbaa54dc46580b73623c72a9086f163aeaaac2f Mon Sep 17 00:00:00 2001
From: sphinxrave <62570796+sphinxrave@users.noreply.github.com>
Date: Tue, 11 Jun 2024 20:29:45 -0700
Subject: [PATCH] crack some player recommendations

---
 .../react/src/components/player/PlayerRecommendations.tsx  | 4 ++--
 packages/react/src/components/player/QueueList.tsx         | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/player/PlayerRecommendations.tsx b/packages/react/src/components/player/PlayerRecommendations.tsx
index b29665425..aca4cd313 100644
--- a/packages/react/src/components/player/PlayerRecommendations.tsx
+++ b/packages/react/src/components/player/PlayerRecommendations.tsx
@@ -109,12 +109,12 @@ function RecommendationCollapsible({
           onClick={() => setOpen(!open)}
         >
           <div className={open ? "i-heroicons:minus" : "i-heroicons:plus"} />
-          {label}
+          <span className="capitalize">{label}</span>
           <div className="grow" />
           <span>{Children.count(children)}</span>
         </Button>
       </CollapsibleTrigger>
-      <CollapsibleContent>{children}</CollapsibleContent>
+      <CollapsibleContent className="bg-base-2">{children}</CollapsibleContent>
     </Collapsible>
   );
 }
diff --git a/packages/react/src/components/player/QueueList.tsx b/packages/react/src/components/player/QueueList.tsx
index a916ee413..67047d385 100644
--- a/packages/react/src/components/player/QueueList.tsx
+++ b/packages/react/src/components/player/QueueList.tsx
@@ -11,6 +11,7 @@ import {
 import { useMemo, useState } from "react";
 import NewPlaylistDialog from "../playlist/NewPlaylistDialog";
 import { cn } from "@/lib/utils";
+import { WATCH_PAGE_DROPDOWN_BUTTON_STYLE } from "@/shadcn/ui/button.variants";
 
 export function QueueList({ currentId }: { currentId?: string }) {
   const { t } = useTranslation();
@@ -24,13 +25,13 @@ export function QueueList({ currentId }: { currentId?: string }) {
   return (
     <Collapsible
       open={open}
-      className="flex flex-col gap-2 rounded-lg bg-base-3 @container"
+      className="flex flex-col gap-2 overflow-hidden rounded-lg border border-base bg-base-3 @container"
     >
       <CollapsibleTrigger asChild>
         <Button
           size="lg"
           variant="ghost"
-          className="justify-start px-4 font-bold"
+          className={WATCH_PAGE_DROPDOWN_BUTTON_STYLE}
           onClick={() => setOpen(!open)}
         >
           <div className={open ? "i-heroicons:minus" : "i-heroicons:plus"} />
@@ -43,7 +44,7 @@ export function QueueList({ currentId }: { currentId?: string }) {
       </CollapsibleTrigger>
       <CollapsibleContent>
         {open && (
-          <div className="flex max-h-[70vh] flex-col overflow-y-auto">
+          <div className="flex max-h-[40vh] flex-col overflow-y-auto">
             <div className="flex justify-between">
               <NewPlaylistDialog
                 triggerElement={