Improve styles for overly long selectors in checks results

client/scss/components/_a11y-result.scss

@@ -55,6 +55,7 @@
     padding: theme('spacing.1');
     gap: theme('spacing.[1.5]');
     width: auto;
+    max-width: 100%;
   }
 
   &:hover,
@@ -73,6 +74,12 @@
   }
 }
 
+.w-a11y-result__selector-text {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
 .w-a11y-result__icon {
   @apply w-transition hover:w-transform;
 

wagtail/admin/templates/wagtailadmin/shared/side_panels/checks.html

@@ -13,7 +13,7 @@
             aria-label="{% trans 'Show issue' %}"
             type="button"
         >
-            <span data-a11y-result-selector-text></span>
+            <span class="w-a11y-result__selector-text" data-a11y-result-selector-text></span>
             {% icon name="link-external" classname="w-a11y-result__icon" %}
         </button>
     </div>