From 1da3b3aca1522144fea2d7618aca70ae56dc8d40 Mon Sep 17 00:00:00 2001 From: Thimy Kieu Date: Wed, 4 Sep 2024 14:53:06 +0200 Subject: [PATCH] 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 | 10 ++++++++++ .../understanding-structure/parameter-serialization.md | 5 +++++ 2 files changed, 15 insertions(+) diff --git a/frontend/styles/atoms/table.css b/frontend/styles/atoms/table.css index 3d4536ed..fa247858 100644 --- a/frontend/styles/atoms/table.css +++ b/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; + } } } diff --git a/src/_guides/openapi/specification/v3.1/understanding-structure/parameter-serialization.md b/src/_guides/openapi/specification/v3.1/understanding-structure/parameter-serialization.md index ee6b1fd8..9ece918e 100644 --- a/src/_guides/openapi/specification/v3.1/understanding-structure/parameter-serialization.md +++ b/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 | ?age=2&type=dog&type=fedora | +{: .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`.