@redocly/theme 0.71.0-next.5 → 0.71.0-next.7

package/src/components/MissingTranslationNotice/MissingTranslationNotice.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+
+import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
+import { TranslateIcon } from '@redocly/theme/icons/TranslateIcon/TranslateIcon';
+import { Markdown } from '@redocly/theme/components/Markdown/Markdown';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export type MissingTranslationNoticeProps = {
+  className?: string;
+};
+
+/**
+ * Tells the reader that the page shows the original language,
+ * because the translation for the selected locale is missing.
+ * Renders only on fallback pages of a locale that sets `showMissingTranslationNotice`.
+ * The reader can close the notice for the current page.
+ */
+export function MissingTranslationNotice({
+  className,
+}: MissingTranslationNoticeProps): JSX.Element | null {
+  const { useTranslate, useMarkdownText, usePageProps, useL10nConfig } = useThemeHooks();
+  const { translate } = useTranslate();
+  const { isTranslationFallback } = usePageProps<{ isTranslationFallback?: boolean }>();
+  const { currentLocale, defaultLocale, locales } = useL10nConfig();
+  const [isDismissed, setIsDismissed] = React.useState(false);
+
+  const isShown =
+    isTranslationFallback === true &&
+    currentLocale !== defaultLocale &&
+    locales.some(
+      ({ code, showMissingTranslationNotice }) =>
+        code === currentLocale && showMissingTranslationNotice === true,
+    );
+  const language = locales.find(({ code }) => code === defaultLocale)?.name || defaultLocale;
+  const content = useMarkdownText(
+    isShown ? translate('missingTranslationNotice.content', { language }) : '',
+  );
+
+  if (!isShown || isDismissed) {
+    return null;
+  }
+
+  return (
+    <MissingTranslationNoticeWrapper
+      className={className}
+      data-component-name="MissingTranslationNotice/MissingTranslationNotice"
+    >
+      <Icon color="--missing-translation-notice-icon-color" />
+      <Content>
+        <Title>
+          {translate('missingTranslationNotice.title', {
+            defaultValue: 'This page has not yet been translated',
+          })}
+        </Title>
+        <Markdown compact>{content}</Markdown>
+      </Content>
+      <CloseButton
+        type="button"
+        aria-label={translate('missingTranslationNotice.close', { defaultValue: 'Close' })}
+        onClick={() => setIsDismissed(true)}
+      >
+        <CloseIcon color="--missing-translation-notice-text-color" />
+      </CloseButton>
+    </MissingTranslationNoticeWrapper>
+  );
+}
+
+const MissingTranslationNoticeWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--missing-translation-notice-gap);
+
+  padding: var(--missing-translation-notice-padding);
+  margin: var(--missing-translation-notice-margin-vertical) 0;
+  color: var(--missing-translation-notice-text-color);
+  background-color: var(--missing-translation-notice-bg-color);
+  border: 1px solid var(--missing-translation-notice-border-color);
+  border-left: var(--missing-translation-notice-accent-width) solid
+    var(--missing-translation-notice-accent-color);
+  border-radius: var(--missing-translation-notice-border-radius);
+`;
+
+const Icon = styled(TranslateIcon)`
+  flex-shrink: 0;
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: var(--spacing-xxs);
+
+  font-size: var(--missing-translation-notice-font-size);
+  line-height: var(--missing-translation-notice-line-height);
+`;
+
+const Title = styled.span`
+  font-size: var(--missing-translation-notice-title-font-size);
+  font-weight: var(--missing-translation-notice-title-font-weight);
+`;
+
+const CloseButton = styled.button`
+  display: flex;
+  flex-shrink: 0;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+`;

package/src/components/MissingTranslationNotice/variables.dark.ts

@@ -0,0 +1,7 @@
+import { css } from 'styled-components';
+
+export const missingTranslationNoticeDarkMode = css`
+  --missing-translation-notice-bg-color: var(--color-warm-grey-3); // @presenter Color
+  --missing-translation-notice-icon-color: var(--color-blue-4); // @presenter Color
+  --missing-translation-notice-accent-color: var(--color-blue-4); // @presenter Color
+`;

package/src/components/MissingTranslationNotice/variables.ts

@@ -0,0 +1,26 @@
+import { css } from 'styled-components';
+
+export const missingTranslationNotice = css`
+  /**
+   * @tokens Missing translation notice
+   */
+
+  --missing-translation-notice-bg-color: var(--color-warm-grey-1); // @presenter Color
+  --missing-translation-notice-text-color: var(--text-color-primary); // @presenter Color
+  --missing-translation-notice-icon-color: var(--color-blue-6); // @presenter Color
+  --missing-translation-notice-border-color: var(--border-color-secondary); // @presenter Color
+  --missing-translation-notice-accent-color: var(--color-blue-6); // @presenter Color
+
+  --missing-translation-notice-accent-width: 3px; // @presenter Spacing
+  --missing-translation-notice-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+  --missing-translation-notice-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
+  --missing-translation-notice-margin-vertical: var(--spacing-base); // @presenter Spacing
+  --missing-translation-notice-gap: var(--spacing-sm); // @presenter Spacing
+
+  --missing-translation-notice-title-font-size: var(--font-size-base); // @presenter FontSize
+  --missing-translation-notice-title-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --missing-translation-notice-font-size: var(--font-size-base); // @presenter FontSize
+  --missing-translation-notice-line-height: var(--line-height-base); // @presenter LineHeight
+
+  // @tokens End
+`;

package/src/components/PageActions/PageActions.tsx

@@ -78,11 +78,12 @@ export function PageActions(props: PageActionProps): JSX.Element | null {
       <SplitButton
         portalled
         variant="outlined"
-        size="medium"
+        size="small"
         toggleAriaLabel={translate('page.actions.moreActions', 'More actions')}
         button={
           <Button
             variant="outlined"
+            size="small"
             icon={renderIcon(buttonAction, actionState)}
             to={'link' in buttonAction ? buttonAction.link : undefined}
             external
@@ -112,10 +113,12 @@ function renderIcon(buttonAction: PageAction, actionState: ActionState) {
 const PageActionsWrapper = styled.div`
   margin-left: auto;
   padding-left: var(--page-actions-padding-left);
+  user-select: none;
   --button-color: var(--page-actions-button-text-color);
 
-  .button-group-size-medium .button.button-size-medium {
+  && .button.button-size-small {
     --button-icon-left-padding: var(--page-actions-button-padding);
+    --button-icon-padding: var(--page-actions-toggle-padding);
   }
 `;
 

package/src/components/PageActions/variables.ts

@@ -5,7 +5,8 @@ export const pageActions = css`
   --page-actions-padding-left: var(--spacing-sm);
 
   --page-actions-button-text-color: var(--text-color-secondary);
-  --page-actions-button-padding: 5px 14px 5px var(--spacing-sm);
+  --page-actions-button-padding: 0 var(--spacing-sm) 0 10px;
+  --page-actions-toggle-padding: 4px;
 
   --page-actions-dropdown-max-height: fit-content;
 

package/src/components/Search/FilterFields/SearchFilterFieldSelect.tsx

@@ -92,7 +92,7 @@ function facetValueToSelectOption(facetValue?: SearchFacetCount | string) {
       value: facetValue,
     };
   } else {
-    const { value, count, isCounterVisible } = facetValue as SearchFacetCount;
+    const { value, count, isCounterVisible } = facetValue;
     return {
       element: (
         <FilterSelectOptionWrapper>

package/src/components/Select/Select.tsx

@@ -46,8 +46,7 @@ export function Select<T>(props: SelectProps<T>): JSX.Element {
       .map((value) => {
         const selectedOption = options.find((option) => option.value === value);
         return (
-          selectedOption ||
-          (typeof value === 'string' ? ({ value } as SelectOption<T>) : (value as SelectOption<T>))
+          selectedOption || (typeof value === 'string' ? { value } : (value as SelectOption<T>))
         );
       })
       .filter((option) => !!option);

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -7,7 +7,7 @@ export const useThemeHooks = vi.fn(() => ({
     translate: vi.fn((key: string, defaultValue: string | { defaultValue: string }) =>
       defaultValue
         ? typeof defaultValue !== 'string'
-          ? (defaultValue as { defaultValue: string }).defaultValue
+          ? defaultValue.defaultValue
           : defaultValue
         : key,
     ),

package/src/core/hooks/use-active-section-id.ts

@@ -60,7 +60,15 @@ export function useActiveSectionId(
       return;
     }
 
+    // A one-event scroll jump is read before the section it lands on stops being skipped.
+    const onContentVisibilityChange = (event: Event) => {
+      if ('skipped' in event && event.skipped === false) {
+        scrollListener();
+      }
+    };
+
     window.addEventListener('scroll', scrollListener, { capture: false });
+    window.addEventListener('contentvisibilityautostatechange', onContentVisibilityChange, true);
     const initialRead = setTimeout(() => {
       scrollListener();
     }, 10);
@@ -69,6 +77,11 @@ export function useActiveSectionId(
       clearTimeout(initialRead);
       scrollListener.cancel();
       window.removeEventListener('scroll', scrollListener);
+      window.removeEventListener(
+        'contentvisibilityautostatechange',
+        onContentVisibilityChange,
+        true,
+      );
     };
   }, [location, heightOffset, scrollListener]);
 

package/src/core/hooks/use-codeblock-tabs-controls.ts

@@ -41,7 +41,7 @@ export function useCodeBlockTabsControls({ tabs, containerRef, tabRefs }: CodeBl
       resizeObserver.observe(container);
 
       return () => {
-        resizeObserver.unobserve(container as HTMLDivElement);
+        resizeObserver.unobserve(container);
       };
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/core/hooks/use-page-actions.ts

@@ -8,6 +8,7 @@ import { CopyIcon } from '@redocly/theme/icons/CopyIcon/CopyIcon';
 import { ChatGptIcon } from '@redocly/theme/icons/ChatGptIcon/ChatGptIcon';
 import { ClaudeIcon } from '@redocly/theme/icons/ClaudeIcon/ClaudeIcon';
 import { GrokIcon } from '@redocly/theme/icons/GrokIcon/GrokIcon';
+import { McpIcon } from '@redocly/theme/icons/McpIcon/McpIcon';
 import { MarkdownFullIcon } from '@redocly/theme/icons/MarkdownFullIcon/MarkdownFullIcon';
 import { VSCodeIcon } from '@redocly/theme/icons/VSCodeIcon/VSCodeIcon';
 import { CursorIcon } from '@redocly/theme/icons/CursorIcon/CursorIcon';
@@ -33,9 +34,10 @@ const DEFAULT_ENABLED_ACTIONS = [
   'chatgpt',
   'claude',
   'grok',
-  'docs-mcp-cursor',
-  'docs-mcp-vscode',
   'docs-mcp-claude',
+  'docs-mcp-vscode',
+  'docs-mcp-cursor',
+  'copy-mcp-url',
 ] as const;
 
 export type PageActionType =
@@ -44,9 +46,10 @@ export type PageActionType =
   | 'chatgpt'
   | 'claude'
   | 'grok'
-  | 'docs-mcp-cursor'
-  | 'docs-mcp-vscode'
   | 'docs-mcp-claude'
+  | 'docs-mcp-vscode'
+  | 'docs-mcp-cursor'
+  | 'copy-mcp-url'
   // Used in OpenAPI docs x-mcp
   | 'mcp-cursor'
   | 'mcp-vscode';
@@ -147,6 +150,24 @@ export function usePageActions(
       'docs-mcp-cursor': createMCPHandler('cursor', false),
       'docs-mcp-vscode': createMCPHandler('vscode', false),
       'docs-mcp-claude': createMCPHandler('claude', false),
+      'copy-mcp-url': () => ({
+        buttonText: translate('page.actions.connectMcp.copyUrl', 'Copy MCP server URL'),
+        title: translate('page.actions.connectMcp.copyUrl', 'Copy MCP server URL'),
+        description: translate(
+          'page.actions.connectMcp.copyUrlDescription',
+          'Copy the MCP server URL to the clipboard',
+        ),
+        iconComponent: McpIcon,
+        onClick: () => {
+          ClipboardService.copyCustom(mcpConfig.serverUrl);
+          telemetry.sendPageActionsClickedMessage([
+            {
+              ...getBaseDataAttributes('pageActions', 'button'),
+              actionType: 'copy-mcp-url',
+            },
+          ]);
+        },
+      }),
       'mcp-cursor': createMCPHandler('cursor', true),
       'mcp-vscode': createMCPHandler('vscode', true),
 
@@ -221,6 +242,7 @@ export function usePageActions(
     isPublic,
     mcpUrl,
     mcpConfig.isMcpDisabled,
+    mcpConfig.serverUrl,
     pageSlug,
     actions,
     translate,
@@ -356,6 +378,7 @@ function shouldHideActionByType(
     case 'docs-mcp-cursor':
     case 'docs-mcp-vscode':
     case 'docs-mcp-claude':
+    case 'copy-mcp-url':
       return Boolean(mcpUrl) || isMcpDisabled;
     case 'mcp-cursor':
     case 'mcp-vscode':

package/src/core/styles/dark.ts

@@ -16,6 +16,7 @@ import { pageActionsDarkMode } from '@redocly/theme/components/PageActions/varia
 import { tooltipDarkMode } from '@redocly/theme/components/Tooltip/variables.dark';
 import { bannerDarkMode } from '@redocly/theme/components/Banner/variables.dark';
 import { admonitionDarkMode } from '@redocly/theme/components/Admonition/variables.dark';
+import { missingTranslationNoticeDarkMode } from '@redocly/theme/components/MissingTranslationNotice/variables.dark';
 import { codeBlockDarkMode } from '@redocly/theme/components/CodeBlock/variables.dark';
 
 import { activeBrandPaletteDark } from './palette.dark';
@@ -363,6 +364,7 @@ export const darkMode = css`
   ${tooltipDarkMode}
   ${bannerDarkMode}
   ${admonitionDarkMode}
+  ${missingTranslationNoticeDarkMode}
   ${badgesDarkMode}
   ${numberedListDarkMode}
   ${activeBrandPaletteDark}

package/src/core/styles/global.ts

@@ -18,6 +18,7 @@ import { dropdown } from '@redocly/theme/components/Dropdown/variables';
 import { tooltip } from '@redocly/theme/components/Tooltip/variables';
 import { checkbox } from '@redocly/theme/icons/CheckboxIcon/variables';
 import { admonition } from '@redocly/theme/components/Admonition/variables';
+import { missingTranslationNotice } from '@redocly/theme/components/MissingTranslationNotice/variables';
 import { footer } from '@redocly/theme/components/Footer/variables';
 import { button } from '@redocly/theme/components/Button/variables';
 import { aiAssistantButton, connectMcpButton } from '@redocly/theme/components/Buttons/variables';
@@ -1295,6 +1296,7 @@ const replay = css`
 export const tokens = css`
   ${accordion}
   ${admonition}
+  ${missingTranslationNotice}
   ${apiReferenceDocs}
   ${apiReferencePanels}
   ${badges}

package/src/core/types/hooks.ts

@@ -39,7 +39,7 @@ import type {
   ToolCall,
 } from './search';
 import type { SubmitFeedbackParams } from './feedback';
-import type { TFunction } from './l10n';
+import type { Locale, TFunction } from './l10n';
 import type { BreadcrumbItem } from './breadcrumb';
 import type { UseConsentResult } from './consent';
 
@@ -234,5 +234,5 @@ export type ThemeHooks = {
 export type L10nConfig = {
   currentLocale: string;
   defaultLocale: string;
-  locales: { code: string; name: string }[];
+  locales: Locale[];
 };

package/src/core/types/l10n.ts

@@ -157,11 +157,16 @@ export type TranslationKey =
   | 'page.mcpNotAllowed.snippets.chatgptApp.headline'
   | 'page.mcpNotAllowed.snippets.chatgptApp.instruction'
   | 'page.mcpNotAllowed.snippets.codexCli.headline'
+  | 'page.mcpNotAllowed.snippets.grokBuild.headline'
+  | 'page.mcpNotAllowed.snippets.grokApp.headline'
+  | 'page.mcpNotAllowed.snippets.grokApp.instruction'
+  | 'page.mcpNotAllowed.snippets.grokApp.openConnectors'
   | 'page.mcpNotAllowed.snippets.prompt.headline'
   | 'page.mcpNotAllowed.snippets.prompt.hint'
   | 'page.mcpNotAllowed.snippets.json.hint'
   | 'page.mcpNotAllowed.tabs.claude'
   | 'page.mcpNotAllowed.tabs.chatgpt'
+  | 'page.mcpNotAllowed.tabs.grok'
   | 'page.mcpNotAllowed.tabs.json'
   | 'page.lastUpdated.timeago'
   | 'page.lastUpdated.on'
@@ -311,6 +316,8 @@ export type TranslationKey =
   | 'page.actions.connectMcp.codexDescription'
   | 'page.actions.connectMcp.copyConfig'
   | 'page.actions.connectMcp.copyConfigDescription'
+  | 'page.actions.connectMcp.copyUrl'
+  | 'page.actions.connectMcp.copyUrlDescription'
   | 'page.actions.connectMcp.moreOptions'
   | 'page.actions.moreActions'
   | 'promptTag.copy.buttonText'
@@ -559,9 +566,12 @@ export type TranslationKey =
   | 'consent.category.analytics.description'
   | 'consent.category.marketing.title'
   | 'consent.category.marketing.description'
-  | 'consent.settingsLink';
+  | 'consent.settingsLink'
+  | 'missingTranslationNotice.title'
+  | 'missingTranslationNotice.content'
+  | 'missingTranslationNotice.close';
 
-export type Locale = { code: string; name: string };
+export type Locale = { code: string; name: string; showMissingTranslationNotice?: boolean };
 
 export type TFunction = (
   // A workaround for literals + strings Typescript autosuggestion: 'https://github.com/microsoft/TypeScript/issues/29729'

package/src/core/utils/mcp.ts

@@ -58,6 +58,10 @@ export function generateClaudeCodeCommand(config: McpConnectionParams): string {
   return `claude mcp add --transport http ${slugifyMcpServerName(config.serverName)} ${config.url}`;
 }
 
+export function generateGrokBuildCommand(config: McpConnectionParams): string {
+  return `grok mcp add --transport http ${slugifyMcpServerName(config.serverName)} ${config.url}`;
+}
+
 export function generateCodexCommand(config: McpConnectionParams): string {
   return `codex mcp add ${slugifyMcpServerName(config.serverName)} --url ${config.url}`;
 }

package/src/icons/McpIcon/McpIcon.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="14 13 150 154" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M23.5996 85.2532L86.2021 22.6507C94.8457 14.0071 108.86 14.0071 117.503 22.6507C126.147 31.2942 126.147 45.3083 117.503 53.9519L70.2254 101.23"
+      strokeWidth="11"
+      strokeLinecap="round"
+    />
+    <path
+      d="M70.8789 100.578L117.504 53.952C126.148 45.3083 140.163 45.3083 148.806 53.952L149.132 54.278C157.776 62.9216 157.776 76.9357 149.132 85.5792L92.5139 142.198C89.6327 145.079 89.6327 149.75 92.5139 152.631L104.14 164.257"
+      strokeWidth="11"
+      strokeLinecap="round"
+    />
+    <path
+      d="M101.853 38.3013L55.553 84.6011C46.9094 93.2447 46.9094 107.258 55.553 115.902C64.1966 124.546 78.2106 124.546 86.8543 115.902L133.154 69.6025"
+      strokeWidth="11"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+export const McpIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/McpIcon/McpIcon',
+})`
+  path {
+    stroke: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/TranslateIcon/TranslateIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 24 24" fill="inherit" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M12.87 15.07L10.33 12.56L10.36 12.53C12.1 10.59 13.34 8.36 14.07 6H17V4H10V2H8V4H1V6H12.17C11.5 7.92 10.44 9.75 9 11.35C8.07 10.32 7.3 9.19 6.69 8H4.69C5.42 9.63 6.42 11.17 7.67 12.56L2.58 17.58L4 19L9 14L12.11 17.11L12.87 15.07ZM18.5 10H16.5L12 22H14L15.12 19H19.87L21 22H23L18.5 10ZM15.88 17L17.5 12.67L19.12 17H15.88Z" />
+  </svg>
+);
+
+export const TranslateIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/TranslateIcon/TranslateIcon',
+})`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+  height: ${({ size }) => size || '20px'};
+  width: ${({ size }) => size || '20px'};
+`;

package/src/index.ts

@@ -46,6 +46,8 @@ export * from '@redocly/theme/components/Markdown/styles/heading-anchor';
 export * from '@redocly/theme/components/Markdown/styles/links';
 /* Admonition */
 export * from '@redocly/theme/components/Admonition/Admonition';
+/* MissingTranslationNotice */
+export * from '@redocly/theme/components/MissingTranslationNotice/MissingTranslationNotice';
 /* ApiOnboarding */
 export * from '@redocly/theme/components/ApiOnboarding/AppCustomAttributes';
 /* Navbar */
@@ -194,6 +196,7 @@ export * from '@redocly/theme/icons/ChatGptIcon/ChatGptIcon';
 export * from '@redocly/theme/icons/CopyIcon/CopyIcon';
 export * from '@redocly/theme/icons/ClaudeIcon/ClaudeIcon';
 export * from '@redocly/theme/icons/GrokIcon/GrokIcon';
+export * from '@redocly/theme/icons/McpIcon/McpIcon';
 export * from '@redocly/theme/icons/CleanIcon/CleanIcon';
 export * from '@redocly/theme/icons/GraphqlIcon/GraphqlIcon';
 export * from '@redocly/theme/icons/DeselectIcon/DeselectIcon';

package/src/layouts/CodeWalkthroughLayout.tsx

@@ -5,6 +5,7 @@ import type { JSX } from 'react';
 
 import { H1_CLASS } from '@redocly/theme/core/constants';
 import { breakpoints } from '@redocly/theme/core/utils';
+import { MissingTranslationNotice } from '@redocly/theme/components/MissingTranslationNotice/MissingTranslationNotice';
 
 export type CodeWalkthroughLayoutProps = React.PropsWithChildren<{
   className?: string;
@@ -16,7 +17,10 @@ export function CodeWalkthroughLayout({
 }: CodeWalkthroughLayoutProps): JSX.Element {
   return (
     <LayoutWrapper data-component-name="Layout/CodeWalkthroughLayout" className={className}>
-      <ContentWrapper>{children}</ContentWrapper>
+      <ContentWrapper>
+        <Notice />
+        {children}
+      </ContentWrapper>
     </LayoutWrapper>
   );
 }
@@ -29,6 +33,12 @@ const LayoutWrapper = styled.div.attrs(({ className }) => ({
   width: 100%;
 `;
 
+const Notice = styled(MissingTranslationNotice)`
+  max-width: var(--md-content-max-width);
+  margin-left: auto;
+  margin-right: auto;
+`;
+
 const ContentWrapper = styled.section`
   width: 100%;
   --md-content-font-size: var(--font-size-lg);

package/src/layouts/DocumentationLayout.tsx

@@ -10,6 +10,7 @@ import { H1_CLASS } from '@redocly/theme/core/constants';
 import { CodeSnippetProvider } from '@redocly/theme/core/contexts/CodeSnippetContext';
 import { DocumentationLayoutTop } from '@redocly/theme/layouts/DocumentationLayoutTop';
 import { DocumentationLayoutBottom } from '@redocly/theme/layouts/DocumentationLayoutBottom';
+import { MissingTranslationNotice } from '@redocly/theme/components/MissingTranslationNotice/MissingTranslationNotice';
 
 type DocumentationLayoutProps = {
   tableOfContent: React.ReactNode;
@@ -48,6 +49,7 @@ export function DocumentationLayout({
       >
         <ContentWrapper>
           <DocumentationLayoutTop config={config} editPage={editPage} lastModified={lastModified} />
+          <MissingTranslationNotice />
           {children}
           <DocumentationLayoutBottom feedback={feedback} nextPage={nextPage} prevPage={prevPage} />
         </ContentWrapper>

package/src/markdoc/components/Heading/Heading.tsx

@@ -5,7 +5,7 @@ import { useLocation } from 'react-router';
 import type { JSX, PropsWithChildren, ReactElement, ReactNode } from 'react';
 
 import { Image as MarkdocImage } from '@redocly/theme/markdoc/components/Image/Image';
-import { concatClassNames } from '@redocly/theme/core/utils';
+import { breakpoints, concatClassNames } from '@redocly/theme/core/utils';
 import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
 import { PageActions } from '@redocly/theme/components/PageActions/PageActions';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
@@ -125,6 +125,15 @@ const HeadingContentWrapper = styled.div`
       visibility: hidden;
     }
   }
+
+  @media screen and (max-width: ${breakpoints.small}) {
+    flex-wrap: wrap;
+
+    & > [data-component-name='PageActions/PageActions'] {
+      flex-basis: 100%;
+      --page-actions-padding-left: 0;
+    }
+  }
 `;
 
 const StyledHeadingText = styled.span`

package/src/markdoc/tags/code-walkthrough.ts

@@ -201,7 +201,7 @@ export function collectTogglesFromChildren(
         toggles[id] = {
           when: child.attributes.when,
           unless: child.attributes.unless,
-        } as TogglesMarkdocAttr;
+        };
       }
     }