# Bug OP-12369 - Move work package form fields to the bottom of label in very narrow screens (mobile)

Project: OpenProject
Status: closed
URL: https://community.openproject.org/work_packages/OP-12369

## Open points

_No work packages_

## Details

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Module |  |
| Target versions | 13.0.0 |
| Observed in versions |  |
| Sprint | 13.0.0 |
| Backlog bucket |  |
| Bug found in version (deprecated) |  |
| Found in mobile app version |  |
| Follow-up feedback e-mail |  |
| Requires doc change | No |
| Accessibility | No |
| Pull preview |  |
| List |  |
| Labels |  |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable | Wieland Lindenthal |
| Product manager |  |
| Developers |  |
| Designer |  |
| Ordered by | Niels Lindenthal |
| Signed off by |  |
| Interest by |  |

## Planning

| Attribute | Value |
| --- | --- |
| Relevance |  |

## Costs

| Attribute | Value |
| --- | --- |
| Votes |  |
| Work |  |
| Labor costs |  |

## Description

### 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 **narrow widths (0 to 375px)**, display work package form fields value _below_ the label
    *   All fields take 100% of available space
    *   This includes regular fields and long text custom fields
    *   Labels that are two long will go multi-line
*   In **regular widths (376 to 800px)**, display work package form field values _to the right_ of the label
    *   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 space
*   In **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
        *   Form field values continue to take all available horizontal space
    *   Long text fields will not have columns will span the entire available width
*   In regular and wide modes, ensure that all fields in the same column are aligned by limited the field label to 170px max width

### Screenshots (buggy behaviour)

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

### Mockups (expected behaviour)

**Mobile (0 to 375px)**

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

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

**New task**

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

### Figma

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

### 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