diff --git a/index.html b/index.html index fe658e3..7d10d1a 100644 --- a/index.html +++ b/index.html @@ -14,11 +14,11 @@ @media (max-width: 900px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } } .charts-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 0 32px 24px; } @media (max-width: 900px) { .charts-row { grid-template-columns: 1fr; } } - .chart-wrap { height: 220px; position: relative; display: flex; align-items: flex-end; gap: 4px; padding-top: 24px; overflow-x: auto; } + .chart-wrap { height: 220px; position: relative; display: flex; align-items: flex-end; gap: 4px; padding-top: 28px; overflow-x: auto; } .bar { flex: 1; min-width: 20px; max-width: 28px; border-radius: 2px 2px 0 0; position: relative; cursor: pointer; } - .bar[data-kt-tip]::after { content: attr(data-kt-tip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--kt-ai-overlay); color: var(--kt-ai-fg-on-fill); padding: 4px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; } + .bar[data-kt-tip]::after { content: attr(data-kt-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: var(--kt-ai-overlay); color: var(--kt-ai-fg-on-fill); padding: 4px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; } .bar:hover::after { opacity: 1; } - .bar-value { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 11px; font-family: var(--kt-ai-font-mono); color: var(--kt-ai-fg-muted); } + .bar-value { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 11px; font-family: var(--kt-ai-font-mono); color: var(--kt-ai-fg-muted); } .table-section { padding: 0 32px 32px; } .table-controls { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } @@ -27,8 +27,10 @@