EnterpriseAI/ClosedCode
1
0
Fork 0
Code Issues Pull Requests Actions 29 Packages Projects Releases Wiki Activity

Improve top models chart mobile axis

Browse Source
This commit is contained in:
Adam
2026-05-28 14:32:09 -05:00
parent 93ba2dd24a
commit b623d86f10
2 changed files with 84 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/stats/app/src/routes/index.css
+34 -5
View File
@@ -630,6 +630,7 @@
}
[data-page="stats"] [data-component="top-models-chart"] {
--top-models-bar-gap: 12px;
position: relative;
display: grid;
grid-template-rows: 34px minmax(0, 1fr);
@@ -641,10 +642,13 @@
[data-page="stats"] [data-slot="top-models-axis"],
[data-page="stats"] [data-slot="top-models-bars"] {
display: flex;
gap: 12px;
min-width: 0;
}
[data-page="stats"] [data-slot="top-models-axis"] {
gap: var(--top-models-bar-gap);
}
[data-page="stats"] [data-slot="top-models-axis"] > div {
flex: 1 1 0;
min-width: 0;
@@ -664,43 +668,54 @@
flex-direction: column;
}
[data-page="stats"] [data-slot="axis-date-mobile"] {
display: none;
}
[data-page="stats"] [data-slot="top-models-bars"] {
width: calc(100% + var(--top-models-bar-gap));
margin-inline: calc(var(--top-models-bar-gap) / -2);
min-height: 0;
}
[data-page="stats"] [data-slot="top-models-bar"] {
position: relative;
box-sizing: border-box;
flex: 1 1 0;
min-width: 0;
height: 100%;
padding-inline: calc(var(--top-models-bar-gap) / 2);
outline: none;
cursor: pointer;
}
[data-page="stats"] [data-slot="top-models-bar"]::before {
position: absolute;
inset: 0;
inset: 0 calc(var(--top-models-bar-gap) / 2);
content: "";
background: var(--stats-dot);
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
mask-position: center top;
mask-repeat: repeat;
mask-size: 6px 6px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
-webkit-mask-position: center top;
-webkit-mask-repeat: repeat;
-webkit-mask-size: 6px 6px;
}
[data-page="stats"] [data-slot="top-models-stack"] {
position: absolute;
right: 0;
right: calc(var(--top-models-bar-gap) / 2);
bottom: 0;
left: 0;
left: calc(var(--top-models-bar-gap) / 2);
z-index: 1;
display: grid;
height: var(--top-models-bar-height);
min-height: 0;
overflow: hidden;
background: var(--stats-bg);
box-shadow: 0 -4px 0 var(--stats-bg);
}
[data-page="stats"] [data-slot="top-models-stack"] i {
@@ -1118,6 +1133,10 @@
line-height: 12px;
}
[data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"] p[data-muted="true"] {
opacity: 0.46;
}
[data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"] [data-slot="tooltip-divider"] + p {
margin-top: 8px;
}
@@ -2026,11 +2045,21 @@
position: absolute;
left: 50%;
width: max-content;
max-width: 96px;
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="axis-date-mobile"] {
display: block;
}
[data-page="stats"] [data-section="top-models"] [data-component="chart-tooltip"] {
display: none;
}