Simple user stylesheet CSS to add the viewport size to the Storybook header. Install with a browser add-on such as Stylus or Stylebot

storybook-viewport-dark-theme.user.css

#root > div > .react-draggable + .react-draggable ~ div:last-child > div > div:first-child::before,
#root > div > .react-draggable + .react-draggable ~ div:last-child > div > div:first-child::after {
    background: #333;
    color: #999;
    content: attr(style);
    direction: rtl;
    font-family: monospace;
    font-size: 14px;
    overflow: hidden;
    padding: 0 5px;
    position: absolute;
    right: 154px;
    top: 11px;
    white-space: nowrap;
    width: 44px;
    z-index: 9999;
}

#root > div > .react-draggable + .react-draggable ~ div:last-child > div > div:first-child::after {
    right: 100px;
    text-indent: -296px;
}

#root > div > .react-draggable + .react-draggable ~ div:last-child > div > div[style*="width: 1"]:first-child::after {
    text-indent: -306px;
}

storybook-viewport-light-theme.user.css

#root > div > .react-draggable + .react-draggable ~ div:last-child > div > div:first-child::before,
#root > div > .react-draggable + .react-draggable ~ div:last-child > div > div:first-child::after {
    background: #fff;
    color: #767676;
    content: attr(style);
    direction: rtl;
    font-family: monospace;
    font-size: 14px;
    overflow: hidden;
    padding: 0 5px;
    position: absolute;
    right: 154px;
    top: 11px;
    white-space: nowrap;
    width: 44px;
    z-index: 9999;
}

#root > div > .react-draggable + .react-draggable ~ div:last-child > div > div:first-child::after {
    right: 100px;
    text-indent: -296px;
}

#root > div > .react-draggable + .react-draggable ~ div:last-child > div > div[style*="width: 1"]:first-child::after {
    text-indent: -306px;
}