<commit_before>import styled from 'styled-components'

import { css } from '@/utils'
import { CONTENT_WIDTH, CONTENT_NARROW_WIDTH } from './metric'

export const Wrapper = styled.div.attrs((props) => ({
  'data-test-id': props.testId,
}))`
  ${css.flexColumn('justify-center')};
  width: ${({ narrow }) =>
    narrow ? `${CONTENT_NARROW_WIDTH}px` : `${CONTENT_WIDTH}px`};

  margin-top: 30px;
  transition: width 0.25s;<commit_msg>refactor(works): preview style adjust<commit_after>import styled from 'styled-components'

import { css } from '@/utils'
import { CONTENT_WIDTH, CONTENT_NARROW_WIDTH } from './metric'

export const Wrapper = styled.div.attrs((props) => ({
  'data-test-id': props.testId,
}))`
  ${css.flexColumn('justify-center')};
  width: ${({ narrow }) =>
    narrow ? `${CONTENT_NARROW_WIDTH}px` : `${CONTENT_WIDTH}px`};

  margin-top: ${({ narrow }) => (narrow ? '100px' : '30px')};

  transition: width 0.2s;
{'fraction_non_alphanumeric': 0.19181034482758622, 'fraction_numerical': 0.01293103448275862, 'mean_word_length': 4.917197452229299, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 8, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '524791', 'n_tokens_mistral': 341, 'n_tokens_neox': 333, 'n_words': 65}