**Context**

The current implementation of forms in OpenProject allows us to specify various widths for inputs. Currently, the options are:

```ruby
input_width: :auto => width: auto
input_width: :small => max-width: min(256px, 100vw - 2rem)
input_width: :medium => max-width: min(320px, 100vw - 2rem)
input_width: :large => max-width: min(480px, 100vw - 2rem)
input_width: :xlarge => max-width: min(640px, 100vw - 2rem)
input_width: :xxlarge => max-width: min(960px, 100vw - 2rem)
```

Sometimes, however, `small` isn't small enough. This is particularly apparent when we have date or time fields in a single line. For example:

<img class="image_resized op-uc-image op-uc-image_inline" style="width:491px;" src="/api/v3/attachments/328790/content">

**Acceptance criteria**

* Introduce an even smaller variety, perhaps called :xsmall, to fit formats like dates and time.

* _\[open\] Tenatively, 100px seems to work. Up for discussion._

* The trailing units might not work (because it&#39;ll take 25% of the width of the input).

* Update `xlarge` from 640px to Begin of the insertion680px to match the settingsWrapper introduced here: ##61755End of the insertion Begin of the deletion 680px.End of the deletion


**To do**

* [ ] Finalise specs&nbsp;
* [ ] Update Primer component
* [ ] Update [Lookbook docs](https://qa.openproject-edge.com/lookbook/pages/patterns/forms)
* [ ] Review existing date and time inputs and replace where necessary.