TASK Make UI responsive and usable on different resolutions

[tan-at]

Currently, the app's UI works as intended when used on a "normal-sized" desktop view.

When the app is used on a 2560x1440 resolution screen, the frontend UI doesn't look good. Examples with the chatbot view. Problems are similar in other views, with the forms and other parts of the UI not centering, somehow always forcing the user to scroll down a bit:

Chatbot view in 2560x1440. Notice the overly wide left side for choosing old conversations, and the bottom field for inserting text and the button for submitting, are both cut out of the screen; only visible when scrolling down:

Chatbot view in 1920x1080. Similar problems as above:

Chatbot view in 960x1080. Similar problems as above. Somehow feels the most usable one:

Notice the problems with:

• Chatbot view's previous conversations sidebar is a bit too wide in larger resolutions.
• Chatbot's chat window require the user to move their eyes horizontally, because the text bubbles are very wide on larger resolutions. (Consider making the view centered?)
• Chatbot view's text input field is not fully visible, as well as the "submit" button.
• Most if not all views require the user to scroll down for the content to be centered,

  ---

  Acceptance criteria

App has a responsive UI that can be used on different-sized screens. Test with 960x1080, 1920x1080 and, if possible, 2560x1440 screens/windows.

The design for the chat screen can be inspired by ChatGPT. View in 2560x1440:

View in 1920x1080:

View in 960x1080 (half of the screen with 1920x1080):

[tan-at]

Related task for mobile UI design: TASK Design UI for mobile users 54