From fc01a6d04d4e33ec4d133fc62eb76cb246dffc23 Mon Sep 17 00:00:00 2001
From: None <190783071+CodeBormen@users.noreply.github.com>
Date: Thu, 12 Mar 2026 21:33:58 -0500
Subject: [PATCH] Improve ProgramDetailModal layout per feedback

- Move channel name/number into modal header title bar (was empty after removing duplicate title)
- Remove channel logo from modal (didn't fit well)
- Remove custom background color override, inherit from Mantine dark theme for consistency with VOD/Series modals
- Fix wrong channel shown in modal: pass channel directly from renderProgram instead of re-looking up by tvg_id
- Clean up unused imports (getChannelLogoUrl, Image/Group no longer needed in title)
---
 .../src/components/ProgramDetailModal.jsx     | 45 ++++---------------
 frontend/src/pages/Guide.jsx                  |  7 ++-
 2 files changed, 12 insertions(+), 40 deletions(-)

diff --git a/frontend/src/components/ProgramDetailModal.jsx b/frontend/src/components/ProgramDetailModal.jsx
index 129a5505..32cae1b3 100644
--- a/frontend/src/components/ProgramDetailModal.jsx
+++ b/frontend/src/components/ProgramDetailModal.jsx
@@ -15,17 +15,11 @@ import { Calendar, Video } from 'lucide-react';
 import API from '../api';
 import useVideoStore from '../store/useVideoStore';
 import useSettingsStore from '../store/settings';
-import { getShowVideoUrl, getChannelLogoUrl } from '../utils/cards/RecordingCardUtils';
+import { getShowVideoUrl } from '../utils/cards/RecordingCardUtils';
 import { formatSeasonEpisode } from '../pages/guideUtils';
 import { format, initializeTime, diff, useDateTimeFormat } from '../utils/dateTimeUtils';
 import { imdbUrl, tmdbUrl } from '../utils/externalUrls';
 
-const modalStyles = {
-  content: { backgroundColor: '#18181B', color: 'white' },
-  header: { backgroundColor: '#18181B', color: 'white' },
-  title: { color: 'white' },
-};
-
 const overlayProps = { color: '#000', backgroundOpacity: 0.55, blur: 0 };
 
 function formatDurationMinutes(startTime, endTime) {
@@ -136,7 +130,6 @@ export default function ProgramDetailModal({
   const starRatings = d.star_ratings || [];
   const description = d.description || program.description;
   const subtitle = d.sub_title ?? program.sub_title;
-  const channelLogoUrl = getChannelLogoUrl(channel);
   const posterUrl = resolveImageUrl(d);
   const duration = formatDurationMinutes(program.start_time, program.end_time);
   const programStart = initializeTime(program.start_time || program.startMs);
@@ -146,11 +139,17 @@ export default function ProgramDetailModal({
     <Modal
       opened={opened}
       onClose={onClose}
-      title={null}
+      title={
+        channel ? (
+          <Text size="sm" fw={600} c="white">
+            {channel.channel_number ? `${channel.channel_number} - ` : ''}
+            {channel.name}
+          </Text>
+        ) : null
+      }
       size="lg"
       centered
       overlayProps={overlayProps}
-      styles={modalStyles}
       zIndex={9999}
     >
       <Stack gap="md">
@@ -227,15 +226,6 @@ export default function ProgramDetailModal({
                 </Group>
               )}
 
-              {channel && (
-                <Text size="sm" c="dimmed" fw={600}>
-                  {channel.channel_number
-                    ? `${channel.channel_number} - `
-                    : ''}
-                  {channel.name}
-                </Text>
-              )}
-
               <Group gap="xs" wrap="wrap">
                 <Text size="sm" c="dimmed">
                   {format(programStart, timeFormat)} –{' '}
@@ -402,23 +392,6 @@ export default function ProgramDetailModal({
             )}
           </Group>
         )}
-        {channelLogoUrl && (
-          <Group justify="flex-end">
-            <Image
-              src={channelLogoUrl}
-              w="auto"
-              h="auto"
-              style={{
-                maxWidth: 120,
-                maxHeight: 40,
-                backgroundColor: 'rgba(255,255,255,0.09)',
-                borderRadius: 6,
-                padding: '4px 6px',
-                filter: 'drop-shadow(0 0 3px rgba(255,255,255,0.15))',
-              }}
-            />
-          </Group>
-        )}
       </Stack>
     </Modal>
   );
diff --git a/frontend/src/pages/Guide.jsx b/frontend/src/pages/Guide.jsx
index 21216821..81171637 100644
--- a/frontend/src/pages/Guide.jsx
+++ b/frontend/src/pages/Guide.jsx
@@ -775,11 +775,10 @@ export default function TVChannelGuide({ startDate, endDate }) {
   );
 
   const handleProgramClick = useCallback(
-    (program, event) => {
+    (program, channel, event) => {
       event.stopPropagation();
-      const matched = findChannelByTvgId(program.tvg_id);
       setSelectedProgram(program);
-      setSelectedChannel(matched);
+      setSelectedChannel(channel || findChannelByTvgId(program.tvg_id));
       setRecordingForProgram(recordingsByProgramId.get(program.id) || null);
     },
     [findChannelByTvgId, recordingsByProgramId]
@@ -895,7 +894,7 @@ export default function TVChannelGuide({ startDate, endDate }) {
           top={0}
           w={widthPx}
           h={PROGRAM_HEIGHT - 4}
-          onClick={(event) => handleProgramClick(program, event)}
+          onClick={(event) => handleProgramClick(program, channel, event)}
         >
           <Paper
             elevation={2}