Repository: storybookjs/storybook
File: code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx (TypeScript)

Code before:
          '.react-syntax-highlighter-line-number::before': {
            content: 'attr(data-line-number)',
          },
        }
      : {}
);

const UnstyledScroller = ({ children, className }: ScrollAreaProps) => (
  <ScrollArea horizontal vertical className={className}>
    {children}
  </ScrollArea>
);
const Scroller = styled(UnstyledScroller)(
  {
    position: 'relative',
    width: 'fit-content',
    '> div': {
      width: 'fit-content',
      '> div > pre': {
        width: 'fit-content',
      },
    },
  },
  ({ theme }) => themedSyntax(theme)
);

export interface PreProps {
  padded?: boolean;
}

const Pre = styled.pre<PreProps>(({ theme, padded }) => ({
  display: 'flex',
  justifyContent: 'flex-start',
  margin: 0,
  padding: padded ? theme.layoutMargin : 0,
}));

const Code = styled.div(({ theme }) => ({
  flex: 1,
  paddingLeft: 2,
  opacity: 1,
  fontFamily: theme.typography.fonts.mono,
}));

const RelativeActionBar = styled(ActionBar)({
  position: 'relative',
  marginLeft: 'auto',
  alignSelf: 'flex-end',
});

const processLineNumber = (row: any) => {

Review comment (suggestion):
```suggestion
    width: 'fit-content',
    maxWidth: '100%',
    '> div': {
      width: 'fit-content',
      maxWidth: '100%',
      '> div > pre': {
        width: 'fit-content',
        maxWidth: '100%',
      },
    },
```

This should take us closer to the finish line. The content of the scroll area needs to have a max width to ensure ScrollArea works.

By the way, we'll need to check for regressions everywhere else where syntaxhighlighter is used:
* code/addons/docs/src/blocks/blocks/SourceContainer.tsx
* code/addons/docs/src/blocks/components/Source.tsx
* code/addons/docs/src/blocks/components/ArgsTable/ArgValue.tsx
* code/addons/a11y/src/components/Report/Details.tsx
* code/addons/onboarding/src/Onboarding.tsx
* code/core/src/shared/checklist-store/checklistData.tsx

Code after:
          // use the before pseudo element to display line numbers
          '.react-syntax-highlighter-line-number::before': {
            content: 'attr(data-line-number)',
          },
        }
      : {}
);

const UnstyledScroller = ({ children, className }: ScrollAreaProps) => (
  <ScrollArea horizontal vertical className={className}>
    {children}
  </ScrollArea>
);
const Scroller = styled(UnstyledScroller)(
  {
    position: 'relative',
    width: 'fit-content',
    maxWidth: '100%',
    '> div': {
      width: 'fit-content',
      maxWidth: '100%',
      '> div > pre': {
        width: 'fit-content',
        maxWidth: '100%',
      },
    },
  },
  ({ theme }) => themedSyntax(theme)
);

export interface PreProps {
  padded?: boolean;
}

const Pre = styled.pre<PreProps>(({ theme, padded }) => ({
  display: 'flex',
  justifyContent: 'flex-start',
  margin: 0,
  padding: padded ? theme.layoutMargin : 0,
}));

/*
We can't use `code` since PrismJS races for it.
See https://github.com/storybookjs/storybook/issues/18090
 */
const Code = styled.div(({ theme }) => ({
  flex: 1,
  paddingLeft: 2, // TODO: To match theming/global.ts for now
  opacity: 1,
  fontFamily: theme.typography.fonts.mono,
}));