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>
This commit is contained in:
@@ -95,126 +95,139 @@ function NamespaceDetailPanel({ namespace, onClose }: NamespaceDetailPanelProps)
|
|||||||
return countsPerResource.get(`${row.Namespace}/${row.Kind}/${row.Name}`) ?? resourceCounts(row);
|
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 (
|
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;
|
||||||
>
|
}
|
||||||
<div
|
@media (prefers-color-scheme: dark) {
|
||||||
style={{
|
.${drawerClass} {
|
||||||
marginBottom: '20px',
|
background-color: #1e1e1e;
|
||||||
display: 'flex',
|
color: var(--mui-palette-text-primary, #fff);
|
||||||
justifyContent: 'space-between',
|
}
|
||||||
alignItems: 'center',
|
}
|
||||||
}}
|
`}
|
||||||
>
|
</style>
|
||||||
<h2 style={{ margin: 0, color: 'var(--mui-palette-text-primary)' }}>
|
<div className={drawerClass}>
|
||||||
Polaris — {namespace}
|
<div
|
||||||
</h2>
|
|
||||||
<button
|
|
||||||
onClick={onClose}
|
|
||||||
style={{
|
style={{
|
||||||
border: 'none',
|
marginBottom: '20px',
|
||||||
background: 'transparent',
|
display: 'flex',
|
||||||
fontSize: '24px',
|
justifyContent: 'space-between',
|
||||||
cursor: 'pointer',
|
alignItems: 'center',
|
||||||
padding: '0 8px',
|
|
||||||
color: 'var(--mui-palette-text-primary)',
|
|
||||||
}}
|
}}
|
||||||
aria-label="Close panel"
|
|
||||||
>
|
>
|
||||||
×
|
<h2 style={{ margin: 0, color: 'var(--mui-palette-text-primary)' }}>
|
||||||
</button>
|
Polaris — {namespace}
|
||||||
|
</h2>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
style={{
|
||||||
|
border: 'none',
|
||||||
|
background: 'transparent',
|
||||||
|
fontSize: '24px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
padding: '0 8px',
|
||||||
|
color: 'var(--mui-palette-text-primary)',
|
||||||
|
}}
|
||||||
|
aria-label="Close panel"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SectionBox title="External">
|
||||||
|
<NameValueTable
|
||||||
|
rows={[
|
||||||
|
{
|
||||||
|
name: 'Polaris Dashboard',
|
||||||
|
value: (
|
||||||
|
<a href={getPolarisProxyUrl()} target="_blank" rel="noopener noreferrer">
|
||||||
|
View in Polaris Dashboard
|
||||||
|
</a>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</SectionBox>
|
||||||
|
|
||||||
|
<SectionBox title="Namespace Score">
|
||||||
|
<NameValueTable
|
||||||
|
rows={[
|
||||||
|
{
|
||||||
|
name: 'Score',
|
||||||
|
value: <StatusLabel status={status}>{score}%</StatusLabel>,
|
||||||
|
},
|
||||||
|
{ name: 'Total Checks', value: String(counts.total) },
|
||||||
|
{
|
||||||
|
name: 'Pass',
|
||||||
|
value: <StatusLabel status="success">{counts.pass}</StatusLabel>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Warning',
|
||||||
|
value: <StatusLabel status="warning">{counts.warning}</StatusLabel>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Danger',
|
||||||
|
value: <StatusLabel status="error">{counts.danger}</StatusLabel>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Skipped',
|
||||||
|
value: (
|
||||||
|
<span title="Only counts checks with Severity=ignore. Annotation-based exemptions are not included.">
|
||||||
|
{counts.skipped}
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</SectionBox>
|
||||||
|
|
||||||
|
<SectionBox title="Resources">
|
||||||
|
<SimpleTable
|
||||||
|
columns={[
|
||||||
|
{ label: 'Name', getter: (row: Result) => row.Name },
|
||||||
|
{ label: 'Kind', getter: (row: Result) => row.Kind },
|
||||||
|
{
|
||||||
|
label: 'Pass',
|
||||||
|
getter: (row: Result) => (
|
||||||
|
<StatusLabel status="success">{getResourceCounts(row).pass}</StatusLabel>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Warning',
|
||||||
|
getter: (row: Result) => (
|
||||||
|
<StatusLabel status="warning">{getResourceCounts(row).warning}</StatusLabel>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Danger',
|
||||||
|
getter: (row: Result) => (
|
||||||
|
<StatusLabel status="error">{getResourceCounts(row).danger}</StatusLabel>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
data={results}
|
||||||
|
emptyMessage={`No resources found in namespace "${namespace}".`}
|
||||||
|
/>
|
||||||
|
</SectionBox>
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
<SectionBox title="External">
|
|
||||||
<NameValueTable
|
|
||||||
rows={[
|
|
||||||
{
|
|
||||||
name: 'Polaris Dashboard',
|
|
||||||
value: (
|
|
||||||
<a href={getPolarisProxyUrl()} target="_blank" rel="noopener noreferrer">
|
|
||||||
View in Polaris Dashboard
|
|
||||||
</a>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</SectionBox>
|
|
||||||
|
|
||||||
<SectionBox title="Namespace Score">
|
|
||||||
<NameValueTable
|
|
||||||
rows={[
|
|
||||||
{
|
|
||||||
name: 'Score',
|
|
||||||
value: <StatusLabel status={status}>{score}%</StatusLabel>,
|
|
||||||
},
|
|
||||||
{ name: 'Total Checks', value: String(counts.total) },
|
|
||||||
{
|
|
||||||
name: 'Pass',
|
|
||||||
value: <StatusLabel status="success">{counts.pass}</StatusLabel>,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Warning',
|
|
||||||
value: <StatusLabel status="warning">{counts.warning}</StatusLabel>,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Danger',
|
|
||||||
value: <StatusLabel status="error">{counts.danger}</StatusLabel>,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Skipped',
|
|
||||||
value: (
|
|
||||||
<span title="Only counts checks with Severity=ignore. Annotation-based exemptions are not included.">
|
|
||||||
{counts.skipped}
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</SectionBox>
|
|
||||||
|
|
||||||
<SectionBox title="Resources">
|
|
||||||
<SimpleTable
|
|
||||||
columns={[
|
|
||||||
{ label: 'Name', getter: (row: Result) => row.Name },
|
|
||||||
{ label: 'Kind', getter: (row: Result) => row.Kind },
|
|
||||||
{
|
|
||||||
label: 'Pass',
|
|
||||||
getter: (row: Result) => (
|
|
||||||
<StatusLabel status="success">{getResourceCounts(row).pass}</StatusLabel>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Warning',
|
|
||||||
getter: (row: Result) => (
|
|
||||||
<StatusLabel status="warning">{getResourceCounts(row).warning}</StatusLabel>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Danger',
|
|
||||||
getter: (row: Result) => (
|
|
||||||
<StatusLabel status="error">{getResourceCounts(row).danger}</StatusLabel>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
data={results}
|
|
||||||
emptyMessage={`No resources found in namespace "${namespace}".`}
|
|
||||||
/>
|
|
||||||
</SectionBox>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user