diff --git a/docs/src/app/shared/example-viewer/example-viewer.html b/docs/src/app/shared/example-viewer/example-viewer.html
index 9abc00951fcb..5d6683a4bafa 100644
--- a/docs/src/app/shared/example-viewer/example-viewer.html
+++ b/docs/src/app/shared/example-viewer/example-viewer.html
@@ -5,72 +5,106 @@
   @if (view() === 'snippet') {
     <div class="docs-example-viewer-source-compact">
       <div class="docs-button-bar">
-        <button mat-icon-button type="button" (click)="copySource(snippet())"
-                class="docs-example-source-copy docs-example-button" matTooltip="Copy snippet"
-                title="Copy example source" aria-label="Copy example source to clipboard">
+        <button
+          mat-icon-button
+          type="button"
+          (click)="copySource(snippet())"
+          class="docs-example-source-copy docs-example-button"
+          matTooltip="Copy snippet"
+          title="Copy example source"
+          aria-label="Copy example source to clipboard"
+        >
           <mat-icon>content_copy</mat-icon>
         </button>
-        <button mat-icon-button type="button" (click)="toggleCompactView()"
-                class="docs-example-compact-toggle docs-example-button" matTooltip="View full example"
-                aria-label="View less">
+        <button
+          mat-icon-button
+          type="button"
+          (click)="toggleCompactView()"
+          class="docs-example-compact-toggle docs-example-button"
+          matTooltip="View full example"
+          aria-label="View less"
+        >
           <mat-icon>
             <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" focusable="false">
-              <polygon points="13,3 13,5 17.59,5 5,17.59 5,13 3,13 3,21 11,21 11,19 6.41,19 19,6.41 19,11 21,11 21,3"/>
+              <polygon
+                points="13,3 13,5 17.59,5 5,17.59 5,13 3,13 3,21 11,21 11,19 6.41,19 19,6.41 19,11 21,11 21,3"
+              />
             </svg>
           </mat-icon>
         </button>
       </div>
 
       @if (fileUrl) {
-        <code-snippet [source]="fileUrl"/>
+        <code-snippet [source]="fileUrl" />
       }
     </div>
-  }
-
-  @else {
+  } @else {
     <div class="docs-example-viewer-title">
-      <div class="docs-example-viewer-title-spacer">{{exampleData?.title}}</div>
+      <p>{{exampleData?.title}}</p>
+
+      <div class="docs-example-viewer-actions">
+        <button
+          mat-icon-button
+          type="button"
+          [attr.aria-label]="'Copy link to ' + exampleData?.title + ' example to the clipboard'"
+          matTooltip="Copy link to example"
+          (click)="_copyLink()"
+        >
+          <mat-icon>link</mat-icon>
+        </button>
 
-      <button
-        mat-icon-button
-        type="button"
-        [attr.aria-label]="'Copy link to ' + exampleData?.title + ' example to the clipboard'"
-        matTooltip="Copy link to example"
-        (click)="_copyLink()">
-        <mat-icon>link</mat-icon>
-      </button>
+        @if (showCompactToggle()) {
+          <button
+            mat-icon-button
+            (click)="toggleCompactView()"
+            matTooltip="View snippet only"
+            aria-label="View less"
+          >
+            <mat-icon>
+              <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" focusable="false">
+                <path
+                  d="M15.41,10H20v2h-8V4h2v4.59L20.59,2L22,3.41L15.41,10z M4,12v2h4.59L2,20.59L3.41,22L10,15.41V20h2v-8H4z"
+                />
+              </svg>
+            </mat-icon>
+          </button>
+        }
 
-      @if (showCompactToggle()) {
-        <button mat-icon-button
-                (click)="toggleCompactView()"
-                matTooltip="View snippet only"
-                aria-label="View less">
+        <button
+          mat-icon-button
+          type="button"
+          (click)="toggleSourceView()"
+          [matTooltip]="view() === 'demo' ? 'View code' : 'Hide code'"
+          aria-label="View source"
+        >
           <mat-icon>
-          <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" focusable="false">
-            <path
-              d="M15.41,10H20v2h-8V4h2v4.59L20.59,2L22,3.41L15.41,10z M4,12v2h4.59L2,20.59L3.41,22L10,15.41V20h2v-8H4z"/>
-          </svg>
+            {{view() === 'demo' ? 'code' : 'code_off'}}
           </mat-icon>
         </button>
-      }
-
-      <button mat-icon-button type="button" (click)="toggleSourceView()"
-              [matTooltip]="view() === 'demo' ? 'View code' : 'Hide code'" aria-label="View source">
-        <mat-icon>code</mat-icon>
-      </button>
 
-      <stackblitz-button [example]="example" />
+        <stackblitz-button [example]="example" />
+      </div>
     </div>
 
     @if (view() === 'full') {
       <div class="docs-example-viewer-source">
-        <mat-tab-group animationDuration="0ms" [(selectedIndex)]="selectedTab" mat-stretch-tabs="false">
+        <mat-tab-group
+          animationDuration="0ms"
+          [(selectedIndex)]="selectedTab"
+          mat-stretch-tabs="false"
+        >
           @for (tabName of _exampleTabNames(); track tabName) {
             <mat-tab [label]="tabName">
               <div class="docs-button-bar">
-                <button mat-icon-button type="button" (click)="copySource(snippet(), selectedTab())"
-                        class="docs-example-source-copy docs-example-button" matTooltip="Copy example source"
-                        title="Copy example source" aria-label="Copy example source to clipboard">
+                <button
+                  mat-icon-button
+                  type="button"
+                  (click)="copySource(snippet(), selectedTab())"
+                  class="docs-example-source-copy docs-example-button"
+                  matTooltip="Copy example source"
+                  title="Copy example source"
+                  aria-label="Copy example source to clipboard"
+                >
                   <mat-icon>content_copy</mat-icon>
                 </button>
               </div>
@@ -87,7 +121,7 @@
       @let componentType = _exampleComponentType();
 
       @if (componentType && !example?.includes('harness')) {
-        <ng-template [ngComponentOutlet]="componentType"/>
+        <ng-template [ngComponentOutlet]="componentType" />
       } @else {
         <div>This example contains tests. Open in Stackblitz to run the tests.</div>
       }
diff --git a/docs/src/app/shared/example-viewer/example-viewer.scss b/docs/src/app/shared/example-viewer/example-viewer.scss
index 9f04f3ea9edb..2044036ec64b 100644
--- a/docs/src/app/shared/example-viewer/example-viewer.scss
+++ b/docs/src/app/shared/example-viewer/example-viewer.scss
@@ -13,21 +13,23 @@
 }
 
 .docs-example-viewer-title {
-  align-content: center;
   align-items: center;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   padding: 16px 16px 0 24px;
   color: var(--mat-sys-on-surface-variant);
 }
 
+.docs-example-viewer-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .docs-example-viewer-source code-snippet {
   border-bottom: 1px solid var(--mat-sys-outline-variant);
 }
 
-.docs-example-viewer-title-spacer {
-  flex: 1 1 auto;
-}
 
 .docs-example-viewer-body {
   padding: 16px 24px;