Repository: h2oai/wave
File: ui/src/parts/lightbox.tsx (TypeScript)

Code before:
      textOverflow: 'ellipsis',
      overflow: 'hidden'
    },
    title: {
      fontWeight: 500
    },
    description: {
      color: '#bbb'
    },
    navImgContainer: {
      display: 'inline-block',
      width: IMAGE_SIZE
    },
    iconStylesRootArrow: {
      position: "absolute",
      top: "50%",
      padding: "16px",
      marginTop: -ICON_SIZE / 2
    }
  }),
  styles: { [key: S]: React.CSSProperties } = {
    icon: { fontSize: '22px' }
  },
  iconStyles: Fluent.IButtonStyles = {
    flexContainer: { justifyContent: 'center' },
    root: { margin: '4px 4px', width: ICON_SIZE, height: ICON_SIZE, backgroundColor: 'rgba(0, 0, 0, 0.3)' },
    rootHovered: { backgroundColor: 'rgba(255, 255, 255, 0.3)' },
    icon: { color: '#fff', lineHeight: 22, height: 'unset', padding: 4 },
    iconHovered: { color: '#fff' },
    iconPressed: { color: 'rgba(255, 255, 255, 0.7)' },
  }

type Image = { title: S, description?: S, type?: S, image?: S, path?: S }

export interface LightboxProps {
  images: Image[],
  defaultImageIdx?: U
}

export const Lightbox = ({ images, defaultImageIdx }: LightboxProps) => {
  const
    [activeImageIdx, setActiveImageIdx] = React.useState(defaultImageIdx || 0),
    { title, description } = images[activeImageIdx],
    isGallery = images.length > 1,
    FOOTER_HEIGHT = isGallery ? IMAGE_CAPTIONS_HEIGHT + IMAGE_NAV_HEIGHT : IMAGE_CAPTIONS_HEIGHT,
    rootElementRef = React.useRef<HTMLDivElement | null>(null),
    imageNavRef = React.useRef<HTMLDivElement | null>(null),
    defaultScrollSetRef = React.useRef(false),
    activeColor = isDark(getColorFromString(cssVar('$neutralPrimary'))!) ? cssVar('$card') : cssVar('$neutralPrimary'),
    imageHighlightStyle = { filter: 'unset', border: '2px solid', borderColor: activeColor },
    lazyImageObserver = new window.IntersectionObserver(entries =>

Review comment (suggestion):
nit 
```suggestion
    root: { margin: 4, width: ICON_SIZE, height: ICON_SIZE, backgroundColor: 'rgba(0, 0, 0, 0.3)' },
```

Code after:
      boxSizing: 'border-box',
      width: 'fit-content',
      margin: '0 auto',
      maxWidth: 'calc(100% - 40px)',
      textOverflow: 'ellipsis',
      overflow: 'hidden',
      height: IMAGE_CAPTIONS_HEIGHT / 2
    },
    title: {
      fontWeight: 500
    },
    description: {
      color: '#bbb'
    },
    navImgContainer: {
      display: 'inline-block',
      width: IMAGE_SIZE
    },
    iconStylesRootArrow: {
      position: "absolute",
      top: "50%",
      padding: "16px",
      marginTop: -ICON_SIZE / 2
    }
  }),
  styles: { [key: S]: React.CSSProperties } = {
    icon: { fontSize: '22px' }
  },
  iconStyles: Fluent.IButtonStyles = {
    flexContainer: { justifyContent: 'center' },
    root: { margin: 4, width: ICON_SIZE, height: ICON_SIZE, backgroundColor: 'rgba(0, 0, 0, 0.3)' },
    rootHovered: { backgroundColor: 'rgba(255, 255, 255, 0.3)' },
    icon: { color: '#fff', lineHeight: 22, height: 'unset', padding: 4 },
    iconHovered: { color: '#fff' },
    iconPressed: { color: 'rgba(255, 255, 255, 0.7)' },
  }

type Image = { title: S, description?: S, type?: S, image?: S, path?: S }

export interface LightboxProps {
  images: Image[],
  defaultImageIdx?: U
}

export const Lightbox = ({ images, defaultImageIdx }: LightboxProps) => {
  const
    [activeImageIdx, setActiveImageIdx] = React.useState(defaultImageIdx || 0),
    { title, description } = images[activeImageIdx],
    isGallery = images.length > 1,
    FOOTER_HEIGHT = FOOTER_VERTICAL_PADDING * 2 + IMAGE_CAPTIONS_HEIGHT + (isGallery ? IMAGE_NAV_HEIGHT : 0),
    rootElementRef = React.useRef<HTMLDivElement | null>(null),