@redocly/theme 0.70.0-next.1 → 0.70.0-next.11

package/src/core/utils/navigation-tabs.ts

@@ -0,0 +1,99 @@
+import type { ThemeHooks } from '../types/hooks';
+import type {
+  NavigationTab,
+  NavigationTabMenuEntry,
+  NavigationTabItem,
+  NavigationTabRowItem,
+  NavigationTabsConfig,
+  NavigationTabsState,
+} from '../types/navigation-tabs';
+
+import { getBaseDataAttributes } from './telemetry/get-base-data-attributes';
+
+type NavbarItemClickedPayload = Parameters<
+  ReturnType<ThemeHooks['useTelemetry']>['sendNavbarMenuItemClickedMessage']
+>[0];
+
+export function toNavigationTabsConfig({
+  state,
+}: {
+  state: NavigationTabsState | undefined;
+}): NavigationTabsConfig | undefined {
+  const items = toNavigationTabEntries(state).map(
+    (entry): NavigationTabRowItem =>
+      entry.kind === 'menu'
+        ? {
+            type: 'group',
+            label: entry.tab.label,
+            labelTranslationKey: entry.tab.labelTranslationKey,
+            icon: entry.tab.icon,
+            srcSet: entry.tab.srcSet,
+            items: entry.entries.map(({ active, ...link }) => toRowLink(link, active)),
+            active: entry.active,
+          }
+        : toRowLink(entry.link, entry.active),
+  );
+
+  return items.length ? { items } : undefined;
+}
+
+export function getNavbarItemClickedPayload(type: 'link' | 'group'): NavbarItemClickedPayload {
+  return [
+    {
+      ...getBaseDataAttributes<'navbarItem', 'navbar', 'urn:redocly:realm:ui:navbar:navbarItem'>(
+        'navbarItem',
+        'navbar',
+      ),
+      type,
+    },
+  ];
+}
+
+type NavigationTabLink = Omit<NavigationTabMenuEntry, 'tabId'>;
+
+type NavigationTabEntry =
+  | { kind: 'link'; link: NavigationTabLink; active: boolean }
+  | {
+      kind: 'menu';
+      tab: NavigationTab;
+      entries: Array<NavigationTabLink & { active: boolean }>;
+      active: boolean;
+    };
+
+function toNavigationTabEntries(state: NavigationTabsState | undefined): NavigationTabEntry[] {
+  if (!state?.tabs.length) return [];
+
+  return state.tabs.flatMap((tab): NavigationTabEntry[] => {
+    const active = state.activeTab?.tabId === tab.tabId;
+
+    if (tab.menu) {
+      const entries = tab.menu
+        .filter((menuEntry) => !!menuEntry.link)
+        .map(({ tabId, ...link }) => ({
+          ...link,
+          active: active && tabId === state.activeMenuEntry?.tabId,
+        }));
+      return entries.length ? [{ kind: 'menu', tab, entries, active }] : [];
+    }
+
+    if (!tab.link) return [];
+
+    return [
+      {
+        kind: 'link',
+        link: {
+          label: tab.label,
+          labelTranslationKey: tab.labelTranslationKey,
+          link: tab.link,
+          icon: tab.icon,
+          srcSet: tab.srcSet,
+        },
+        active,
+      },
+    ];
+  });
+}
+
+function toRowLink(link: NavigationTabLink, active: boolean): NavigationTabItem {
+  return { type: 'link', ...link, active };
+}

package/src/core/utils/search-ai-activity.ts

@@ -0,0 +1,110 @@
+import type { TFunction } from '../types/l10n';
+
+import {
+  ToolCallName,
+  type SearchAiActivityStatus,
+  type SearchAiActivityStep,
+  type ToolCall,
+  type SearchAiActivityKind,
+} from '../types/search';
+import { TOOL_CALL_DISPLAY_TEXT } from '../constants/search';
+import { isObject } from './type-guards';
+
+export function getSearchAiActivityStatus(
+  toolCalls: ToolCall[],
+  isActive: boolean,
+  runningToolCall: ToolCall | undefined,
+  translate: TFunction,
+): SearchAiActivityStatus {
+  const latestToolCall = toolCalls.at(-1);
+  if (!latestToolCall) {
+    return {
+      label: translate('search.ai.thinkingText', 'Thinking...'),
+      kind: 'thinking',
+      isRunning: true,
+    };
+  }
+
+  if (isActive || toolCalls.length === 1) {
+    const toolCall = runningToolCall ?? latestToolCall;
+    return {
+      ...getToolCallLabel(toolCall, !isActive, translate),
+      kind: getSearchAiActivityKind(toolCall.name),
+      isRunning: isActive,
+    };
+  }
+
+  const isSameTool = toolCalls.every((toolCall) => toolCall.name === latestToolCall.name);
+  const sharedText = isSameTool
+    ? TOOL_CALL_DISPLAY_TEXT[latestToolCall.name]?.completedText
+    : undefined;
+  return {
+    label: sharedText ?? translate('search.ai.toolCall.usedTools', 'Used tools'),
+    kind: isSameTool ? getSearchAiActivityKind(latestToolCall.name) : 'code',
+    isRunning: false,
+  };
+}
+
+export function getSearchAiActivityStep(
+  toolCall: ToolCall,
+  isRunning: boolean,
+  translate: TFunction,
+): SearchAiActivityStep {
+  const detail = getToolCallDetail(toolCall);
+  const kind = getSearchAiActivityKind(toolCall.name);
+
+  if (toolCall.name === ToolCallName.SearchDocumentation && detail) {
+    return { id: toolCall.id, label: `“${detail}”`, kind, isRunning };
+  }
+  const { label } = getToolCallLabel(toolCall, !isRunning, translate);
+  return { id: toolCall.id, label: detail ? label : stripEllipsis(label), kind, isRunning };
+}
+
+function getToolCallLabel(
+  toolCall: ToolCall,
+  isCompleted: boolean,
+  translate: TFunction,
+): { label: string; detail?: string } {
+  const detail = getToolCallDetail(toolCall);
+  if (toolCall.name === ToolCallName.Execute && detail) {
+    return { label: detail };
+  }
+  const builtInText = TOOL_CALL_DISPLAY_TEXT[toolCall.name];
+  if (builtInText) {
+    const text = isCompleted ? builtInText.completedText : builtInText.inProgressText;
+    return detail ? { label: stripEllipsis(text), detail } : { label: text };
+  }
+  const prefix = isCompleted
+    ? translate('search.ai.toolCall.executed', 'Executed')
+    : translate('search.ai.toolCall.executing', 'Executing');
+  return { label: `${prefix} ${toolCall.name}` };
+}
+
+function getSearchAiActivityKind(name: string): SearchAiActivityKind {
+  if (name === ToolCallName.SearchDocumentation) return 'search';
+  if (name === ToolCallName.ContactSupport) return 'support';
+  return 'code';
+}
+
+function getToolCallDetail(toolCall: ToolCall): string | undefined {
+  switch (toolCall.name) {
+    case ToolCallName.SearchDocumentation:
+      return getStringArg(toolCall.args, 'query');
+    case ToolCallName.Execute:
+      return getStringArg(toolCall.args, 'description');
+    default:
+      return undefined;
+  }
+}
+
+function getStringArg(args: unknown, name: string): string | undefined {
+  if (!isObject(args) || !(name in args)) {
+    return undefined;
+  }
+  const value: unknown = Reflect.get(args, name);
+  return typeof value === 'string' && value.trim().length > 0 ? value.trim() : undefined;
+}
+
+function stripEllipsis(text: string): string {
+  return text.replace(/(\.{3}|…)$/, '');
+}

package/src/core/utils/urls.ts

@@ -5,7 +5,9 @@ import { DEFAULT_LOCALE_PLACEHOLDER } from '../constants/common';
 export function combineUrls(baseURL: string, ...relativeURLs: (string | undefined)[]) {
   let res = baseURL;
   for (let relativeURL of relativeURLs) {
-    res = relativeURL ? res.replace(/[/\\]+$/, '') + '/' + relativeURL.replace(/^[/\\]+/, '') : res;
+    res = relativeURL
+      ? res.replace(/(?<![/\\])[/\\]+$/, '') + '/' + relativeURL.replace(/^[/\\]+/, '')
+      : res;
   }
 
   return res;

package/src/core/utils/with-load-progress.ts

@@ -1,25 +1,30 @@
-import nprogress from 'nprogress';
+let latestLoad: symbol | null = null;
+const listeners = new Set<() => void>();
 
-nprogress.configure({
-  trickleSpeed: 100,
-  template: '<div class="bar" role="bar"><div class="peg"></div></div>',
-});
-
-// Only the last caller should be able to call nprogress.done()
-let lastCalledBy: symbol;
+function setLatestLoad(load: symbol | null): void {
+  latestLoad = load;
+  // e2e suites wait for this class, named after the progress library it replaced, to clear.
+  document.documentElement.classList.toggle('nprogress-busy', load !== null);
+  listeners.forEach((listener) => listener());
+}
 
+/** Shows the load progress bar until the most recent `withLoadProgress` load settles. */
 export async function withLoadProgress<T>(loadTarget: Promise<T>): Promise<T> {
-  const callIdentifier = Symbol();
-  lastCalledBy = callIdentifier;
-
-  // Cancel any existing progress and restart
-  nprogress.done();
-  nprogress.start();
+  const load = Symbol();
+  setLatestLoad(load);
 
   return loadTarget.finally(() => {
-    if (lastCalledBy === callIdentifier) {
-      nprogress.done();
-      nprogress.remove();
-    }
+    if (latestLoad === load) setLatestLoad(null);
   });
 }
+
+export function subscribeToLoadProgress(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+export function isLoadInProgress(): boolean {
+  return latestLoad !== null;
+}

package/src/ext/configure.ts

@@ -1,6 +1,6 @@
 import type { UserClaims, OpenAPIServer } from '@redocly/theme/core/types';
 
-export * from '@redocly/theme/ext/configure-helpers';
+export type * from '@redocly/theme/ext/configure-helpers';
 export * from '@redocly/theme/ext/helpers/is-direct-configure-request-values';
 
 import type {

package/src/icons/CheckboxIcon/CheckboxIcon.tsx

@@ -11,6 +11,7 @@ const Icon = ({
   checked?: boolean;
   onClick?: () => void;
 }) => (
+  // oxlint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- the control that renders the icon handles the keyboard
   <span className={className} onClick={onClick}>
     {checked ? (
       <svg

package/src/icons/ChevronSortIcon/ChevronSortIcon.tsx

@@ -6,6 +6,7 @@ import type { IconProps } from '@redocly/theme/icons/types';
 import { getCssColorVariable } from '@redocly/theme/core/utils';
 
 const Icon = ({ className, onClick }: IconProps & { onClick?: () => void }) => (
+  // oxlint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- the control that renders the icon handles the keyboard
   <svg
     className={className}
     onClick={onClick}

package/src/icons/ExpandCollapseIcon/ExpandCollapseIcon.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import styled, { css } 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 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      className="corner-top"
+      d="M12.2432 8.70703H11.2461L11.2422 4.75781L7.29297 4.75391V3.75781H12.2432V8.70703Z"
+    />
+    <path
+      className="corner-bottom"
+      d="M4.75781 11.2422L8.70703 11.2461V12.2432H3.75781V7.29297H4.75391L4.75781 11.2422Z"
+    />
+  </svg>
+);
+
+export const ExpandCollapseIcon = styled(Icon).attrs({
+  'data-component-name': 'icons/ExpandCollapseIcon/ExpandCollapseIcon',
+})<{ $collapse?: boolean }>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+    transform-box: view-box;
+    transition: transform 0.3s ease-in-out;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .corner-top {
+    transform-origin: 10.756px 5.244px;
+  }
+
+  .corner-bottom {
+    transform-origin: 5.244px 10.756px;
+  }
+
+  ${({ $collapse }) =>
+    $collapse &&
+    css`
+      .corner-top {
+        transform: rotate(180deg);
+      }
+
+      .corner-bottom {
+        transform: rotate(-180deg);
+      }
+    `}
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/LinkIcon/LinkIconSymbol.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import type { JSX } from 'react';
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const LINK_ICON_SYMBOL_ID = 'redocly-link-icon';
+
+/**
+ * The link icon drawing as a hidden SVG symbol, which every `SharedLinkIcon` refers to. Render it
+ * once per page that shows a `SharedLinkIcon`; without it the icon is empty.
+ */
+export function LinkIconSymbol(): JSX.Element {
+  return (
+    <svg
+      data-component-name="icons/LinkIcon/LinkIconSymbol"
+      display="none"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <symbol id={LINK_ICON_SYMBOL_ID} viewBox="0 0 20 20">
+        <path
+          d="M0 6C0 2.68629 2.68629 0 6 0H14C17.3137 0 20 2.68629 20 6V14C20 17.3137 17.3137 20 14 20H6C2.68629 20 0 17.3137 0 14V6Z"
+          fill="var(--link-icon-bg-color, var(--layer-color))"
+        />
+        <path d="M7.37318 9.56229H12.6232C12.7392 9.56229 12.8505 9.60838 12.9325 9.69043C13.0146 9.77247 13.0607 9.88375 13.0607 9.99979C13.0607 10.1158 13.0146 10.2271 12.9325 10.3091C12.8505 10.3912 12.7392 10.4373 12.6232 10.4373H7.37318C7.25714 10.4373 7.14586 10.3912 7.06382 10.3091C6.98177 10.2271 6.93568 10.1158 6.93568 9.99979C6.93568 9.88375 6.98177 9.77247 7.06382 9.69043C7.14586 9.60838 7.25714 9.56229 7.37318 9.56229ZM8.6853 12.1875H6.4978C5.91764 12.1875 5.36124 11.957 4.95101 11.5468C4.54077 11.1366 4.3103 10.5802 4.3103 10C4.3103 9.41984 4.54077 8.86344 4.95101 8.4532C5.36124 8.04297 5.91764 7.8125 6.4978 7.8125H8.6853C8.80133 7.8125 8.91262 7.76641 8.99466 7.68436C9.07671 7.60231 9.1228 7.49103 9.1228 7.375C9.1228 7.25897 9.07671 7.14769 8.99466 7.06564C8.91262 6.98359 8.80133 6.9375 8.6853 6.9375H6.4978C5.68558 6.9375 4.90662 7.26016 4.33229 7.83449C3.75796 8.40882 3.4353 9.18777 3.4353 10C3.4353 10.8122 3.75796 11.5912 4.33229 12.1655C4.90662 12.7398 5.68558 13.0625 6.4978 13.0625H8.6853C8.80133 13.0625 8.91262 13.0164 8.99466 12.9344C9.07671 12.8523 9.1228 12.741 9.1228 12.625C9.1228 12.509 9.07671 12.3977 8.99466 12.3156C8.91262 12.2336 8.80133 12.1875 8.6853 12.1875ZM13.4982 6.9375H11.3107C11.1946 6.9375 11.0834 6.98359 11.0013 7.06564C10.9193 7.14769 10.8732 7.25897 10.8732 7.375C10.8732 7.49103 10.9193 7.60231 11.0013 7.68436C11.0834 7.76641 11.1946 7.8125 11.3107 7.8125H13.4982C14.0783 7.8125 14.6347 8.04297 15.045 8.4532C15.4552 8.86344 15.6857 9.41984 15.6857 10C15.6857 10.5802 15.4552 11.1366 15.045 11.5468C14.6347 11.957 14.0783 12.1875 13.4982 12.1875H11.3107C11.1946 12.1875 11.0834 12.2336 11.0013 12.3156C10.9193 12.3977 10.8732 12.509 10.8732 12.625C10.8732 12.741 10.9193 12.8523 11.0013 12.9344C11.0834 13.0164 11.1946 13.0625 11.3107 13.0625H13.4982C14.3104 13.0625 15.0894 12.7398 15.6637 12.1655C16.238 11.5912 16.5607 10.8122 16.5607 10C16.5607 9.18777 16.238 8.40882 15.6637 7.83449C15.0894 7.26016 14.3104 6.9375 13.4982 6.9375Z" />
+      </symbol>
+    </svg>
+  );
+}
+
+/**
+ * `LinkIcon` drawn from the page's `LinkIconSymbol`, so a page with many of them carries one copy.
+ * `color` fills the glyph; `--link-icon-bg-color` overrides the background.
+ */
+export function SharedLinkIcon({ color, size = '20px', ...props }: IconProps): JSX.Element {
+  return (
+    <svg
+      data-component-name="icons/LinkIcon/SharedLinkIcon"
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill={getCssColorVariable(color)}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <use href={`#${LINK_ICON_SYMBOL_ID}`} />
+    </svg>
+  );
+}

package/src/index.ts

@@ -53,6 +53,12 @@ export * from '@redocly/theme/components/Navbar/Navbar';
 export * from '@redocly/theme/components/Navbar/NavbarItem';
 export * from '@redocly/theme/components/Navbar/NavbarLogo';
 export * from '@redocly/theme/components/Navbar/NavbarMenu';
+/* NavigationTabs */
+export * from '@redocly/theme/components/NavigationTabs/NavigationTabs';
+export { NavigationTab } from '@redocly/theme/components/NavigationTabs/NavigationTab';
+export type { NavigationTabProps } from '@redocly/theme/components/NavigationTabs/NavigationTab';
+export * from '@redocly/theme/components/NavigationTabs/NavigationTabMenu';
+export * from '@redocly/theme/components/NavigationTabs/NavigationTabContent';
 /* Footer */
 export * from '@redocly/theme/components/Footer/Footer';
 export * from '@redocly/theme/components/Footer/FooterColumn';
@@ -250,9 +256,11 @@ export * from '@redocly/theme/icons/MoonIcon/MoonIcon';
 export * from '@redocly/theme/icons/SunIcon/SunIcon';
 export * from '@redocly/theme/icons/ContrastIcon/ContrastIcon';
 export * from '@redocly/theme/icons/LinkIcon/LinkIcon';
+export * from '@redocly/theme/icons/LinkIcon/LinkIconSymbol';
 export * from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
 export * from '@redocly/theme/icons/MinimizeIcon/MinimizeIcon';
 export * from '@redocly/theme/icons/MaximizeIcon/MaximizeIcon';
+export * from '@redocly/theme/icons/ExpandCollapseIcon/ExpandCollapseIcon';
 export * from '@redocly/theme/icons/MarkdownFullIcon/MarkdownFullIcon';
 export * from '@redocly/theme/icons/DocumentBlankIcon/DocumentBlankIcon';
 export * from '@redocly/theme/icons/WarningSquareIcon/WarningSquareIcon';

package/src/layouts/PageLayout.tsx

@@ -27,7 +27,7 @@ export function PageLayout({
 const Container = styled.div`
   display: flex;
   flex-direction: row;
-  min-height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  min-height: calc(100vh - var(--navbar-offset));
 
   @media screen and (min-width: ${breakpoints.max}) {
     max-width: var(--container-max-width);

package/src/layouts/RootLayout.tsx

@@ -13,8 +13,8 @@ export type LayoutConfig = {
 };
 
 export function RootLayout({ children }: LayoutConfig): JSX.Element {
-  const { useSearch } = useThemeHooks();
-  const { askAi } = useSearch();
+  const { useSearchFeatures } = useThemeHooks();
+  const { askAi } = useSearchFeatures();
 
   return (
     <div data-component-name="layouts/RootLayout">

package/src/markdoc/components/CodeWalkthrough/CodeFilters.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { CodeWalkthroughFilter } from '@redocly/config';
+import type { CodeWalkthroughFilter } from '@redocly/theme/core/types';
 
 import { Tag, ContentWrapper as TagContentWrapper } from '@redocly/theme/components/Tag/Tag';
 
@@ -76,7 +76,7 @@ const FilterWrapper = styled.div`
   padding-right: var(--spacing-xl);
   padding-left: var(--spacing-xl);
   padding-bottom: var(--spacing-xs);
-  top: var(--navbar-height);
+  top: var(--navbar-stack-height);
   background-color: var(--bg-color);
   z-index: var(--z-index-raised);
   max-width: var(--md-content-max-width);

package/src/markdoc/components/CodeWalkthrough/CodePanel.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '@redocly/theme/core/types';
 
 import { useCodePanel } from '@redocly/theme/core/hooks';
 import { CodeWalkthroughControlsStateContext } from '@redocly/theme/core/contexts';
@@ -64,8 +64,8 @@ const CodePanelWrapper = styled.div`
   border: 1px solid var(--code-panel-border-color);
   border-radius: var(--code-panel-border-radius);
   overflow: clip;
-  --code-block-max-height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
-  height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
+  --code-block-max-height: calc(100vh - var(--navbar-stack-height) - 2 * var(--spacing-xl));
+  height: calc(100vh - var(--navbar-stack-height) - 2 * var(--spacing-xl));
   position: sticky;
-  top: calc(var(--navbar-height) + var(--spacing-xl));
+  top: calc(var(--navbar-stack-height) + var(--spacing-xl));
 `;

package/src/markdoc/components/CodeWalkthrough/CodePanelHeader.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import type { JSX } from 'react';
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '@redocly/theme/core/types';
 
 import { useThemeHooks, useRenderableFiles, type RenderableFile } from '@redocly/theme/core/hooks';
 import { OverflowMenuVerticalIcon } from '@redocly/theme/icons/OverflowMenuVerticalIcon/OverflowMenuVerticalIcon';

package/src/markdoc/components/CodeWalkthrough/CodePanelToolbar.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '@redocly/theme/core/types';
 
 import { CodeWalkthroughControlsStateContext } from '@redocly/theme/core/contexts';
 import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';

package/src/markdoc/components/CodeWalkthrough/CodeStep.tsx

@@ -10,7 +10,7 @@ import React, {
 import styled from 'styled-components';
 import { useLocation } from 'react-router';
 
-import type { WithConditions } from '@redocly/config';
+import type { WithConditions } from '@redocly/theme/core/types';
 
 import { Marker } from '@redocly/theme/components/Marker/Marker';
 import {

package/src/markdoc/components/CodeWalkthrough/CodeWalkthrough.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, type PropsWithChildren } from 'react';
 import styled from 'styled-components';
 
-import type { CodeWalkthroughAttr } from '@redocly/config';
+import type { CodeWalkthroughAttr } from '@redocly/theme/core/types';
 
 import {
   CodeWalkthroughStepsContext,
@@ -78,7 +78,7 @@ const DocsPanel = styled.div`
   flex-direction: column;
 
   min-height: 0;
-  min-height: calc(100vh - var(--navbar-height));
+  min-height: calc(100vh - var(--navbar-stack-height));
 
   padding-top: var(--spacing-xl);
   padding-right: var(--spacing-xs);