# QML UI Discussion

## Current state

A new design is expected later on.
Until then, the following considerations are in place.

- The main window has a minimum width and height
- The side panels have a fixed width size
- The centre content is flexible in width
- The corner cases that generate issues in the flexible content side should be addressed, and the decisions/lessons learned added to this document as (precedence list)
- Guidelines for out of space corner-cases
- Prioritize keeping the layout stable (e.g. shrinking extra margins over any control/panel size shrinking)
- Consider vertical scrolling and avoid horizontal scrolling
- Don't scale controls/fonts to fit width; address corner cases with design to find a solution (e.g. overflow pattern)

## Current UI state discussion

- Prefer Controls.Layouts to anchors and x/y
- Use implicit sizes for layouts and windows content
- Add minimal/maximal viewport feature tests to QA's test cases
- Resizing is not scaling, we should never scale, components should follow viewport by resizing
- We should not make app look broken and discuss solutions per case (scrollview vs elided text, etc.)

## Suggestions for the further implementation

- Avoid defining sizes, margins and other magic numbers in pixels. Use Ui.dip or some base control size
- If we decide to go with customizing [`Qt Quick Controls`](https://doc.qt.io/qt-6/qtquickcontrols-index.html) for our future controls library, we will be limited in the default set of properties. Therefore, our designs should follow this set of properties for controls from the very beginning.

## Next actions
- find broken layouts in the app
- schedule meeting and discuss case by case how it should be solved
- create guidelines based on the discussed solutions

### Broken layouts
1) 
soulution proposal: https://github.com/status-im/status-desktop/pull/5920#discussion_r911791737
2) 
3) 
4) 
https://github.com/status-im/status-desktop/issues/6320