From 7020ef6c6078ffd4bbe66696fe893ada3ca9a8db Mon Sep 17 00:00:00 2001
From: Cheng-Hsuan Tsai <webcat@google.com>
Date: Fri, 14 Nov 2025 23:33:12 +0000
Subject: [PATCH] docs(docs-infra): make show code button more discoverable
 when collapsed

(cherry picked from commit 48cff8c128bf4f9c5be9e2c75be32e687f6ef611)
---
 .../example-viewer.component.html             | 15 ++++++++------
 .../example-viewer.component.scss             | 20 +++++++++++++++++++
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.html b/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.html
index ad6d9081b51..ca97a5bae7b 100644
--- a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.html
+++ b/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.html
@@ -4,12 +4,10 @@
       <span>{{ exampleMetadata()?.title }}</span>
     }
 
-    @if (view() === CodeExampleViewMode.MULTI_FILE) {
+    @if (view() === CodeExampleViewMode.MULTI_FILE && showCode()) {
       <mat-tab-group #codeTabs animationDuration="0ms" mat-stretch-tabs="false">
-        @if (showCode()) {
-          @for (tab of tabs(); track tab) {
-            <mat-tab [label]="tab.name" />
-          }
+        @for (tab of tabs(); track tab) {
+          <mat-tab [label]="tab.name" />
         }
       </mat-tab-group>
     }
@@ -19,13 +17,18 @@
         type="button"
         role="switch"
         class="docs-example-code-toggle"
+        [class.docs-example-code-toggle__show]="!showCode()"
         [attr.aria-checked]="showCode()"
         [attr.aria-label]="showCode() ? 'Hide code' : 'Show code'"
         (click)="showCode.set(!showCode())"
         [matTooltip]="showCode() ? 'Hide code' : 'Show code'"
         matTooltipPosition="above"
       >
-        <docs-icon>{{showCode() ? 'code_off' : 'code'}}</docs-icon>
+        @if (!showCode()) {
+          <span class="docs-example-show-code"><docs-icon>code</docs-icon> Show Code</span>
+        } @else {
+          <docs-icon>code_off</docs-icon>
+        }
       </button>
       <button
         type="button"
diff --git a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.scss b/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.scss
index baad27233d6..44cd6361c36 100644
--- a/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.scss
+++ b/adev/shared-docs/components/viewers/example-viewer/example-viewer.component.scss
@@ -57,6 +57,9 @@
   .docs-example-viewer-icons {
     display: flex;
     gap: 0.75rem;
+    width: 100%;
+    justify-content: flex-end;
+    padding-inline-start: 1rem;
 
     a,
     button {
@@ -79,6 +82,23 @@
         color: var(--tertiary-contrast);
       }
     }
+
+    .docs-example-code-toggle {
+      display: flex;
+      align-items: center;
+      width: auto;
+
+      &__show {
+        margin-right: auto;
+      }
+
+      .docs-example-show-code {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+      }
+    }
+
   }
 }