### Steps to reproduce

1. Open a work package in a narrow screen (or in split screen) or
2. Open a new work package creation form in a narrow screen (or in split screen)

### What is the buggy behavior?

* The long and short text fields are not all aligned in length
* Lost white space in the area below the label for long text fields with values
* Labels are truncated more than necessary

### Expected behaviour

* In Begin of the insertion**narrow widths (0 to 375px)**, displayEnd of the insertion Begin of the deletion very narrow screens/split-screens, move allEnd of the deletion work package form fields Begin of the insertionvalueEnd of the insertion _below_ the label
* Begin of the insertionAll fields take 100% of available spaceEnd of the insertion Begin of the deletion **\[open\]** Width where the change happens to be definedEnd of the deletion
* This includes regular fields and long text custom fields
* Begin of the insertionLabels that are two long will go multi-line
* End of the insertion In Begin of the insertion**regular widths (376 to 800px)**, display work package form field values _toEnd of the insertion Begin of the deletion mobile,End of the deletion the Begin of the insertionright_ ofEnd of the insertion Begin of the deletion fields are then _always_ belowEnd of the deletion the label Begin of the insertion
* The label has a max width of 170px
* Label is top-aligned and will go multi-line if too long
* The form field value will take all the available horizontal spaceEnd of the insertion
* Begin of the insertionIn **wide widths (376 to 800px)**, use the same rules as the regular widths but also
* Maintain the existing two-column layout for regular (non-long text) fields
* Labels continue to be of 170px max width
* FormEnd of the insertion Begin of the deletion An openEnd of the deletion field Begin of the insertionvalues continue to take all available horizontal space
* Long text fieldsEnd of the insertion will Begin of the insertionnot have columns willEnd of the insertion span the entire Begin of the insertionavailableEnd of the insertion width Begin of the deletion of the formEnd of the deletion
* In Begin of the insertionregular and wide modes, ensure thatEnd of the insertion Begin of the deletion single-column mode, make sureEnd of the deletion all fields Begin of the insertionin the same columnEnd of the insertion are aligned Begin of the insertionby limited the field label to 170px max widthEnd of the insertion

### Screenshots Begin of the insertion(buggy behaviour)End of the insertion

**Mobile**

**<img class="op-uc-image op-uc-image_inline" style="width:375px;" src="/api/v3/attachments/55244/content">**

**Current: CF long text field not aligned with the others**

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

### Begin of the insertionMockups (expected behaviour)End of the insertion Begin of the deletion Visuals (mockups)End of the deletion

Begin of the insertion**Mobile (0 to 375px)**End of the insertion Begin of the deletion **Mobile**End of the deletion

<img class="op-uc-image op-uc-image_inline" Begin of the insertionsrc="/api/v3/attachments/55602/content">End of the insertion Begin of the deletion src="/api/v3/attachments/55243/content">End of the deletion

Begin of the insertion**Mid (376 to 860px):**

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/55604/content">

**Wide (860+ px):**

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/55605/content">

End of the insertion **New task**

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/55242/content"> Begin of the insertion

### Figma

Mockups: https://www.figma.com/file/hBiQG4bksG4UgjNf1PCUqk/Work-package-form-label?node-id=0-1End of the insertion

### Out of scope

* Changes in multi-column mode
* Long text fields continue to span multiple columns (unchanged from now)
* Changing the colour of the labels to make them stand out more (and distinguish from the actual content, which can also include styling that might make it compete with the label)
* Only for work package forms
* Expand/collapsible long text fields