From 45e518ae5fc8c233925e9d268578adbb3fddf668 Mon Sep 17 00:00:00 2001
From: Graham Langford <30706330+grahamlangford@users.noreply.github.com>
Date: Fri, 15 Nov 2024 09:16:26 -0600
Subject: [PATCH] fix logic for setting alternate background in mod list items
 (#9528)

---
 .../src/pageEditor/modListingPanel/ModListItem.tsx           | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/applications/browser-extension/src/pageEditor/modListingPanel/ModListItem.tsx b/applications/browser-extension/src/pageEditor/modListingPanel/ModListItem.tsx
index 44142e75fa..6490eec1d7 100644
--- a/applications/browser-extension/src/pageEditor/modListingPanel/ModListItem.tsx
+++ b/applications/browser-extension/src/pageEditor/modListingPanel/ModListItem.tsx
@@ -53,6 +53,7 @@ const ModListItem: React.FC<
 
   const isModComponentSelected = activeModComponentId != null;
   const isModSelected = activeModId === modId && !isModComponentSelected;
+  const hasModBackground = activeModId === modId && isModComponentSelected;
   const isExpanded = expandedModId === modId;
 
   // TODO: Fix this so it pulls from registry, after registry single-item-api-fetch is implemented
@@ -76,8 +77,8 @@ const ModListItem: React.FC<
         eventKey={modId}
         as={ListGroup.Item}
         className={cx(styles.root, "list-group-item-action", {
-          // Set the alternate background if a mod component in this mod is active
-          [styles.modBackground ?? ""]: isModSelected || isModComponentSelected,
+          // Set the alternate background for the mod if a mod component in this mod is active
+          [styles.modBackground ?? ""]: hasModBackground,
         })}
         tabIndex={0} // Avoid using `button` because this item includes more buttons #2343
         active={isModSelected}