storybookjs/storybook

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

Open

#31,505 opened on May 19, 2025

View on GitHub
 (6 comments) (2 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
addon: docsbughelp wanted

Description

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

Contributor guide

Tech stack
csshtml
Domain
frontenddocumentation
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
under 1 hour
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
CSSStorybook theming
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85
Research direction
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.