From 9f87e15fd2ba9fe4fcecd01314c81957c1b4ea8d Mon Sep 17 00:00:00 2001
From: Chi Bong Ho <cbho@pih.org>
Date: Fri, 8 Mar 2024 15:28:29 -0500
Subject: [PATCH] css fixes

---
 .../queue-table-by-status-menu.component.tsx  | 23 +++++++++++--------
 .../queue-table-by-status-menu.scss           |  6 +++++
 2 files changed, 19 insertions(+), 10 deletions(-)
 create mode 100644 packages/esm-service-queues-app/src/queue-table/queue-table-by-status-menu.scss

diff --git a/packages/esm-service-queues-app/src/queue-table/queue-table-by-status-menu.component.tsx b/packages/esm-service-queues-app/src/queue-table/queue-table-by-status-menu.component.tsx
index effd854f2..168eef2dc 100644
--- a/packages/esm-service-queues-app/src/queue-table/queue-table-by-status-menu.component.tsx
+++ b/packages/esm-service-queues-app/src/queue-table/queue-table-by-status-menu.component.tsx
@@ -6,15 +6,17 @@ import { type Queue } from '../types';
 import { useQueues } from '../hooks/useQueues';
 import classNames from 'classnames';
 import { BrowserRouter, useLocation } from 'react-router-dom';
+import styles from './queue-table-by-status-menu.scss';
 
 function QueueTableLink({ basePath, queue }: { basePath: string; queue: Queue }) {
-  const { t } = useTranslation();
   const location = useLocation();
   const pageUrl = basePath + '/' + queue.uuid;
   const selected = location.pathname.startsWith(pageUrl);
   return (
     <ConfigurableLink
-      className={classNames('cds--side-nav__link', { 'active-left-nav-link': selected })} // TODO: Adjust this CSS
+      className={classNames('cds--side-nav__link', {
+        'active-left-nav-link': selected,
+      })}
       to={`${basePath}/${queue.uuid}`}>
       {queue.display}
     </ConfigurableLink>
@@ -26,14 +28,15 @@ export default function QueueTableByStatusMenu() {
   const { queues } = useQueues();
   const basePath = `${window.spaBase}/home/service-queues/queue-table-by-status`; // TODO: Configure elsewhere?
   return (
-    <SideNavMenu defaultExpanded={true} title={t('serviceQueues', 'Service Queues')}>
-      {queues.map((queue) => (
-        <SideNavMenuItem key={queue.uuid}>
-          <BrowserRouter>
-            <QueueTableLink basePath={basePath} queue={queue} />
-          </BrowserRouter>
-        </SideNavMenuItem>
-      ))}
+    <SideNavMenu
+      defaultExpanded={true}
+      title={t('serviceQueues', 'Service Queues')}
+      className={styles.queueTableByStatusNavMenu}>
+      <BrowserRouter>
+        {queues.map((queue) => (
+          <QueueTableLink basePath={basePath} queue={queue} />
+        ))}
+      </BrowserRouter>
     </SideNavMenu>
   );
 }
diff --git a/packages/esm-service-queues-app/src/queue-table/queue-table-by-status-menu.scss b/packages/esm-service-queues-app/src/queue-table/queue-table-by-status-menu.scss
new file mode 100644
index 000000000..91aa2fd88
--- /dev/null
+++ b/packages/esm-service-queues-app/src/queue-table/queue-table-by-status-menu.scss
@@ -0,0 +1,6 @@
+.queueTableByStatusNavMenu {
+  :global(.active-left-nav-link) {
+    // override padding for sub-menu items
+    padding-left: 1.75rem !important;
+  }
+}