[GM3Restyling] Update AI settings to align with other setting tabs

This adapts the AI settings tab to the other updated settings
pages. In particular:

* Removing the header
* Adjusting the paddings on top of the settings container wrapper
* Updating the card shadow

Before: https://i.imgur.com/S0woW7I.png
After: https://i.imgur.com/yyHnN8J.png
Fixed: 368238837
Change-Id: Id0ee9055b5b55b856a1db005f667ef1aa5122a2b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6003766
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/settings/AISettingsTab.ts

@@ -138,10 +138,6 @@ const UIStrings = {
    *@description Label for a link to the privacy notice
    */
   privacyNotice: 'Google Privacy Policy',
-  /**
-   *@description Header for the AI innovations settings page
-   */
-  aiInnovations: 'AI innovations',
   /**
    *@description Label for a toggle to enable the Console Insights feature
    */
@@ -536,9 +532,6 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     LitHtml.render(html`
-      <header>
-        <h1>${i18nString(UIStrings.aiInnovations)}</h1>
-      </header>
       <div class="settings-container-wrapper" jslog=${VisualLogging.pane('chrome-ai')}>
         ${this.#renderSharedDisclaimer()}
         ${this.#consoleInsightsSetting || this.#aiAssistanceSetting ? html`

front_end/panels/settings/aiSettingsTab.css

@@ -8,13 +8,6 @@
   box-sizing: border-box;
 }
 
-header > h1 {
-  font-size: 18px;
-  font-weight: normal;
-  margin: 0;
-  white-space: nowrap;
-}
-
 .shared-disclaimer {
   background: linear-gradient(135deg, var(--sys-color-gradient-primary), var(--sys-color-gradient-tertiary));
   border-radius: var(--sys-size-5);
@@ -45,7 +38,7 @@ header > h1 {
   display: grid;
   grid-template-columns: 1fr auto auto;
   border-radius: var(--sys-size-5);
-  box-shadow: var(--sys-elevation-level3); /* stylelint-disable-line plugin/use_theme_colors */
+  box-shadow: var(--sys-elevation-level2);
   margin: var(--sys-size-11) 0 var(--sys-size-4);
   line-height: var(--sys-typescale-body5-line-height);
   min-width: var(--sys-size-28);
@@ -154,13 +147,9 @@ header > h1 {
 
 .settings-container-wrapper {
   position: absolute;
-  top: 31px;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: var(--sys-size-8) 0 0;
   overflow: auto;
-  padding: var(--sys-size-6);
-  border-top: 1px solid var(--sys-color-divider);
+  padding: var(--sys-size-3) var(--sys-size-6) var(--sys-size-6);
   display: flex;
   flex-direction: column;
 }