fix: use explicit opaque colors for drawer background

The previous approach using 'opacity: 1' and CSS variable
'var(--mui-palette-background-paper)' did not work because:
- CSS variable can resolve to semi-transparent rgba() values
- opacity property does not affect background color alpha channel
- Semi-transparent background allowed backdrop to bleed through

Solution:
- Use explicit opaque hex colors (#ffffff light, #1e1e1e dark)
- CSS media query for dark mode: @media (prefers-color-scheme: dark)
- Unique class name per namespace to avoid conflicts
- Maintains proper text color with CSS variable fallbacks

Root cause identified by debugger agent: opacity multiplies element
rendering but does NOT fix backgroundColor alpha transparency.

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>

src/components/NamespacesListView.tsx

@@ -95,23 +95,35 @@ function NamespaceDetailPanel({ namespace, onClose }: NamespaceDetailPanelProps)
     return countsPerResource.get(`${row.Namespace}/${row.Kind}/${row.Name}`) ?? resourceCounts(row);
   }
 
+  // Generate a unique class name for this drawer to avoid conflicts
+  const drawerClass = `polaris-namespace-drawer-${namespace}`;
+
   return (
-    <div
+    <>
-      style={{
+      <style>
-        position: 'fixed',
+        {`
-        right: 0,
+          .${drawerClass} {
-        top: 0,
+            position: fixed;
-        bottom: 0,
+            right: 0;
-        width: '1000px',
+            top: 0;
-        backgroundColor: 'var(--mui-palette-background-paper)',
+            bottom: 0;
-        color: 'var(--mui-palette-text-primary)',
+            width: 1000px;
-        boxShadow: '-2px 0 8px rgba(0,0,0,0.15)',
+            background-color: #ffffff;
-        overflowY: 'auto',
+            color: var(--mui-palette-text-primary, #000);
-        zIndex: 1200,
+            box-shadow: -2px 0 8px rgba(0,0,0,0.15);
-        padding: '20px',
+            overflow-y: auto;
-        opacity: 1,
+            z-index: 1200;
-      }}
+            padding: 20px;
-    >
+          }
+          @media (prefers-color-scheme: dark) {
+            .${drawerClass} {
+              background-color: #1e1e1e;
+              color: var(--mui-palette-text-primary, #fff);
+            }
+          }
+        `}
+      </style>
+      <div className={drawerClass}>
         <div
           style={{
             marginBottom: '20px',
@@ -215,6 +227,7 @@ function NamespaceDetailPanel({ namespace, onClose }: NamespaceDetailPanelProps)
           />
         </SectionBox>
       </div>
+    </>
   );
 }