chrome-devtools-frontend/front_end/panels/timeline/components/timelineRangeSummaryView.css

Chrome DevTools UI

/*
 * Copyright 2026 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

:host {
  display: block;
  height: 100%;
  container-type: inline-size;
}

.timeline-details-range-summary {
  display: flex;
  padding: var(--sys-size-4) 0 0;
  height: 100%;
}

.timeline-tree-view {
  border-left: var(--sys-size-1) solid var(--sys-color-divider);
}

@container (max-width: 450px) {
  .timeline-details-range-summary {
    display: grid;
    /* Make sure the 3P table is only as large as the range summary at most */
    grid-template-rows: 1fr minmax(50px, 1fr);
    gap: var(--sys-size-4);
  }

  .timeline-summary {
    width: 100%;
  }

  .timeline-tree-view {
    border-left: none;
  }
}

.timeline-summary {
  flex-grow: 0;
}