Wrap slash characters in tables (#15774)

* include slashes in list of chars to inject <wbr> tags around for better table rendering

* add clarifying comment to tables.scss

Author: sarahs

javascripts/wrap-code-terms.js

@@ -1,9 +1,11 @@
-const wordsLongerThan18Chars = /[\w:]{18,}/g
+const wordsLongerThan18Chars = /[\w:/\\]{18,}/g
 const camelCaseChars = /([a-z])([A-Z])/g
 const underscoresAfter12thChar = /([\w:]{12}[^_]*?)_/g
+const slashChars = /([/\\])/g
 
-// insert a <wbr> tag in code terms that use camelcase or underscore
-// inspired by http://heap.ch/blog/2016/01/19/camelwrap/
+// This module improves table rendering on reference pages by inserting a <wbr>
+// tag in code terms that use camelcase, slashes, or underscores, inspired by
+// http://heap.ch/blog/2016/01/19/camelwrap/
 export default function () {
   const codeTerms = document.querySelectorAll('#article-contents table code')
   if (!codeTerms) return
@@ -17,6 +19,8 @@ export default function () {
         // to keep word breaks looking nice, only break on underscores after the 12th char
         // so `has_organization_projects` will break after `has_organization` instead of after `has_`
         .replace(underscoresAfter12thChar, '$1_<wbr>')
+        // Some Actions reference pages have tables with code terms separated by slashes
+        .replace(slashChars, '$1<wbr>')
     })
   })
 }

stylesheets/tables.scss

@@ -2,6 +2,10 @@
   border-collapse: collapse;
   position: relative;
   font-size: 90%;
+  /* We want to keep table-layout: auto so that column widths dynamically adjust;
+  otherwise entries get needlessly smushed into narrow columns. As a workaround,
+  we use javascripts/wrap-code-terms.js to prevent some reference table content
+  from expanding beyond the horizontal boundaries of the parent element. */
   table-layout: auto;
 
   code {