Michael Mainguy
9f41ff72f0
- Convert Tooltip and Modal components from inline styles to CSS modules - Add centralized z-index management with CSS variables (--z-modal: 10000, --z-tooltip: 50000) - Implement fixed positioning for tooltips with dynamic coordinate calculation - Fix header row hover effects to not inherit data row brightness filters - Add proper table container positioning context for tooltips - Create RequestsTable.module.css for table-specific styling - Ensure tooltips are always visible above all content with proper arrow positioning 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
73 lines
1.4 KiB
CSS
73 lines
1.4 KiB
CSS
/* Table styles using CSS variables from App.module.css */
|
|
|
|
.tableContainer {
|
|
background: var(--color-bg-secondary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-lg);
|
|
overflow: hidden;
|
|
/* Allow tooltips to show above table */
|
|
position: relative;
|
|
}
|
|
|
|
.table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.tableHeader {
|
|
background: var(--color-bg-light);
|
|
}
|
|
|
|
/* Ensure header row doesn't inherit hover effects */
|
|
.tableHeader tr:hover {
|
|
filter: none !important;
|
|
background: var(--color-bg-light) !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.tableHeader tr:hover td,
|
|
.tableHeader tr:hover th {
|
|
border: 1px solid var(--color-border) !important;
|
|
filter: none !important;
|
|
}
|
|
|
|
/* Ensure tooltips in header work properly */
|
|
.tableHeader .tooltipContainer {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.tableHeaderCell {
|
|
padding: var(--spacing-sm);
|
|
font-size: var(--font-size-md);
|
|
font-weight: bold;
|
|
border-bottom: 1px solid var(--color-border);
|
|
color: var(--color-text);
|
|
/* Ensure tooltip positioning context */
|
|
position: relative;
|
|
overflow: visible;
|
|
}
|
|
|
|
.tableHeaderCell.center {
|
|
text-align: center;
|
|
}
|
|
|
|
.tableHeaderCell.left {
|
|
text-align: left;
|
|
}
|
|
|
|
.tableHeaderCell.right {
|
|
text-align: right;
|
|
}
|
|
|
|
.tableHeaderCell.expandColumn {
|
|
width: 30px;
|
|
}
|
|
|
|
/* No results message */
|
|
.noResults {
|
|
text-align: center;
|
|
color: var(--color-text-muted);
|
|
padding: 40px;
|
|
font-size: var(--font-size-xl);
|
|
} |