**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.

* Use 144px as width

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

* Update `xlarge` from 640px to 680px to match the width of the wrapper introduced here: ##61755


Begin of the insertion**Hint for QA**

This can currently only be tested in the lookbook, eg. [https://qa.openproject-edge.com/lookbook/inspect/primer/forms/custom\_width\_fields\_form](https://qa.openproject-edge.com/lookbook/inspect/primer/forms/custom_width_fields_form)&nbsp;

End of the insertion **To do**

* [ ] Finalise Begin of the insertionspecs End of the insertion Begin of the deletion specs&nbsp;End of the deletion
* [ ] 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.