iTwinUI Improve test image results

All test images should be reviewed with the goal of:

Tests should target a <section> or a component directly via ID name, excluding the page titles, <hr>s, & theme switcher button.
<section> should be scoped. Some places this may make sense (table sizes), other places it might not (badges). Use your best judgement.
If possible, test for :hover & :focus within the same test image.
Set viewports: [{ width: 800, height: 600 }] to keep images narrow when possible. These are good default values, but feel free to adjust as needed.

Components to review

[x] alert
[x] anchor: Nothing to change
[ ] avatar
[x] badge
[x] blockquote
[ ] breadcrumbs
[ ] button
[ ] carousel
[ ] checkbox
[ ] code
[ ] color-picker
[ ] color
[ ] column-filter
[ ] date-picker
[ ] dialog
[ ] expandable-block
[ ] fieldset
[ ] file-upload
[ ] footer
[ ] header
[ ] iModel-loader
[ ] icon
[ ] information-panel
[ ] input
[ ] keyboard
[ ] location-marker
[ ] menu
[ ] non-ideal-state
[ ] progress-indicator
[ ] radio-tile
[ ] radio
[ ] select
[ ] side-navigation
[ ] skip-to-content
[ ] slider
[ ] stepper
[ ] surface
[ ] table
[ ] tabs
[ ] tag
[ ] textarea
[ ] tile
[ ] time-picker
[ ] toast
[x] toggle-switch
[x] tooltip
[ ] tree
[x] typography
[x] workflow-diagram

Dec 19 '22 19:12 FlyersPh9

If all tests are wrapped consistently via <section>, we might be able to apply padding to them so our test images aren't cropped right to the edge of the component. This would be useful for confirming things like drop shadow are displaying correctly.

Dec 19 '22 19:12 FlyersPh9

I would like to reduce non-component HTML as well. Meaning replace <br /> with gap applied on the <section> wrapping the components.

Dec 19 '22 20:12 FlyersPh9

Tile focus screenshots does not include focus style (images are cropped too tight)

Mar 16 '23 15:03 gretanausedaite