From 3134a29f167b7664813d408f5e90e5d3c8d2bc46 Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Fri, 6 Mar 2026 14:16:12 -0600
Subject: [PATCH] feat(guide): improve program badge display for collapsed
 state (moved badges back to their own line)

---
 frontend/src/pages/Guide.jsx | 232 ++++++++++++++++++-----------------
 1 file changed, 122 insertions(+), 110 deletions(-)

diff --git a/frontend/src/pages/Guide.jsx b/frontend/src/pages/Guide.jsx
index 04fea941..e0d07947 100644
--- a/frontend/src/pages/Guide.jsx
+++ b/frontend/src/pages/Guide.jsx
@@ -999,38 +999,43 @@ export default function TVChannelGuide({ startDate, endDate }) {
                     ></div>
                   )}
                   {program.title}
-                  {!isExpanded && seasonEpisodeLabel && (
-                    <Badge
-                      size="xs"
-                      variant="light"
-                      color="gray"
-                      style={{ flexShrink: 0 }}
-                    >
-                      {seasonEpisodeLabel}
-                    </Badge>
-                  )}
-                  {!isExpanded && program.is_live && (
-                    <Badge
-                      size="xs"
-                      variant="light"
-                      color="red"
-                      style={{ flexShrink: 0 }}
-                    >
-                      LIVE
-                    </Badge>
-                  )}
-                  {!isExpanded && program.is_new && (
-                    <Badge
-                      size="xs"
-                      variant="light"
-                      color="green"
-                      style={{ flexShrink: 0 }}
-                    >
-                      NEW
-                    </Badge>
-                  )}
                 </Group>
               </Text>
+              {!isExpanded &&
+                (seasonEpisodeLabel || program.is_live || program.is_new) && (
+                  <Group gap={4} wrap="nowrap">
+                    {seasonEpisodeLabel && (
+                      <Badge
+                        size="xs"
+                        variant="light"
+                        color="gray"
+                        style={{ flexShrink: 0 }}
+                      >
+                        {seasonEpisodeLabel}
+                      </Badge>
+                    )}
+                    {program.is_live && (
+                      <Badge
+                        size="xs"
+                        variant="light"
+                        color="red"
+                        style={{ flexShrink: 0 }}
+                      >
+                        LIVE
+                      </Badge>
+                    )}
+                    {program.is_new && (
+                      <Badge
+                        size="xs"
+                        variant="light"
+                        color="green"
+                        style={{ flexShrink: 0 }}
+                      >
+                        NEW
+                      </Badge>
+                    )}
+                  </Group>
+                )}
               {!isExpanded && (program.sub_title || program.description) && (
                 <Text
                   size="xs"
@@ -1046,86 +1051,93 @@ export default function TVChannelGuide({ startDate, endDate }) {
                   {program.sub_title || program.description}
                 </Text>
               )}
-              {isExpanded && (program.sub_title || seasonEpisodeLabel || program.is_new || program.is_live || program.is_premiere || program.is_finale) && (
-                <Group gap="xs" wrap="nowrap" align="center">
-                  {program.sub_title && (
-                    <Text
-                      size="sm"
-                      fs="italic"
-                      style={{
-                        whiteSpace: 'nowrap',
-                        textOverflow: 'ellipsis',
-                        overflow: 'hidden',
-                        minWidth: 0,
-                      }}
-                      c={isPast ? '#718096' : '#e2e8f0'}
-                    >
-                      {program.sub_title}
-                    </Text>
-                  )}
-                  {seasonEpisodeLabel && (
-                    <Badge
-                      size="xs"
-                      variant="light"
-                      color="gray"
-                      style={{ flexShrink: 0 }}
-                    >
-                      {seasonEpisodeLabel}
-                    </Badge>
-                  )}
-                  {program.is_live && (
-                    <Badge
-                      size="xs"
-                      variant="light"
-                      color="red"
-                      style={{ flexShrink: 0 }}
-                    >
-                      LIVE
-                    </Badge>
-                  )}
-                  {program.is_new && (
-                    <Badge
-                      size="xs"
-                      variant="light"
-                      color="green"
-                      style={{ flexShrink: 0 }}
-                    >
-                      NEW
-                    </Badge>
-                  )}
-                  {program.is_premiere && (
-                    <Badge
-                      size="xs"
-                      variant="light"
-                      color="yellow"
-                      style={{ flexShrink: 0 }}
-                    >
-                      PREMIERE
-                    </Badge>
-                  )}
-                  {program.is_finale && (
-                    <Badge
-                      size="xs"
-                      variant="light"
-                      color="orange"
-                      style={{ flexShrink: 0 }}
-                    >
-                      FINALE
-                    </Badge>
-                  )}
-                </Group>
-              )}
-              <Text
-                size="sm"
-                style={{
-                  whiteSpace: 'nowrap',
-                  textOverflow: 'ellipsis',
-                  overflow: 'hidden',
-                }}
-              >
-                {format(programStart, timeFormat)} -{' '}
-                {format(programEnd, timeFormat)}
-              </Text>
+              {isExpanded &&
+                (program.sub_title ||
+                  seasonEpisodeLabel ||
+                  program.is_new ||
+                  program.is_live ||
+                  program.is_premiere ||
+                  program.is_finale) && (
+                  <Group gap="xs" wrap="nowrap" align="center">
+                    {program.sub_title && (
+                      <Text
+                        size="sm"
+                        fs="italic"
+                        style={{
+                          whiteSpace: 'nowrap',
+                          textOverflow: 'ellipsis',
+                          overflow: 'hidden',
+                          minWidth: 0,
+                        }}
+                        c={isPast ? '#718096' : '#e2e8f0'}
+                      >
+                        {program.sub_title}
+                      </Text>
+                    )}
+                    {seasonEpisodeLabel && (
+                      <Badge
+                        size="xs"
+                        variant="light"
+                        color="gray"
+                        style={{ flexShrink: 0 }}
+                      >
+                        {seasonEpisodeLabel}
+                      </Badge>
+                    )}
+                    {program.is_live && (
+                      <Badge
+                        size="xs"
+                        variant="light"
+                        color="red"
+                        style={{ flexShrink: 0 }}
+                      >
+                        LIVE
+                      </Badge>
+                    )}
+                    {program.is_new && (
+                      <Badge
+                        size="xs"
+                        variant="light"
+                        color="green"
+                        style={{ flexShrink: 0 }}
+                      >
+                        NEW
+                      </Badge>
+                    )}
+                    {program.is_premiere && (
+                      <Badge
+                        size="xs"
+                        variant="light"
+                        color="yellow"
+                        style={{ flexShrink: 0 }}
+                      >
+                        PREMIERE
+                      </Badge>
+                    )}
+                    {program.is_finale && (
+                      <Badge
+                        size="xs"
+                        variant="light"
+                        color="orange"
+                        style={{ flexShrink: 0 }}
+                      >
+                        FINALE
+                      </Badge>
+                    )}
+                  </Group>
+                )}
+              <Group gap={6} wrap="nowrap" align="center">
+                <Text
+                  size="sm"
+                  style={{
+                    whiteSpace: 'nowrap',
+                    flexShrink: 0,
+                  }}
+                >
+                  {format(programStart, timeFormat)} -{' '}
+                  {format(programEnd, timeFormat)}
+                </Text>
+              </Group>
               {isExpanded && program.description && (
                 <Text
                   size="xs"