tables: add classes to handle overflowing tables

To be added on a per table basis.
* full-bleed lets the table expand beyond the text column
* break-word make table content break and wrap instead of forcing width based on content

Also added `white-space: nowrap` to `code` in `th` so column name doesn't get squeezed.

frontend/styles/atoms/table.css

@@ -17,6 +17,12 @@ table {
       }
     }
   }
+
+  &.word-break {
+    td {
+      word-break: break-all;
+    }
+  }
 }
 
 thead {
@@ -35,6 +41,10 @@ thead {
       border-right: var(--border-default);
       border-top-right-radius: var(--border-radius-large);
     }
+
+    code {
+      white-space: nowrap;
+    }
   }
 }
 

src/_guides/openapi/specification/v3.1/understanding-structure/parameter-serialization.md

@@ -166,6 +166,7 @@ With `style:form`, if you set `explode:false`, would serialize your parameters l
 |---------|-----------------------|----------------|-----------------------|---------------------------|---------------------------------------|
 |         | ?pets=true            | ?pets=2        | ?pets=dog             | ?pets=cat,dog             | ?pets=age,2,type,dog                  |
 |         | ?pets=true&hats=false | ?pets=2&hats=1 | ?pets=dog&hats=fedora | ?pets=cat,dog&hats=fedora | ?pets=age,2,type,dog&hats=type,fedora |
+{: .full-bleed .word-break}
 
 You'll notice this looks almost identical to [`style:matrix`](#matrix). 
 There's only one difference to be
@@ -178,6 +179,7 @@ If you stick with the default of `explode:true`, then the seperator used is also
 |---------|-----------------------|----------------|-----------------------|--------------------------------|------------------------------------------------------------|
 |         | ?pets=true            | ?pets=2        | ?pets=dog             | ?pets=cat&pets=dog             | ?age=2&type=dog                                            |
 |         | ?pets=true&hats=false | ?pets=2&hats=1 | ?pets=dog&hats=fedora | ?pets=cat&pets=dog&hats=fedora | <span style="color:red">?age=2&type=dog&type=fedora</span> |
+{: .full-bleed .word-break}
 
 Notice one example is highlighted in red. The OpenAPI Specification states that [A Unique Parameter](https://spec.openapis.org/oas/latest.html#parameter-object) is a combination of `name` and (`in`).
 Both "pets" and "hats" would be considered unique parameters, but they both have the property "type". When `explode` is `true` their properties are serialized as if they were separate parameters. It is as if we have two different parameters both with `name:type`, `in:query`, they are no longer unique and one cannot be unambiguously distinguished from the other. 
@@ -192,6 +194,7 @@ This conflict is entirely avoided if you explicitly set `explode:false` on param
 |-----------------------------|-----------------------------------------------|
 | ?pets=cat%20dog             | ?pets=age%202%20type%20dog                    |
 | ?pets=cat%20dog&hats=fedora | ?pets=age%202%20type%20dog&hats=type%20fedora |
+{: .word-break}
 
 It's basically identical to `style:form` with `explode:false`. The difference being, the separator used is not a comma, but a percent-encoded space "%20".
 
@@ -207,6 +210,7 @@ You'll notice there are no examples for any `type` that would be a single value.
 |-----------------------------|-----------------------------------------------|
 | ?pets=cat%7Cdog             | ?pets=age%7C2%7Ctype%7Cdog                    |
 | ?pets=cat%7Cdog&hats=fedora | ?pets=age%7C2%7Ctype%7Cdog&hats=type%7Cfedora |
+{: .word-break}
 
 It's basically identical to `style:form` with `explode:false`. The difference being, the separator used is not a comma, but a percent-encoded pipe "%7C". You may be able to use a normal pipe "|" but it is not in the list of [RFC3986's Unreserved Characters](https://datatracker.ietf.org/doc/html/rfc3986#section-2.3). As such, it may work in some environments, and not in others.
 
@@ -226,6 +230,7 @@ You may be able to use a normal square brackets "[" and "]" but they are in the
 |-----------------------------------------------------------|
 | ?pets%5Bage%5D=2&pets%5Btype%5D=dog                       |
 | ?pets%5Bage%5D=2&pets%5Btype%5D=dog&hats%5Btype%5D=fedora |
+{: .word-break}
 
 Unsurprisingly, it only has defined behaviour for an `object`. This `style` is quite different from any other, even with `explode:true` the `name`, key and value are all specified. This makes it useful for avoiding the potential name conflicts objects could cause with `style:form`, `explode:true`.