fix(stats): improve mobile charts

This commit is contained in:
Adam
2026-05-29 07:46:09 -05:00
parent 6102fb2e3f
commit fb6275e04a
2 changed files with 100 additions and 23 deletions
+58 -14
View File
@@ -1719,6 +1719,7 @@
[data-page="stats"] [data-slot="leader-copy"] strong {
color: var(--stats-text);
font-weight: 600;
line-height: 1.3;
}
[data-page="stats"] [data-slot="leader-copy"] span {
@@ -1799,6 +1800,14 @@
font-weight: 600;
}
[data-page="stats"] [data-slot="market-axis-label"] {
display: grid;
}
[data-page="stats"] [data-slot="market-date-mobile"] {
display: none;
}
[data-page="stats"] [data-slot="market-bars"] {
flex: 1;
min-height: 0;
@@ -1977,23 +1986,21 @@
}
[data-page="stats"] [data-component="metric-bar"] {
display: flex;
align-items: center;
gap: 3px;
position: relative;
display: block;
flex: 1;
min-width: 0;
height: 5px;
background: var(--stats-layer-2);
font-style: normal;
}
[data-page="stats"] [data-component="metric-bar"] b,
[data-page="stats"] [data-component="metric-bar"] em {
display: block;
height: 5px;
}
[data-page="stats"] [data-component="metric-bar"] b {
flex-basis: 0;
position: absolute;
inset: 0 auto 0 0;
display: block;
width: var(--metric-bar-fill);
height: 5px;
background: var(--stats-text);
}
@@ -2002,12 +2009,10 @@
}
[data-page="stats"] [data-component="metric-bar"] em {
flex: 1;
min-width: 8px;
background: var(--stats-layer-2);
display: none;
}
[data-page="stats"] [data-component="metric-bar"][data-active="true"] em {
[data-page="stats"] [data-component="metric-bar"][data-active="true"] {
background: var(--stats-line-strong);
}
@@ -2311,6 +2316,13 @@
grid-template-rows: none;
}
[data-page="stats"] [data-component="token-tooltip"] {
position: static;
order: -1;
width: 100%;
margin-bottom: 8px;
}
[data-page="stats"] [data-slot="market-footer"] {
align-items: flex-start;
flex-direction: column;
@@ -2376,6 +2388,11 @@
height: 400px;
}
[data-page="stats"] [data-component="market-share"] {
grid-template-rows: 40px minmax(0, 1fr);
height: 400px;
}
[data-page="stats"] [data-slot="top-models-axis"] > div {
position: relative;
display: flex;
@@ -2385,6 +2402,14 @@
font-weight: 600;
}
[data-page="stats"] [data-slot="market-labels"] button {
position: relative;
align-items: center;
justify-content: center;
height: 40px;
line-height: 1.2;
}
[data-page="stats"] [data-slot="axis-label"] {
position: absolute;
left: 50%;
@@ -2394,16 +2419,35 @@
transform-origin: left center;
}
[data-page="stats"] [data-slot="market-axis-label"] {
position: absolute;
left: 50%;
width: max-content;
max-width: 72px;
transform: rotate(-90deg) translateX(-50%);
transform-origin: left center;
}
[data-page="stats"] [data-slot="top-models-axis"] > div[data-mobile-hidden="true"] [data-slot="axis-label"],
[data-page="stats"] [data-slot="axis-total"],
[data-page="stats"] [data-slot="axis-date-full"] {
display: none;
}
[data-page="stats"] [data-slot="market-labels"] button[data-mobile-hidden="true"] [data-slot="market-axis-label"],
[data-page="stats"] [data-slot="market-total"],
[data-page="stats"] [data-slot="market-date-full"] {
display: none;
}
[data-page="stats"] [data-slot="axis-date-mobile"] {
display: block;
}
[data-page="stats"] [data-slot="market-date-mobile"] {
display: block;
}
[data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"] {
position: fixed;
top: auto;