fix(athan): bulletproof truncation for long custom-reciter names

The previous fix added min-w-0 + truncate on the inner div/span pair,
which is the textbook recipe — but only works if every flex parent
above also allows shrinking. The Card, the Label, and the layout's
left-rail aside all had no min-w-0 / no overflow-x constraint, so the
unbreakable filename string could push them all wider than the
intended w-90 column.

Belt-and-suspenders fix:
  * AthanPlayer Card: add `min-w-0 overflow-hidden` so the card
    can't grow past its parent regardless of contents.
  * Custom reciter Label: add `min-w-0 overflow-hidden` for the
    same reason at row level.
  * LayoutSplit + LayoutSplitArc asides (both rails): add
    `min-w-0 overflow-x-hidden` so the column stays exactly
    w-90/w-80 even if a child somehow tries to escape.

The inner div + truncate + title attributes from the prior commit
are unchanged. Together this is bulletproof: there's no flex
ancestor between the truncate span and the column boundary that
lacks shrink permission, and the column itself clips horizontal
overflow as a final safety net.

Author: bitardev

client/src/components/athan/AthanPlayer.tsx

@@ -54,7 +54,7 @@ export function AthanPlayer({ settings }: { settings: AppSettings }) {
   };
 
   return (
-    <Card className="flex flex-col gap-4 p-5">
+    <Card className="flex min-w-0 flex-col gap-4 overflow-hidden p-5">
       <div className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
         {t('athan.title')}
       </div>
@@ -86,7 +86,7 @@ export function AthanPlayer({ settings }: { settings: AppSettings }) {
             <Label
               key={id}
               htmlFor={`reciter-${id}`}
-              className="flex cursor-pointer items-center gap-3 rounded-md border border-primary/30 bg-primary/5 p-3 hover:bg-primary/10"
+              className="flex min-w-0 cursor-pointer items-center gap-3 overflow-hidden rounded-md border border-primary/30 bg-primary/5 p-3 hover:bg-primary/10"
             >
               <RadioGroupItem value={id} id={`reciter-${id}`} />
               {/* min-w-0 lets the flex child actually shrink so `truncate`

client/src/components/layouts/LayoutSplit.tsx

@@ -28,7 +28,7 @@ export function LayoutSplit({
     <main className="flex flex-1 overflow-hidden">
       {/* Left rail — clock/date + Athan player (the "what's about to play"
           channel sits next to the time so the eye stays in one column). */}
-      <aside className="hidden w-90 shrink-0 overflow-y-auto border-r bg-card/30 p-4 md:block">
+      <aside className="hidden w-90 min-w-0 shrink-0 overflow-x-hidden overflow-y-auto border-r bg-card/30 p-4 md:block">
         <div className="flex flex-col gap-3">
           <HijriCard tz={tz} />
           <div data-tour="athan-player">
@@ -121,7 +121,7 @@ export function LayoutSplit({
       {/* Right rail — Live radio (passive listening). Was on the left
           before, but the Athan player belongs next to the next-prayer
           countdown; radio is the secondary feature and lives here. */}
-      <aside className="hidden w-80 shrink-0 overflow-y-auto border-l bg-card/30 p-4 lg:block">
+      <aside className="hidden w-80 min-w-0 shrink-0 overflow-x-hidden overflow-y-auto border-l bg-card/30 p-4 lg:block">
         <div className="flex flex-col gap-3">
           <RadioPlayer settings={settings} />
         </div>

client/src/components/layouts/LayoutSplitArc.tsx

@@ -33,7 +33,7 @@ export function LayoutSplitArc({
     <main className="flex flex-1 overflow-hidden">
       {/* Same rail composition as LayoutSplit — clock + Athan on the left,
           Radio on the right. Variant C only differs in the centre. */}
-      <aside className="hidden w-90 shrink-0 overflow-y-auto border-r bg-card/30 p-4 md:block">
+      <aside className="hidden w-90 min-w-0 shrink-0 overflow-x-hidden overflow-y-auto border-r bg-card/30 p-4 md:block">
         <div className="flex flex-col gap-3">
           <HijriCard tz={tz} />
           <AthanPlayer settings={settings} />
@@ -93,7 +93,7 @@ export function LayoutSplitArc({
         </div>
       </section>
 
-      <aside className="hidden w-80 shrink-0 overflow-y-auto border-l bg-card/30 p-4 lg:block">
+      <aside className="hidden w-80 min-w-0 shrink-0 overflow-x-hidden overflow-y-auto border-l bg-card/30 p-4 lg:block">
         <div className="flex flex-col gap-3">
           <RadioPlayer settings={settings} />
         </div>