From d8204bf5845dbad23bc2cbfc995992479483c103 Mon Sep 17 00:00:00 2001
From: hawkgs <hawk.dvp@gmail.com>
Date: Mon, 28 Apr 2025 19:02:29 +0300
Subject: [PATCH] docs(docs-infra): fix function api ref header width (#61022)

Fix the width of the function API reference header when the viewport width is for-desktop-down.

PR Close #61022
---
 .../rendering/templates/function-reference.tsx | 18 ++++++++----------
 .../rendering/templates/highlight-ts.tsx       |  2 +-
 adev/shared-docs/styles/_reference.scss        | 16 ++++++----------
 3 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/adev/shared-docs/pipeline/api-gen/rendering/templates/function-reference.tsx b/adev/shared-docs/pipeline/api-gen/rendering/templates/function-reference.tsx
index 219d526ca41..ac9536744fc 100644
--- a/adev/shared-docs/pipeline/api-gen/rendering/templates/function-reference.tsx
+++ b/adev/shared-docs/pipeline/api-gen/rendering/templates/function-reference.tsx
@@ -38,16 +38,14 @@ export const signatureCard = (
     <div id={opts.id} class={REFERENCE_MEMBER_CARD}>
       <header class={REFERENCE_MEMBER_CARD_HEADER}>
         {printSignaturesAsHeader ? (
-          <code>
-            <HighlightTypeScript
-              code={printInitializerFunctionSignatureLine(
-                name,
-                signature,
-                // Always omit types in signature headers, to keep them short.
-                true,
-              )}
-            />
-          </code>
+          <HighlightTypeScript
+            code={printInitializerFunctionSignatureLine(
+              name,
+              signature,
+              // Always omit types in signature headers, to keep them short.
+              true,
+            )}
+          />
         ) : (
           <>
             <h3>{name}</h3>
diff --git a/adev/shared-docs/pipeline/api-gen/rendering/templates/highlight-ts.tsx b/adev/shared-docs/pipeline/api-gen/rendering/templates/highlight-ts.tsx
index 90caa68e537..5de0ab28834 100644
--- a/adev/shared-docs/pipeline/api-gen/rendering/templates/highlight-ts.tsx
+++ b/adev/shared-docs/pipeline/api-gen/rendering/templates/highlight-ts.tsx
@@ -15,5 +15,5 @@ export function HighlightTypeScript(props: {code: string}) {
   const result = codeToHtml(props.code, 'typescript');
   const withScrollTrack = result.replace(/^(<pre class="shiki)/, '$1 docs-mini-scroll-track');
 
-  return <RawHtml value={withScrollTrack} />;
+  return <RawHtml value={withScrollTrack} className="docs-code" />;
 }
diff --git a/adev/shared-docs/styles/_reference.scss b/adev/shared-docs/styles/_reference.scss
index 1734ac96fe7..ec566ee18e8 100644
--- a/adev/shared-docs/styles/_reference.scss
+++ b/adev/shared-docs/styles/_reference.scss
@@ -138,20 +138,16 @@
           border-radius: 0.25rem;
         }
 
-        code {
-          font-size: 0.875rem;
-          overflow: hidden;
+        .docs-code {
+          flex: 1;
 
-          &:has(pre) {
-            padding: 0;
+          button[docs-copy-source-code] {
+            display: none;
           }
         }
 
-        pre {
-          margin: 0;
-
-          /* Do we have a better alternative ? */
-          overflow: auto;
+        code {
+          font-size: 0.875rem;
         }
 
         h3 {