fix: content overflow on small screen (#1948)

* update tables in 5.x for consistency in design

* update tables in 4.x for consistency in design

* remove content overflow for mobile devices

* remove inline padding from main conatent

---------

Co-authored-by: Sebastian Beltran <bjohansebas@gmail.com>

Author: ShubhamOulkar

_includes/api/en/4x/app-METHOD.md

@@ -10,39 +10,37 @@ PUT, POST, and so on, in lowercase. Thus, the actual methods are `app.get()`,
 
 Express supports the following routing methods corresponding to the HTTP methods of the same names:
 
-<table style="border: 0px; background: none">
-<tr>
-<td style="background: none; border: 0px;" markdown="1">
-* `checkout`
-* `copy`
-* `delete`
-* `get`
-* `head`
-* `lock`
-* `merge`
-* `mkactivity`
-</td>
-<td style="background: none; border: 0px;" markdown="1">
-* `mkcol`
-* `move`
-* `m-search`
-* `notify`
-* `options`
-* `patch`
-* `post`
-</td>
-<td style="background: none; border: 0px;" markdown="1">
-* `purge`
-* `put`
-* `report`
-* `search`
-* `subscribe`
-* `trace`
-* `unlock`
-* `unsubscribe`
-</td>
-</tr>
-</table>
+<div class="methods-columns">
+  <ul>
+    <li><code>checkout</code></li>
+    <li><code>copy</code></li>
+    <li><code>delete</code></li>
+    <li><code>get</code></li>
+    <li><code>head</code></li>
+    <li><code>lock</code></li>
+    <li><code>merge</code></li>
+    <li><code>mkactivity</code></li>
+  </ul>
+  <ul>
+    <li><code>mkcol</code></li>
+    <li><code>move</code></li>
+    <li><code>m-search</code></li>
+    <li><code>notify</code></li>
+    <li><code>options</code></li>
+    <li><code>patch</code></li>
+    <li><code>post</code></li>
+  </ul>
+  <ul>
+    <li><code>purge</code></li>
+    <li><code>put</code></li>
+    <li><code>report</code></li>
+    <li><code>search</code></li>
+    <li><code>subscribe</code></li>
+    <li><code>trace</code></li>
+    <li><code>unlock</code></li>
+    <li><code>unsubscribe</code></li>
+  </ul>
+</div>
 
 The API documentation has explicit entries only for the most popular HTTP methods `app.get()`,
 `app.post()`, `app.put()`, and `app.delete()`.

_includes/api/en/4x/app-settings.md

@@ -9,8 +9,15 @@ Exceptions: Sub-apps will inherit the value of `trust proxy` even though it has
 Sub-apps will not inherit the value of `view cache` in production (when `NODE_ENV` is "production").
 
 <div class="table-scroller">
-  <table class="doctable" border="1">
-    <thead><tr><th id="app-settings-property">Property</th><th>Type</th><th>Description</th><th>Default</th></tr></thead>
+  <table>
+    <thead>
+      <tr>
+        <th id="app-settings-property">Property</th>
+        <th>Type</th>
+        <th>Description</th>
+        <th>Default</th>
+      </tr>
+    </thead>
     <tbody>
     <tr>
   <td markdown="1">
@@ -193,6 +200,7 @@ A custom query string parsing function will receive the complete query string, a
     </tr>
     </tbody>
   </table>
+  </div>
 
   <h5 id="trust.proxy.options.table">Options for `trust proxy` setting</h5>
 
@@ -201,7 +209,8 @@ A custom query string parsing function will receive the complete query string, a
   information.
   </p>
 
-  <table class="doctable" border="1">
+<div class="table-scroller">
+  <table>
     <thead><tr><th>Type</th><th>Value</th></tr></thead>
     <tbody>
       <tr>
@@ -271,6 +280,7 @@ app.set('trust proxy', function (ip) {
       </tr>
     </tbody>
   </table>
+</div>
 
   <h5 id="etag.options.table">Options for `etag` setting</h5>
 
@@ -285,7 +295,8 @@ The [express.static](#express.static) middleware ignores these settings.
   For more information, see its documentation.
   </p>
 
-  <table class="doctable" border="1">
+<div class="table-scroller">
+  <table>
     <thead><tr><th>Type</th><th>Value</th></tr></thead>
     <tbody>
       <tr>

_includes/api/en/4x/app-use.md

@@ -66,7 +66,7 @@ The following table provides some simple examples of valid `path` values for
 mounting middleware.
 
 <div class="table-scroller">
-<table class="doctable" border="1">
+<table>
 
 <thead>
 <tr>
@@ -166,7 +166,7 @@ app.use(['/abcd', '/xyza', /\/lmn|\/pqr/], function (req, res, next) {
 The following table provides some simple examples of middleware functions that
 can be used as the `callback` argument to `app.use()`, `app.METHOD()`, and `app.all()`.
 
-<table class="doctable" border="1">
+<table>
 
 <thead>
 <tr>
@@ -282,6 +282,7 @@ app.use(mw1, [mw2, r1, r2], subApp)
 </tbody>
 
 </table>
+</div>
 
 Following are some examples of using the [express.static](/{{page.lang}}/guide/using-middleware.html#middleware.built-in)
 middleware in an Express app.

_includes/api/en/4x/express.json.md

@@ -26,6 +26,8 @@ For example, `req.body.foo.toString()` may fail in multiple ways, for example
 function and instead a string or other user-input.
 </div>
 
+<div class="table-scroller" markdown="1">
+
 The following table describes the properties of the optional `options` object.
 
 | Property      | Description                                                           |   Type      | Default         |
@@ -36,3 +38,5 @@ The following table describes the properties of the optional `options` object.
 | `strict`      | Enables or disables only accepting arrays and objects; when disabled will accept anything `JSON.parse` accepts. | Boolean | `true` |
 | `type`        | This is used to determine what media type the middleware will parse. This option can be a string, array of strings, or a function. If not a function, `type` option is passed directly to the [type-is](https://www.npmjs.org/package/type-is#readme) library and this can be an extension name (like `json`), a mime type (like `application/json`), or a mime type with a wildcard (like `*/*` or `*/json`). If a function, the `type` option is called as `fn(req)` and the request is parsed if it returns a truthy value. | Mixed | `"application/json"` |
 | `verify`      | This option, if supplied, is called as `verify(req, res, buf, encoding)`, where `buf` is a `Buffer` of the raw request body and `encoding` is the encoding of the request. The parsing can be aborted by throwing an error. | Function | `undefined` |
+
+</div>

_includes/api/en/4x/express.raw.md

@@ -28,9 +28,13 @@ that `req.body` is a `Buffer` before calling buffer methods is recommended.
 
 The following table describes the properties of the optional `options` object.
 
+<div class="table-scroller" markdown="1">
+
 | Property  | Description                                                           |   Type      | Default         |
 |-----------|-----------------------------------------------------------------------|-------------|-----------------|
 | `inflate` | Enables or disables handling deflated (compressed) bodies; when disabled, deflated bodies are rejected. | Boolean | `true` |
 | `limit`   | Controls the maximum request body size. If this is a number, then the value specifies the number of bytes; if it is a string, the value is passed to the [bytes](https://www.npmjs.com/package/bytes) library for parsing. | Mixed | `"100kb"` |
 | `type`    | This is used to determine what media type the middleware will parse. This option can be a string, array of strings, or a function. If not a function, `type` option is passed directly to the [type-is](https://www.npmjs.org/package/type-is#readme) library and this can be an extension name (like `bin`), a mime type (like `application/octet-stream`), or a mime type with a wildcard (like `*/*` or `application/*`). If a function, the `type` option is called as `fn(req)` and the request is parsed if it returns a truthy value. | Mixed | `"application/octet-stream"` |
 | `verify`  | This option, if supplied, is called as `verify(req, res, buf, encoding)`, where `buf` is a `Buffer` of the raw request body and `encoding` is the encoding of the request. The parsing can be aborted by throwing an error. | Function | `undefined` |
+
+</div>

_includes/api/en/4x/express.static.md

@@ -16,6 +16,8 @@ to move on to the next middleware, allowing for stacking and fall-backs.
 The following table describes the properties of the `options` object.
 See also the [example below](#example.of.express.static).
 
+<div class="table-scroller" markdown="1">
+
 | Property      | Description                                                           |   Type      | Default         |
 |---------------|-----------------------------------------------------------------------|-------------|-----------------|
 | `dotfiles`    | Determines how dotfiles (files or directories that begin with a dot ".") are treated.  <br/><br/>See [dotfiles](#dotfiles) below. | String | `undefined` |
@@ -29,6 +31,8 @@ See also the [example below](#example.of.express.static).
 | `redirect`    | Redirect to trailing "/" when the pathname is a directory. | Boolean | `true` |
 | `setHeaders`  | Function for setting HTTP headers to serve with the file. <br/><br/>See [setHeaders](#setHeaders) below. | Function |  |
 
+</div>
+
 For more information, see [Serving static files in Express](/starter/static-files.html).
 and [Using middleware - Built-in middleware](/{{page.lang}}/guide/using-middleware.html#middleware.built-in).
 

_includes/api/en/4x/express.text.md

@@ -28,10 +28,14 @@ that `req.body` is a string before calling string methods is recommended.
 
 The following table describes the properties of the optional `options` object.
 
+<div class="table-scroller" markdown="1">
+
 | Property         | Description                                                           |   Type      | Default         |
 |------------------|-----------------------------------------------------------------------|-------------|-----------------|
 | `defaultCharset` | Specify the default character set for the text content if the charset is not specified in the `Content-Type` header of the request. | String | `"utf-8"` |
 | `inflate`        | Enables or disables handling deflated (compressed) bodies; when disabled, deflated bodies are rejected. | Boolean | `true` |
 | `limit`          | Controls the maximum request body size. If this is a number, then the value specifies the number of bytes; if it is a string, the value is passed to the [bytes](https://www.npmjs.com/package/bytes) library for parsing. | Mixed | `"100kb"` |
 | `type`           | This is used to determine what media type the middleware will parse. This option can be a string, array of strings, or a function. If not a function, `type` option is passed directly to the [type-is](https://www.npmjs.org/package/type-is#readme) library and this can be an extension name (like `txt`), a mime type (like `text/plain`), or a mime type with a wildcard (like `*/*` or `text/*`). If a function, the `type` option is called as `fn(req)` and the request is parsed if it returns a truthy value. | Mixed | `"text/plain"` |
 | `verify`         | This option, if supplied, is called as `verify(req, res, buf, encoding)`, where `buf` is a `Buffer` of the raw request body and `encoding` is the encoding of the request. The parsing can be aborted by throwing an error. | Function | `undefined` |
+
+</div>

_includes/api/en/4x/express.urlencoded.md

@@ -29,6 +29,8 @@ function and instead a string or other user-input.
 
 The following table describes the properties of the optional `options` object.
 
+<div class="table-scroller" markdown="1">
+
 | Property         | Description                                                           |   Type      | Default         |
 |------------------|-----------------------------------------------------------------------|-------------|-----------------|
 | `extended`       | This option allows to choose between parsing the URL-encoded data with the `querystring` library (when `false`) or the `qs` library (when `true`). The "extended" syntax allows for rich objects and arrays to be encoded into the URL-encoded format, allowing for a JSON-like experience with URL-encoded. For more information, please [see the qs library](https://www.npmjs.org/package/qs#readme). | Boolean | `true` |
@@ -37,3 +39,5 @@ The following table describes the properties of the optional `options` object.
 | `parameterLimit` | This option controls the maximum number of parameters that are allowed in the URL-encoded data. If a request contains more parameters than this value, an error will be raised. | Number | `1000` |
 | `type`           | This is used to determine what media type the middleware will parse. This option can be a string, array of strings, or a function. If not a function, `type` option is passed directly to the [type-is](https://www.npmjs.org/package/type-is#readme) library and this can be an extension name (like `urlencoded`), a mime type (like `application/x-www-form-urlencoded`), or a mime type with a wildcard (like `*/x-www-form-urlencoded`). If a function, the `type` option is called as `fn(req)` and the request is parsed if it returns a truthy value. | Mixed | `"application/x-www-form-urlencoded"` |
 | `verify`         | This option, if supplied, is called as `verify(req, res, buf, encoding)`, where `buf` is a `Buffer` of the raw request body and `encoding` is the encoding of the request. The parsing can be aborted by throwing an error. | Function | `undefined` |
+
+</div>

_includes/api/en/4x/req-range.md

@@ -6,9 +6,13 @@ The `size` parameter is the maximum size of the resource.
 
 The `options` parameter is an object that can have the following properties.
 
+<div class="table-scroller" markdown="1">
+
 | Property    | Type |  Description                                                     |
 |-------------|-------------------------------------------------------------------------|
-| `combine`   | Boolean | Specify if overlapping & adjacent ranges should be combined, defaults to `false`. When `true`, ranges will be combined and returned as if they were specified that way in the header.
+| `combine`   | Boolean | Specify if overlapping & adjacent ranges should be combined, defaults to `false`. When `true`, ranges will be combined and returned as if they were specified that way in the header.|
+
+</div>
 
 An array of ranges will be returned or negative numbers indicating an error parsing.
 

_includes/api/en/4x/res-cookie.md

@@ -4,19 +4,23 @@ Sets cookie `name` to `value`.  The `value` parameter may be a string or object
 
 The `options` parameter is an object that can have the following properties.
 
+<div class="table-scroller" markdown="1">
+
 | Property      | Type |  Description                                                             |
 |---------------|-------------------------------------------------------------------------|
-| `domain`      | String | Domain name for the cookie. Defaults to the domain name of the app.
-| `encode`      | Function | A synchronous function used for cookie value encoding. Defaults to `encodeURIComponent`.
-| `expires`     | Date | Expiry date of the cookie in GMT. If not specified or set to 0, creates a session cookie.
-| `httpOnly`    | Boolean | Flags the cookie to be accessible only by the web server.
-| `maxAge`      | Number | Convenient option for setting the expiry time relative to the current time in milliseconds.
-| `path`        | String | Path for the cookie. Defaults to "/".
-| `partitioned` | Boolean | Indicates that the cookie should be stored using partitioned storage. See [Cookies Having Independent Partitioned State (CHIPS)](https://developer.mozilla.org/en-US/docs/Web/Privacy/Partitioned_cookies) for more details.
-| `priority`    | String | Value of the "Priority" **Set-Cookie** attribute.
-| `secure`      | Boolean | Marks the cookie to be used with HTTPS only.
-| `signed`      | Boolean | Indicates if the cookie should be signed.
-| `sameSite`    | Boolean or String | Value of the "SameSite" **Set-Cookie** attribute. More information at [https://tools.ietf.org/html/draft-ietf-httpbis-cookie-same-site-00#section-4.1.1](https://tools.ietf.org/html/draft-ietf-httpbis-cookie-same-site-00#section-4.1.1).
+| `domain`      | String | Domain name for the cookie. Defaults to the domain name of the app.|
+| `encode`      | Function | A synchronous function used for cookie value encoding. Defaults to `encodeURIComponent`.|
+| `expires`     | Date | Expiry date of the cookie in GMT. If not specified or set to 0, creates a session cookie.|
+| `httpOnly`    | Boolean | Flags the cookie to be accessible only by the web server.|
+| `maxAge`      | Number | Convenient option for setting the expiry time relative to the current time in milliseconds.|
+| `path`        | String | Path for the cookie. Defaults to "/".|
+| `partitioned` | Boolean | Indicates that the cookie should be stored using partitioned storage. See [Cookies Having Independent Partitioned State (CHIPS)](https://developer.mozilla.org/en-US/docs/Web/Privacy/Partitioned_cookies) for more details.|
+| `priority`    | String | Value of the "Priority" **Set-Cookie** attribute.|
+| `secure`      | Boolean | Marks the cookie to be used with HTTPS only.|
+| `signed`      | Boolean | Indicates if the cookie should be signed.|
+| `sameSite`    | Boolean or String | Value of the "SameSite" **Set-Cookie** attribute. More information at [https://tools.ietf.org/html/draft-ietf-httpbis-cookie-same-site-00#section-4.1.1](https://tools.ietf.org/html/draft-ietf-httpbis-cookie-same-site-00#section-4.1.1).|
+
+</div>
 
 <div class="doc-box doc-notice" markdown="1">
 All `res.cookie()` does is set the HTTP `Set-Cookie` header with the options provided.