storybookjs/storybook

[Bug]: docs - heading left margin only appears in the dark theme

Open

#31,505 创建于 2025年5月19日

在 GitHub 查看
 (6 评论) (2 反应) (0 负责人)TypeScript (89,909 star) (10,058 fork)batch import
addon: docsbughelp wanted

描述

Describe the bug

The anchor link icon in the light theme appears to be cut off, dark theme has a margin which prevents this from happening.

Light theme Dark Theme
Image Image
Image Image

Reproduction link

N/A

Reproduction steps

  1. Go to the docs page for a component and look at a story heading.

System

System:
    OS: Linux 5.15 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (22) x64 Intel(R) Core(TM) Ultra 7 165H
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 20.18.1 - ~/.nvm/versions/node/v20.18.1/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.1/bin/npm
    pnpm: 8.7.6 - ~/.nvm/versions/node/v20.18.1/bin/pnpm <----- active
  npmPackages:
    @storybook/addon-a11y: ^8.6.14 => 8.6.14 
    @storybook/addon-designs: ^8.2.1 => 8.2.1 
    @storybook/addon-essentials: ^8.6.14 => 8.6.14 
    @storybook/addon-interactions: ^8.6.14 => 8.6.14 
    @storybook/addon-links: ^8.6.14 => 8.6.14 
    @storybook/addon-webpack5-compiler-swc: ^3.0.0 => 3.0.0 
    @storybook/blocks: ^8.6.14 => 8.6.14 
    @storybook/manager-api: ^8.6.14 => 8.6.14 
    @storybook/react: ^8.6.14 => 8.6.14 
    @storybook/react-webpack5: ^8.6.14 => 8.6.14 
    @storybook/test-runner: ^0.22.0 => 0.22.0 
    @storybook/theming: ^8.6.14 => 8.6.14 
    storybook: ^8.6.14 => 8.6.14 
    storybook-dark-mode: 4.0.2 => 4.0.2

Additional context

No response

贡献者指南

技术栈
csshtml
领域
frontenddocumentation
议题类型
bug
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
2
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
under 1 hour
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
active
清晰度议题是否清楚说明期望改动、验收标准和下一步。
clear
前置要求
CSSStorybook theming
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
85
研究方向
The bug is that the heading left margin is missing in light theme, causing the anchor icon to be cut off. The fix likely involves adding a CSS rule for the light theme to match the dark theme's margin. Relevant files may be in the documentation theme styling, possibly in packages like `@storybook/addon docs` or theme specific CSS files. Look for CSS classes or theme tokens related to heading margins.