add comment and update utility classes doc

Author: chris-lawton

docs/front-end/utility-classes.md

@@ -4,6 +4,6 @@ Most CSS classes used in this build are designed to fit with a particular compon
 
 Some, such as the `listing` component are designed to be a base with variations across a number of variant components - this is made clear by the component naming: `listing--image.html`, `listing--simple.html` etc.
 
-However, we have some utility classes which are designed for re-use, along with the option to to use Tailwind utility classes. Classes that are designed for re-use include `button`, `heading--[xyz]`, `link`, `supporting` and `.body`.
+However, we have some utility classes which are designed for re-use, along with the option to to use Tailwind utility classes. Classes that are designed for re-use include `button`, `heading--[xyz]`, `link`, `supporting`, `.body` and `icon--listing-arrow`.
 
 The same tailwind utility classes that are avialable in `wagtail-kit` are available in this build. `tailwind.config.js` includes the custom spacing for the build, allowing us to use classes such as `mb-spacerMini` where it wouldn't be practical to create a new scss component just for a one-off spacing adjustment.

tbx/static_src/sass/components/_icon.scss

@@ -26,7 +26,7 @@
 
     &--listing-arrow {
         @include arrow-link-icon-styles();
-        margin-left: $spacer-mini-plus;
+        margin-left: $spacer-mini-plus; // without this the arrows that are only on one line overlap the focus ring
     }
 
     .template-404-page & {