[Recorder] Fix double scroll bars

Other changes include:
Making the toolbar wrapping this remove the
scrollbar all together, mimics the other panels.
Fix the Replay Setting getting out of view. And
another regression related to when there are a
more steps the step view was not scrollable.

Fixed: 404154247
Change-Id: I211dd0a2993ab9a0a3e2487b7082869a1171d939
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6357021
Reviewed-by: Kim-Anh Tran <[email protected]>
Commit-Queue: Nikolay Vitkov <[email protected]>

Author: Lightning00Blade

front_end/panels/recorder/RecorderController.ts

@@ -1369,9 +1369,7 @@ export class RecorderController extends LitElement {
               .showSelectedItem=${false}
               .open=${this.exportMenuExpanded}
             >
-              <devtools-menu-group .name=${i18nString(
-      UIStrings.export,
-    )}>
+              <devtools-menu-group .name=${i18nString(UIStrings.export)}>
                 ${Lit.Directives.repeat(
                   this.#builtInConverters,
                   converter => {
@@ -1385,9 +1383,7 @@ export class RecorderController extends LitElement {
                   },
                 )}
               </devtools-menu-group>
-              <devtools-menu-group .name=${i18nString(
-      UIStrings.exportViaExtensions,
-    )}>
+              <devtools-menu-group .name=${i18nString(UIStrings.exportViaExtensions)}>
                 ${Lit.Directives.repeat(
                   this.extensionConverters,
                   converter => {

front_end/panels/recorder/RecorderPanel.ts

@@ -20,7 +20,6 @@ export class RecorderPanel extends UI.Panel.Panel {
     this.element.setAttribute('jslog', `${VisualLogging.panel('chrome-recorder').track({resize: true})}`);
     this.#controller = new RecorderController();
     this.contentElement.append(this.#controller);
-    this.contentElement.style.minWidth = '400px';
   }
 
   static instance(

front_end/panels/recorder/components/recordingView.css

@@ -32,7 +32,8 @@
   background-color: var(--sys-color-cdt-base-container);
   z-index: 0;
   position: relative;
-  container: sections / inline-size; /* stylelint-disable-line property-no-unknown */
+  /* stylelint-disable-next-line property-no-unknown */
+  container: sections / inline-size;
 }
 
 .section {
@@ -64,7 +65,8 @@
 .screenshot-wrapper {
   flex: 0 0 80px;
   padding-top: 32px;
-  z-index: 2; /* We want this to be on top of `.step-overlay` */
+  /* We want this to be on top of `.step-overlay` */
+  z-index: 2;
 }
 
 /* stylelint-disable-next-line at-rule-no-unknown */
@@ -231,6 +233,7 @@
 .settings {
   margin-top: 4px;
   display: flex;
+  flex-wrap: wrap;
   font-size: 12px;
   line-height: 20px;
   letter-spacing: 0.03em;
@@ -339,7 +342,7 @@ devtools-split-view {
 }
 
 [slot="main"] {
-  overflow: hidden;
+  overflow: hidden auto;
 }
 
 [slot="sidebar"] {

front_end/panels/recorder/recorderController.css

@@ -38,12 +38,10 @@ devtools-create-recording-view {
 .header {
   background-color: var(--sys-color-cdt-base-container);
   display: flex;
-  flex-direction: row;
+  flex-flow: row wrap;
   align-items: center;
   border-bottom: 1px solid var(--sys-color-divider);
   padding: 0 5px;
-  min-height: 29px;
-  max-height: 29px;
   gap: 3px;
 }
 
@@ -60,7 +58,7 @@ select {
   border: none;
   border-radius: var(--sys-shape-corner-extra-small);
   height: var(--sys-size-9);
-  max-width: 180px;
+  max-width: 140px;
   min-width: 140px;
   padding: 0 var(--sys-size-6) 0 var(--sys-size-5);
   position: relative;
@@ -80,12 +78,15 @@ select {
   }
 
   &:hover:active {
-    /* stylelint-disable plugin/use_theme_colors */
-    background:
-      var(--combobox-dropdown-arrow),
-      linear-gradient(var(--sys-color-state-hover-on-subtle), var(--sys-color-state-hover-on-subtle)),
-      linear-gradient(var(--sys-color-state-ripple-neutral-on-subtle), var(--sys-color-state-ripple-neutral-on-subtle));
-    /* stylelint-enable plugin/use_theme_colors */
+    background: var(--combobox-dropdown-arrow),
+      linear-gradient(
+        var(--sys-color-state-hover-on-subtle),
+        var(--sys-color-state-hover-on-subtle)
+      ),
+      linear-gradient(
+        var(--sys-color-state-ripple-neutral-on-subtle),
+        var(--sys-color-state-ripple-neutral-on-subtle)
+      );
     background-position: right center;
     background-repeat: no-repeat;
   }
@@ -166,7 +167,8 @@ devtools-recording-list-view {
     font: var(--sys-typescale-body4-regular);
     color: var(--sys-color-on-surface-subtle);
 
-    > x-link {  /* stylelint-disable-line selector-type-no-unknown */
+    /* stylelint-disable-next-line selector-type-no-unknown */
+    > x-link {
       white-space: nowrap;
       margin-left: var(--sys-size-3);
     }