chromium/chrome/browser/resources/ash/settings/os_settings_main/os_settings_main.html

<style include="cr-hidden-style settings-shared">
  :host-context(body.revamp-wayfinding-enabled):host {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding-bottom: 16px;
    padding-inline-end: 16px;
    padding-inline-start: 16px;
  }

  /* Mirror styles from .cr-centered-card-container */
  :host-context(body:not(.revamp-wayfinding-enabled)) #mainPageContainer {
    margin: 0 auto;
    max-width: var(--cr-centered-card-max-width);
    min-width: 550px;
    width: calc(100% * var(--cr-centered-card-width-percentage));
  }

  :host-context(body.revamp-wayfinding-enabled) #mainPageContainer {
    /* Main page container should take up all available vertical space. */
    flex: 1;
    max-width: 958px;
    min-width: 640px;
    width: 100%;
  }

  #overscroll {
    margin-top: 64px;
  }

  .showing-subpage ~ #overscroll {
    display: none;
  }

  /* TODO(b/286076764) Remove this once the revamp is cleaned up. In the revamp,
   * overscroll is not necessary because only one category is shown at a time.
   */
  :host-context(body.revamp-wayfinding-enabled) #overscroll {
    display: none;
  }

  #noSearchResults {
    margin-top: 80px;
    text-align: center;
  }

  #noSearchResults div:first-child {
    font-size: 123%;  /* Should be 16px when 100% is 13px. */
    margin-bottom: 10px;
  }

  #managedHeader {
    border-top: none;
    font: var(--cros-body-2-font);
    /* margin-bottom is needed to compensate for the next element's 21px
      * margin at the top and 8px padding at the top. This leaves a 12px
      * padding between this element's content and the top of the next
      * element's text. */
    margin-bottom: calc(-21px - 8px);
    padding-bottom: 14px;
    padding-top: 14px;
    /* The next element spills over this element. This ensures the link
      * is clickable. */
    position: relative;
    z-index: 1;
    --cr-link-color: var(--cros-sys-primary);
    --cr-secondary-text-color: var(--cros-sys-secondary);
    --iron-icon-fill-color: var(--cros-sys-secondary);
  }

  :host-context(body.revamp-wayfinding-enabled) #managedHeader {
    margin-bottom: 8px;
  }
</style>
<template is="dom-if"
    if="[[showManagedHeader_(isShowingSubpage_, isShowingAboutPage_)]]" restamp>
  <managed-footnote id="managedHeader" show-device-info></managed-footnote>
</template>
<main-page-container id="mainPageContainer"
    prefs="{{prefs}}"
    page-availability="[[pageAvailability]]"
    advanced-toggle-expanded="{{advancedToggleExpanded}}">
</main-page-container>
<div id="overscroll" style="padding-bottom: [[overscroll_]]px"></div>