From 29b80e304ebec681f4a728a9dfbedf272907a8e7 Mon Sep 17 00:00:00 2001
From: Jake Jarvis <jake@jarv.is>
Date: Sun, 8 Mar 2026 16:02:47 -0400
Subject: [PATCH] Add `modal={false}` to Select/DropdownMenu and polish cast
 carousel layout

- Set `modal={false}` on all Select and DropdownMenu instances to
  prevent scroll lock and backdrop interference when opened inside
  scrollable or fixed-position containers
- Reduce cast carousel card gap from `gap-4` to `gap-1` and switch
  actor name from `line-clamp-2` to `truncate` for a tighter layout
- Fix backup schedule description layout: move `suppressHydrationWarning`
  to wrapper span, add margin to inline SelectTrigger, use `!h-auto`
  to override default height
---
 .../dashboard/_components/stats-display.tsx       |  1 +
 .../people/[id]/_components/filmography-grid.tsx  |  1 +
 .../_components/backup-schedule-section.tsx       | 15 +++++++++------
 .../titles/[id]/_components/cast-carousel.tsx     |  4 ++--
 components/nav-bar.tsx                            |  2 +-
 5 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/app/(pages)/dashboard/_components/stats-display.tsx b/app/(pages)/dashboard/_components/stats-display.tsx
index 6987376..69934b4 100644
--- a/app/(pages)/dashboard/_components/stats-display.tsx
+++ b/app/(pages)/dashboard/_components/stats-display.tsx
@@ -95,6 +95,7 @@ function PeriodSelector({
       <Select
         value={period}
         onValueChange={(v) => v && onPeriodChange(v as TimePeriod)}
+        modal={false}
       >
         <SelectTrigger
           className={`${inlineTriggerClass} text-foreground/80 uppercase`}
diff --git a/app/(pages)/people/[id]/_components/filmography-grid.tsx b/app/(pages)/people/[id]/_components/filmography-grid.tsx
index f7291c3..1c66778 100644
--- a/app/(pages)/people/[id]/_components/filmography-grid.tsx
+++ b/app/(pages)/people/[id]/_components/filmography-grid.tsx
@@ -76,6 +76,7 @@ export function FilmographyGrid({
         <Select
           value={sort}
           onValueChange={(v) => v && setSort(v as Sort)}
+          modal={false}
           aria-label="Sort filmography"
         >
           <SelectTrigger size="sm">
diff --git a/app/(pages)/settings/_components/backup-schedule-section.tsx b/app/(pages)/settings/_components/backup-schedule-section.tsx
index 8f3b62c..08d7ed4 100644
--- a/app/(pages)/settings/_components/backup-schedule-section.tsx
+++ b/app/(pages)/settings/_components/backup-schedule-section.tsx
@@ -216,16 +216,17 @@ export function BackupScheduleSection({
               <CardTitle>Backup schedule</CardTitle>
               <CardDescription>
                 {enabled ? (
-                  <span className="inline-flex flex-wrap items-baseline gap-1">
-                    <span suppressHydrationWarning>
-                      {formatNextBackup(frequency, time, dow)}.
-                    </span>{" "}
-                    Keeping{" "}
+                  <span
+                    className="inline-flex flex-wrap items-baseline"
+                    suppressHydrationWarning
+                  >
+                    {formatNextBackup(frequency, time, dow)}. Keeping{" "}
                     <Select
                       value={String(maxRetention)}
                       onValueChange={(v) => v && changeMaxRetention(Number(v))}
+                      modal={false}
                     >
-                      <SelectTrigger className="h-auto w-auto gap-0.5 rounded-none border-0 bg-transparent p-0 underline decoration-muted-foreground/50 decoration-dotted underline-offset-4 shadow-none hover:bg-transparent hover:text-foreground hover:decoration-foreground/50 focus-visible:decoration-foreground focus-visible:decoration-solid focus-visible:ring-0 dark:bg-transparent dark:hover:bg-transparent">
+                      <SelectTrigger className="!h-auto mr-0.5 ml-1.5 w-auto gap-0.5 rounded-none border-0 bg-transparent p-0 underline decoration-muted-foreground/50 decoration-dotted underline-offset-4 shadow-none hover:bg-transparent hover:text-foreground hover:decoration-foreground/50 focus-visible:decoration-foreground focus-visible:decoration-solid focus-visible:ring-0 dark:bg-transparent dark:hover:bg-transparent">
                         <SelectValue>
                           {(value: string | null) =>
                             value === "0"
@@ -319,6 +320,7 @@ export function BackupScheduleSection({
                         onValueChange={(v) =>
                           v && changeSchedule(frequency, time, Number(v))
                         }
+                        modal={false}
                       >
                         <SelectTrigger className="h-auto gap-1 border-border/50 bg-muted/30 px-2.5 py-1 text-foreground text-xs hover:bg-muted/50 dark:bg-muted/30 dark:hover:bg-muted/50">
                           <SelectValue>
@@ -361,6 +363,7 @@ export function BackupScheduleSection({
                       <Select
                         value={time}
                         onValueChange={(v) => v && changeSchedule(frequency, v)}
+                        modal={false}
                       >
                         <SelectTrigger className="h-auto gap-1 border-border/50 bg-muted/30 px-2.5 py-1 text-foreground text-xs hover:bg-muted/50 dark:bg-muted/30 dark:hover:bg-muted/50">
                           <SelectValue>
diff --git a/app/(pages)/titles/[id]/_components/cast-carousel.tsx b/app/(pages)/titles/[id]/_components/cast-carousel.tsx
index 75e019d..562d127 100644
--- a/app/(pages)/titles/[id]/_components/cast-carousel.tsx
+++ b/app/(pages)/titles/[id]/_components/cast-carousel.tsx
@@ -19,7 +19,7 @@ export function CastCarousel({ actors, titleType }: CastCarouselProps) {
 
       {actors.length > 0 && (
         <ScrollArea scrollFade hideScrollbar className="-mx-4 sm:-mx-0">
-          <div className="flex gap-4 px-4 py-2 sm:px-0">
+          <div className="flex gap-1 px-4 py-2 sm:px-0">
             {actors.map((member, i) => (
               <div key={member.id} className="w-[100px] shrink-0 sm:w-[120px]">
                 <div
@@ -49,7 +49,7 @@ export function CastCarousel({ actors, titleType }: CastCarouselProps) {
                       )}
                     </div>
                     <div className="w-full text-center">
-                      <p className="line-clamp-2 font-medium text-xs leading-tight">
+                      <p className="truncate font-medium text-xs">
                         {member.name}
                       </p>
                       {member.character && (
diff --git a/components/nav-bar.tsx b/components/nav-bar.tsx
index 953e729..dc221aa 100644
--- a/components/nav-bar.tsx
+++ b/components/nav-bar.tsx
@@ -212,7 +212,7 @@ export function NavBar({
             className="mx-1.5 my-auto hidden h-6 bg-border/50 sm:block"
           />
           {/* User avatar dropdown */}
-          <DropdownMenu>
+          <DropdownMenu modal={false}>
             <DropdownMenuTrigger
               className="hidden cursor-pointer rounded-full outline-none ring-2 ring-transparent transition-all hover:ring-primary/40 focus-visible:ring-primary/60 sm:block"
               aria-label="Account menu"