RPP: Fix category summary overflow bugs

Change-Id: I6bad643cb59b785c6e694d97ce52c89ccb535eb8
Bug: 394613588
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6235948
Commit-Queue: Adriana Ixba <[email protected]>
Auto-Submit: Paul Irish <[email protected]>
Reviewed-by: Adriana Ixba <[email protected]>

Author: paulirish

front_end/panels/timeline/components/timelineSummary.css

@@ -5,24 +5,21 @@
  */
 
 :host {
-  display: contents;
+  max-height: 100%;
+  overflow: hidden auto;
+  scrollbar-width: thin; /* ~11px wide reserved for gutter */
 }
 
 .timeline-summary {
   font-size: var(--sys-typescale-body4-size);
-  display: flex;
   flex-direction: column;
   padding: 0 var(--sys-size-6) var(--sys-size-4) var(--sys-size-8) ;
-  gap: 2px;
-  min-width: 192px;
-
 }
 
 .summary-range {
   font-weight: var(--ref-typeface-weight-medium);
-  height: 23px;
-  line-height: 21px;
-  padding-top: 0.5px;
+  height: 24.5px;
+  line-height: 22px;
 }
 
 .category-summary {

front_end/panels/timeline/timelinePanel.css

@@ -559,9 +559,19 @@
 }
 
 .timeline-details-range-summary {
-  overflow: auto;
   height: 100%;
   margin: var(--sys-size-4) 0;
+
+  & > devtools-performance-timeline-summary {
+    /* The category summary can't be more narrow than this, so we'll force a horizontal scrollbar
+       Also this style can't be applied on the element's :host without !important, thus its here. */
+    min-width: 192px;
+  }
+}
+
+/* Dont need to see insight chips in range summary */
+.timeline-details-range-summary + devtools-related-insight-chips {
+  display:none;
 }
 
 .timeline-details-chip-title > div {
@@ -660,7 +670,8 @@ devtools-performance-third-party-tree-view {
 
     /* Default data-grid has this element on the edge of the rows,
       we don't need them for the 3P table. So for now set display to none. */
-    .corner {
+    .corner,
+    &.data-grid-fits-viewport .corner {
       display: none;
     }
 
@@ -673,7 +684,7 @@ devtools-performance-third-party-tree-view {
     /* See column width comments in populateColumns() */
     max-width: min(100%, 550px);
     min-width: 350px; /* Lower than this, there's not enough room for the entity name */
-    padding: 0 var(--sys-size-8) 0 var(--sys-size-6);
+    padding: 0 0 0 var(--sys-size-6);
     border-left: var(--sys-size-1) solid var(--sys-color-divider);
   }