@crvouga/atlas 0.8.0 → 0.10.0

package/packages/visualizer/src/explorer/explorer.module.css

@@ -0,0 +1,1238 @@
+/* The test explorer: list on the left, the open test beside it. White, hairlines, one blue; outcome colors only for outcomes. */
+
+.explorer {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  height: 100%;
+  min-height: 0;
+  background: var(--bg);
+}
+
+.explorer[data-split] {
+  grid-template-columns: minmax(0, 1fr) minmax(24rem, 40rem);
+}
+
+.main,
+.side {
+  min-height: 0;
+  overflow: auto;
+}
+
+.main {
+  padding: 28px 40px 80px;
+}
+
+.main > * {
+  max-width: 72rem;
+}
+
+.side {
+  border-left: 1px solid var(--line);
+  padding: 16px 24px 80px;
+}
+
+.head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 8px 24px;
+  margin-bottom: 18px;
+  border-bottom: 1px solid var(--line);
+}
+
+.title {
+  margin: 0 0 12px;
+  font-size: 1.375rem;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  line-height: 1.25;
+}
+
+.tabs {
+  display: flex;
+  gap: 20px;
+}
+
+.tabs a {
+  padding: 0 0 10px;
+  border-bottom: 2px solid transparent;
+  color: var(--ink-3);
+  font-size: 0.9375rem;
+  text-decoration: none;
+}
+
+.tabs a[aria-selected='true'] {
+  border-bottom-color: var(--place);
+  color: var(--ink);
+  font-weight: 600;
+}
+
+.tabs a span {
+  color: var(--ink-3);
+  font-size: 0.8125rem;
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+}
+
+.label {
+  margin: 0 0 6px;
+  color: var(--ink-3);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.quiet {
+  margin: 12px 0;
+  color: var(--ink-3);
+  font-size: 0.875rem;
+}
+
+.notice {
+  margin: 12px 0;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--bg-2);
+  color: var(--ink-2);
+  font-size: 0.875rem;
+}
+
+.link {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--place);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.kinds {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 16px;
+  margin-bottom: 18px;
+}
+
+.kinds .label {
+  margin: 0;
+}
+
+.kinds ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 16px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.kinds a {
+  color: var(--place);
+  font-size: 0.875rem;
+  text-decoration: none;
+}
+
+.kinds a span {
+  color: var(--ink-3);
+}
+
+/* Insight strip */
+
+.insights {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+  gap: 10px;
+  margin-bottom: 18px;
+}
+
+.tile {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  padding: 12px 14px;
+  border: 1px solid var(--line-2);
+  border-radius: 12px;
+  background: var(--bg);
+  color: var(--ink);
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+}
+
+.tile[data-wide] {
+  grid-column: span 2;
+}
+
+button.tile,
+a.tile {
+  cursor: pointer;
+}
+
+button.tile:hover,
+a.tile:hover {
+  border-color: var(--faint);
+}
+
+.tile[aria-pressed='true'] {
+  border-color: var(--place);
+  background: var(--place-soft);
+}
+
+.tileLabel {
+  color: var(--ink-3);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.tileValue {
+  font-size: 1.5rem;
+  font-weight: 650;
+  line-height: 1.2;
+}
+
+.tileValue[data-warn] {
+  color: var(--flaky-ink);
+}
+
+.tileValue[data-none] {
+  color: var(--faint);
+}
+
+.tileNote {
+  color: var(--ink-3);
+  font-size: 0.75rem;
+  line-height: 1.35;
+}
+
+.tileCounts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px 10px;
+  margin-top: 2px;
+}
+
+.tileCounts button,
+.envList button {
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: none;
+  color: var(--ink-3);
+  font-size: 0.8125rem;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+}
+
+.tileCounts button:hover,
+.envList button:hover {
+  color: var(--ink);
+  text-decoration: underline;
+}
+
+.tileCounts button[data-status='failed'] {
+  color: var(--failed);
+  font-weight: 600;
+}
+
+.tileCounts button[data-status='failed']:disabled {
+  color: var(--ink-3);
+  font-weight: 400;
+  cursor: default;
+  text-decoration: none;
+}
+
+.tileCounts button[data-status='running'] {
+  color: var(--place);
+}
+
+.tileCounts button[aria-pressed='true'],
+.envList button[aria-pressed='true'] {
+  background: var(--place-soft);
+  box-shadow: 0 0 0 3px var(--place-soft);
+  color: var(--place);
+}
+
+.envList {
+  display: grid;
+  gap: 4px;
+  margin: 2px 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.envList button {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0 8px;
+  width: 100%;
+  text-align: left;
+}
+
+.envList button > span + span::before {
+  margin-right: 8px;
+  color: var(--faint);
+  content: '·';
+}
+
+.envName {
+  color: var(--ink);
+  font-weight: 600;
+}
+
+.envList [data-status='failed'] {
+  color: var(--failed);
+  font-weight: 600;
+}
+
+.more {
+  grid-column: 1 / -1;
+  font-size: 0.8125rem;
+}
+
+.more summary {
+  color: var(--ink-3);
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.moreLists {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+  gap: 12px 24px;
+  margin-top: 10px;
+}
+
+.moreLists ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.moreLists a {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 3px 0;
+  color: var(--ink);
+  text-decoration: none;
+}
+
+.moreLists a:hover .insightName {
+  color: var(--place);
+}
+
+.insightName {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.insightValue {
+  flex: none;
+  color: var(--ink-3);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Toolbar */
+
+.toolbar {
+  display: grid;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.searchRow,
+.filterRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+}
+
+.searchBox {
+  flex: 1 1 18rem;
+  min-width: 0;
+  height: 2.25rem;
+  padding: 0 12px;
+  border: 1px solid var(--line-2);
+  border-radius: var(--pill);
+  background: var(--bg);
+  color: var(--ink);
+  font: inherit;
+  font-size: 0.9rem;
+}
+
+.searchBox:focus {
+  outline: 2px solid var(--place-soft);
+  border-color: var(--place);
+}
+
+.select {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--ink-3);
+  font-size: 0.8125rem;
+}
+
+.select select {
+  height: 2.125rem;
+  max-width: 16rem;
+  padding: 0 8px;
+  border: 1px solid var(--line-2);
+  border-radius: var(--pill);
+  background: var(--bg);
+  color: var(--ink);
+  font: inherit;
+  font-size: 0.8125rem;
+}
+
+.segments,
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.segments button,
+.chips button {
+  padding: 4px 10px;
+  border: 1px solid transparent;
+  border-radius: var(--pill);
+  background: none;
+  color: var(--ink-3);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.chips button {
+  border-color: var(--line-2);
+}
+
+.segments button:hover,
+.chips button:hover {
+  background: var(--bg-2);
+}
+
+.segments button[aria-pressed='true'],
+.chips button[aria-pressed='true'] {
+  border-color: var(--place);
+  background: var(--place-soft);
+  color: var(--place);
+  font-weight: 600;
+}
+
+.segments button span,
+.chips button span {
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+  opacity: 0.8;
+}
+
+.segments button[data-status='failed'] span {
+  color: var(--failed);
+  font-weight: 600;
+  opacity: 1;
+}
+
+.showing {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 12px;
+  margin: 0;
+  color: var(--ink-3);
+  font-size: 0.8125rem;
+}
+
+.activeChip {
+  padding: 2px 10px;
+  border: 1px solid var(--place);
+  border-radius: var(--pill);
+  background: var(--place-soft);
+  color: var(--place);
+  font-size: 0.75rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+/* The grouped list */
+
+.list {
+  margin-top: 8px;
+}
+
+.listHead {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 6px 14px;
+  color: var(--ink-3);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.listHead > span:first-child {
+  flex: 1;
+}
+
+.listTools {
+  display: flex;
+  gap: 12px;
+}
+
+.listTools .link {
+  font-size: 0.75rem;
+}
+
+.columns {
+  display: grid;
+  flex: none;
+  grid-template-columns: 4.5rem 3.25rem 3rem 4.25rem;
+  gap: 8px;
+  color: var(--ink-3);
+  font-size: 0.8125rem;
+  text-align: right;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.columns[data-one] {
+  grid-template-columns: 5rem;
+}
+
+.listHead .columns {
+  font-size: 0.75rem;
+}
+
+.columns [data-low] {
+  color: var(--ink);
+  font-weight: 600;
+}
+
+.domainHeading {
+  margin: 18px 0 6px;
+  color: var(--ink-3);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: none;
+}
+
+.groupWrap + .groupWrap .group {
+  margin-top: 6px;
+}
+
+.group {
+  border: 1px solid var(--line-2);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.group + .group {
+  margin-top: 6px;
+}
+
+.groupHead {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 9px 14px;
+  border: 0;
+  background: var(--bg);
+  color: var(--ink);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.groupHead[data-static] {
+  cursor: default;
+  background: var(--bg-2);
+}
+
+button.groupHead:hover {
+  background: var(--bg-2);
+}
+
+.group[data-open] > .groupHead {
+  border-bottom: 1px solid var(--line);
+}
+
+.groupName {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0 10px;
+  min-width: 0;
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.groupName code {
+  overflow: hidden;
+  color: var(--ink-3);
+  font-family: var(--mono);
+  font-size: 0.75rem;
+  font-weight: 400;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.groupMeter {
+  flex: none;
+  width: 5rem;
+}
+
+.groupTally {
+  display: flex;
+  flex: none;
+  gap: 10px;
+  color: var(--ink-3);
+  font-size: 0.75rem;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.groupTally strong {
+  color: var(--failed);
+  font-weight: 600;
+}
+
+.chevron {
+  flex: none;
+  width: 7px;
+  height: 7px;
+  margin: 0 3px 2px 1px;
+  border-right: 1.5px solid var(--faint);
+  border-bottom: 1.5px solid var(--faint);
+  transform: rotate(-45deg);
+  transition: transform var(--fade) var(--ease);
+}
+
+.group[data-open] .chevron,
+.chevron[data-open] {
+  transform: rotate(45deg);
+}
+
+.rows {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.row + .row {
+  border-top: 1px solid var(--line);
+}
+
+.rowLink {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 14px;
+  color: var(--ink);
+  text-decoration: none;
+}
+
+.rowLink:hover {
+  background: var(--bg-2);
+}
+
+.rowLink[aria-current='true'] {
+  background: var(--place-soft);
+}
+
+.rowLink > svg {
+  align-self: flex-start;
+  margin-top: 2px;
+}
+
+.rowMain {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.rowTitle {
+  font-size: 0.9rem;
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+.row[data-status='not-run'] .rowTitle {
+  color: var(--ink-2);
+}
+
+.rowMeta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 10px;
+  color: var(--ink-3);
+  font-size: 0.75rem;
+}
+
+.rowError {
+  overflow: hidden;
+  color: var(--failed-ink);
+  font-family: var(--mono);
+  font-size: 0.75rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.moreRow {
+  padding: 8px 14px;
+  border-top: 1px solid var(--line);
+}
+
+.envChips {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+}
+
+.envChips > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--ink-3);
+}
+
+.envChips > span[data-status='failed'] {
+  color: var(--failed-ink);
+  font-weight: 600;
+}
+
+.envChips > span[data-status='passed'] {
+  color: var(--passed-ink);
+}
+
+.badges {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.badges > span {
+  padding: 0 6px;
+  border: 1px solid var(--line-2);
+  border-radius: var(--pill);
+  color: var(--ink-3);
+  font-size: 0.6875rem;
+  line-height: 1.5;
+}
+
+.badges > span[data-badge='flaky'] {
+  border-color: var(--flaky);
+  color: var(--flaky-ink);
+}
+
+.badges > span[data-badge='live'] {
+  border-color: var(--place);
+  color: var(--place);
+}
+
+/* Test detail */
+
+.detail {
+  display: grid;
+  gap: 18px;
+}
+
+.detailTop {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: -18px;
+}
+
+.close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--pill);
+  color: var(--ink-3);
+  font-size: 1.25rem;
+  text-decoration: none;
+}
+
+.close:hover {
+  background: var(--bg-2);
+  color: var(--ink);
+}
+
+.detailEmpty {
+  display: grid;
+  gap: 8px;
+  justify-items: start;
+}
+
+.detailHead {
+  display: grid;
+  gap: 6px;
+}
+
+.detailSpec {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 8px;
+  margin: 0;
+  font-size: 0.8125rem;
+}
+
+.detailSpec a {
+  color: var(--place);
+  text-decoration: none;
+}
+
+.detailSpec a + a::before {
+  margin-right: 8px;
+  color: var(--faint);
+  content: '›';
+}
+
+.detailTitle {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 650;
+  line-height: 1.3;
+}
+
+.detailStatus {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 10px;
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+.detailStatus strong[data-status='failed'] {
+  color: var(--failed);
+}
+
+.detailStatus strong[data-status='passed'] {
+  color: var(--passed-ink);
+}
+
+.flaky {
+  color: var(--flaky-ink);
+  font-size: 0.8125rem;
+}
+
+.mono {
+  overflow-wrap: anywhere;
+  color: var(--ink-3);
+  font-family: var(--mono);
+  font-size: 0.75rem;
+}
+
+.detailBlock {
+  display: grid;
+  gap: 8px;
+  padding-top: 14px;
+  border-top: 1px solid var(--line);
+}
+
+.detailBlock > * {
+  margin: 0;
+}
+
+.tableScroll {
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8125rem;
+}
+
+.table th,
+.table td {
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--line);
+  text-align: left;
+  vertical-align: top;
+  white-space: nowrap;
+}
+
+.table th {
+  color: var(--ink-3);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.table a {
+  color: var(--place);
+  text-decoration: none;
+}
+
+.table a:hover {
+  text-decoration: underline;
+}
+
+.table code {
+  font-size: 0.75rem;
+}
+
+.num {
+  text-align: right !important;
+  font-variant-numeric: tabular-nums;
+}
+
+.ellipsis {
+  max-width: 12rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.detailCell {
+  max-width: 18rem;
+  overflow: hidden;
+  color: var(--ink-3);
+  text-overflow: ellipsis;
+}
+
+.table tr[data-status='failed'] .detailCell {
+  color: var(--failed-ink);
+}
+
+.cellStatus {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.param {
+  color: var(--ink-3);
+}
+
+.stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
+  gap: 10px 14px;
+}
+
+.stats div {
+  min-width: 0;
+}
+
+.stats dt {
+  color: var(--ink-3);
+  font-size: 0.75rem;
+}
+
+.stats dd {
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+.stats dd span {
+  color: var(--ink-3);
+  font-size: 0.75rem;
+  font-weight: 400;
+}
+
+.trend {
+  display: grid;
+  gap: 8px;
+}
+
+.spark {
+  margin: 0;
+}
+
+.spark figcaption {
+  margin-bottom: 4px;
+  color: var(--ink-3);
+  font-size: 0.75rem;
+}
+
+.spark svg {
+  display: block;
+  width: 100%;
+  height: 56px;
+  overflow: visible;
+}
+
+.sparkBase {
+  stroke: var(--line-2);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.sparkLine {
+  fill: none;
+  stroke: var(--ink-3);
+  stroke-width: 2;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+  vector-effect: non-scaling-stroke;
+}
+
+.spark circle {
+  fill: var(--ink-3);
+  stroke: var(--bg);
+  stroke-width: 1;
+}
+
+.spark circle[data-status='failed'] {
+  fill: var(--failed);
+}
+
+.sparkHit {
+  fill: transparent;
+}
+
+.sparkHit:hover {
+  fill: var(--place-soft);
+  fill-opacity: 0.5;
+}
+
+.strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
+}
+
+.strip span {
+  width: 8px;
+  height: 14px;
+  border-radius: 2px;
+  background: var(--not-reached);
+}
+
+.strip span[data-status='passed'] {
+  background: var(--passed);
+}
+
+.strip span[data-status='failed'] {
+  background: var(--failed);
+}
+
+.strip span[data-status='running'] {
+  background: var(--place);
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  font-size: 0.8125rem;
+}
+
+.tags > * {
+  padding: 1px 8px;
+  border: 1px solid var(--line-2);
+  border-radius: var(--pill);
+  color: var(--ink-2);
+  text-decoration: none;
+}
+
+.tags a {
+  color: var(--place);
+}
+
+/* Runs */
+
+.runs {
+  display: grid;
+  gap: 10px;
+}
+
+.runs > * {
+  margin: 0;
+}
+
+.runMeter {
+  display: inline-block;
+  width: 4rem;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+
+.runCounts {
+  display: inline-flex;
+  gap: 8px;
+  color: var(--ink-3);
+  font-variant-numeric: tabular-nums;
+}
+
+.runCounts strong {
+  color: var(--failed);
+}
+
+.runCounts [data-status='running'] {
+  color: var(--place);
+}
+
+.runTitle {
+  font-size: 1.125rem;
+  font-weight: 650;
+}
+
+.runMeta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 10px;
+  color: var(--ink-3);
+  font-size: 0.8125rem;
+}
+
+.runMeta > * + *::before {
+  margin-right: 10px;
+  color: var(--faint);
+  content: '·';
+}
+
+.runSummary {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 0.875rem;
+}
+
+.back {
+  display: inline-flex;
+  gap: 6px;
+  color: var(--place);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.actionsLine {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 14px;
+  font-size: 0.875rem;
+}
+
+.actionsLine a {
+  color: var(--place);
+}
+
+.actionsLine a.primary {
+  padding: 6px 14px;
+  border-radius: var(--pill);
+  background: var(--place);
+  color: #fff;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+/* Index */
+
+.indexHeading {
+  margin: 14px 10px 4px;
+  color: var(--ink-3);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.indexDomainHead {
+  display: flex;
+  align-items: center;
+}
+
+.indexDomainHead > a {
+  flex: 1;
+  min-width: 0;
+}
+
+.indexToggle {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+}
+
+.indexSpecs {
+  padding-left: 14px !important;
+}
+
+/* Too narrow for two columns: the open test above the list, one scroll. */
+@media (max-width: 1100px) {
+  .explorer[data-split] {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+  }
+
+  .explorer[data-split] .side {
+    order: -1;
+    flex: none;
+    overflow: visible;
+    border-left: 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .explorer[data-split] .main {
+    flex: none;
+    overflow: visible;
+  }
+}
+
+@media (max-width: 760px) {
+  .explorer,
+  .explorer[data-split] {
+    height: auto;
+    overflow: visible;
+  }
+
+  .main,
+  .side {
+    overflow: visible;
+  }
+
+  .main {
+    padding: 20px 16px 48px;
+  }
+
+  .side {
+    padding: 16px;
+  }
+
+  .tile[data-wide] {
+    grid-column: auto;
+  }
+
+  .columns {
+    grid-template-columns: 4rem 3rem;
+  }
+
+  .columns > span:nth-child(n + 3) {
+    display: none;
+  }
+
+  .groupMeter {
+    display: none;
+  }
+}