[FieldSettings] Fix field settings dialog paddings

Before: blob:https://imgur.com/187d3cf2-2d0f-49a5-8349-95daea2ceece
After: https://i.imgur.com/k04Vmy8.png
Bug: 383278166
Change-Id: I206480352dcc8bd7ef098404e92b64ab51eabb2e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6108798
Reviewed-by: Nancy Li <[email protected]>
Commit-Queue: Nancy Li <[email protected]>
Auto-Submit: Kim-Anh Tran <[email protected]>

Author: ktran

front_end/panels/timeline/components/FieldSettingsDialog.ts

@@ -342,12 +342,12 @@ export class FieldSettingsDialog extends HTMLElement {
         .position=${Dialogs.Dialog.DialogVerticalPosition.AUTO}
         .horizontalAlignment=${Dialogs.Dialog.DialogHorizontalAlignment.CENTER}
         .jslogContext=${'timeline.field-data.settings'}
+        .dialogTitle=${i18nString(UIStrings.configureFieldData)}
         on-render=${ComponentHelpers.Directives.nodeRenderedCallback(node => {
           this.#dialog = node as Dialogs.Dialog.Dialog;
         })}
       >
         <div class="content">
-          <h2 class="title">${i18nString(UIStrings.configureFieldData)}</h2>
           <div>${descriptionEl}</div>
           <div class="privacy-disclosure">
             <h3 class="section-title">${i18nString(UIStrings.privacyDisclosure)}</h3>

front_end/panels/timeline/components/fieldSettingsDialog.css

@@ -16,13 +16,6 @@ devtools-dialog {
   --override-transparent: color-mix(in sRGB, var(--color-background) 80%, transparent);
 }
 
-.title {
-  font-size: var(--sys-typescale-headline4-size);
-  line-height: var(--sys-typescale-headline4-line-height);
-  font-weight: var(--ref-typeface-weight-medium);
-  margin: 0;
-}
-
 .section-title {
   font-size: var(--sys-typescale-headline5-size);
   line-height: var(--sys-typescale-headline5-line-height);
@@ -51,7 +44,7 @@ details > summary {
 
 .content {
   max-width: 360px;
-  padding: 16px 4px 18px;
+  padding: 0 var(--sys-size-8) var(--sys-size-2);
   box-sizing: border-box;
 }
 
@@ -73,7 +66,7 @@ details > summary {
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-top: 6px;
+  margin-top: var(--sys-size-6);
 }
 
 .config-button {