[GM3Restyling] Adjust settings page styles

This fixes a few settings page styles resulting from UX review, in
particular:

* Throttling and Locations: adjust to smaller card size
* Scrollbars: avoid layout shift due to scrollbars
* Cards: adjust setting card shadows, and max width

Bug: 368238837
Change-Id: I5761c3cbf9b17f67cee047c07d356218ccf2771c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6003764
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Commit-Queue: Ergün Erdoğmuş <[email protected]>
Auto-Submit: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/mobile_throttling/throttlingSettingsTab.css

@@ -10,6 +10,7 @@
 }
 
 .conditions-list {
+  margin-top: var(--sys-size-3);
   flex: auto;
 }
 
@@ -23,7 +24,9 @@
 }
 
 .conditions-list-text {
-  flex: 0 0 80px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  flex: 0 0 50px;
   user-select: none;
   color: var(--sys-color-on-surface);
   text-align: center;
@@ -48,6 +51,9 @@
 
 .conditions-list-title-text {
   flex: auto;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .conditions-list-separator {
@@ -97,6 +103,7 @@
 }
 
 .settings-card-container-wrapper {
+  scrollbar-gutter: stable;
   padding-bottom: var(--sys-size-8);
   overflow: auto;
   position: absolute;

front_end/panels/sensors/locationsSettingsTab.css

@@ -10,7 +10,7 @@
 }
 
 .locations-list {
-  min-width: 340px;
+  margin-top: var(--sys-size-3);
   flex: auto;
 }
 
@@ -72,6 +72,7 @@
 }
 
 .settings-card-container-wrapper {
+  scrollbar-gutter: stable;
   padding-bottom: var(--sys-size-8);
   overflow: auto;
   position: absolute;

front_end/panels/settings/settingsScreen.css

@@ -72,6 +72,7 @@ div:has(.settings-select) + div:has(.settings-select) {
 }
 
 .settings-card-container-wrapper {
+  scrollbar-gutter: stable;
   padding-bottom: var(--sys-size-8);
   overflow: auto;
   position: absolute;

front_end/ui/components/cards/card.css

@@ -5,14 +5,14 @@
  */
 :host {
   display: flex;
-  max-width: var(--sys-size-37);
+  max-width: var(--sys-size-35);
   width: 100%;
 }
 
 .card {
   break-inside: avoid;
   min-width: var(--sys-size-31);
-  max-width: var(--sys-size-37);
+  max-width: var(--sys-size-35);
   margin: var(--sys-size-3) var(--sys-size-6) var(--sys-size-5) var(--sys-size-5);
   flex: 1;
 }
@@ -38,7 +38,7 @@ slot[name="heading-suffix"]::slotted(*) {
 
 .content-container {
   border-radius: var(--sys-shape-corner-small);
-  box-shadow: var(--sys-elevation-level3);
+  box-shadow: var(--sys-elevation-level2);
   display: flex;
   flex-direction: column;
   background: var(--app-color-card-background);