[GH-ISSUE #750] Output limited to a very narrow collumn - text squashed and screen realestate wasted #50867

Closed
opened 2026-05-05 11:25:28 -05:00 by GiteaMirror · 11 comments
Owner

Originally created by @sammcj on GitHub (Feb 16, 2024).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/750

Bug Report

Description

Bug Summary:

The application seems to limit the width of the chat conversation to a very narrow column.

This makes for excessive scrolling and makes reading code difficult.

Steps to Reproduce:

It appears be be hard coded like this so I think everyone would experience it.

Expected Behaviour:

The width of the conversation area to scale horizontally to the available display size + a little padding.

For example, perhaps it could always be about 80% of the available space between the side panel the the scrollbar?

Otherwise - an option to set the maximum width in settings would be great.

Actual Behaviour:

Text is squashed into a tiny little column in the centre of your browser window.

This might be OK for a mobile device but is very hard to work with on a standard 4k screen.

Environment

  • Firefox 122.0.1
  • macOS 14.3.1

Reproduction Details

Confirmation:

  • I have read and followed all the instructions provided in the README.md.
  • I have reviewed the troubleshooting.md document.
  • I have included the browser console logs.
  • I have included the Docker container logs.

Logs and Screenshots

Browser Console Logs:

N/A (I think), but just let me know if you'd like me to provide any of the calculated CSS/HTML and I'll add it.

Docker Container Logs:

N/A (no errors)

Screenshots (if applicable):

image image

Installation Method

Docker

Additional Information

Note

If the bug report is incomplete or does not follow the provided instructions, it may not be addressed. Please ensure that you have followed the steps outlined in the README.md and troubleshooting.md documents, and provide all necessary information for us to reproduce and address the issue. Thank you!

Originally created by @sammcj on GitHub (Feb 16, 2024). Original GitHub issue: https://github.com/open-webui/open-webui/issues/750 # Bug Report ## Description **Bug Summary:** The application seems to limit the width of the chat conversation to a very narrow column. This makes for excessive scrolling and makes reading code difficult. **Steps to Reproduce:** It appears be be hard coded like this so I think everyone would experience it. **Expected Behaviour:** The width of the conversation area to scale horizontally to the available display size + a little padding. For example, perhaps it could always be about 80% of the available space between the side panel the the scrollbar? Otherwise - an option to set the maximum width in settings would be great. **Actual Behaviour:** Text is squashed into a tiny little column in the centre of your browser window. This might be OK for a mobile device but is very hard to work with on a standard 4k screen. ## Environment - Firefox 122.0.1 - macOS 14.3.1 ## Reproduction Details **Confirmation:** - [x] I have read and followed all the instructions provided in the README.md. - [x] I have reviewed the troubleshooting.md document. - [x] I have included the browser console logs. - [x] I have included the Docker container logs. ## Logs and Screenshots **Browser Console Logs:** N/A (I think), but just let me know if you'd like me to provide any of the calculated CSS/HTML and I'll add it. **Docker Container Logs:** N/A (no errors) **Screenshots (if applicable):** <img width="3359" alt="image" src="https://github.com/ollama-webui/ollama-webui/assets/862951/68a43831-0c07-42f3-a830-72a746fec992"> <img width="383" alt="image" src="https://github.com/ollama-webui/ollama-webui/assets/862951/08eafb5b-8101-4ef5-9031-39bdd09fa647"> ## Installation Method Docker ## Additional Information ## Note If the bug report is incomplete or does not follow the provided instructions, it may not be addressed. Please ensure that you have followed the steps outlined in the README.md and troubleshooting.md documents, and provide all necessary information for us to reproduce and address the issue. Thank you!
Author
Owner

@justinh-rahb commented on GitHub (Feb 16, 2024):

I do commend you for giving a detailed report, we love to see those and I hope to see more like it, thank you. If I could kindly suggest, please review past issues or discussions in the future before opening new ones as we have a couple matching this one:

<!-- gh-comment-id:1947631644 --> @justinh-rahb commented on GitHub (Feb 16, 2024): I do commend you for giving a detailed report, we love to see those and I hope to see more like it, thank you. If I could kindly suggest, please review past issues or discussions in the future before opening new ones as we have a couple matching this one: - Duplicate issue #711 - Fixed in PR #744
Author
Owner

@sammcj commented on GitHub (Feb 16, 2024):

I did search through issues first.

Fullscreen mode doesn't fix it (and it seems to be a bit broken as well). Fullscreen seems to be on the other extreme end of the scale where it uses all of your browser which is overkill unless I guess you're running it full screen on a dashboard maybe?

What I'm proposing here is a responsive or at least configurable design.

Fullscreen looks like this:

image
<!-- gh-comment-id:1947696189 --> @sammcj commented on GitHub (Feb 16, 2024): I did search through issues first. Fullscreen mode doesn't fix it (and it seems to be a bit broken as well). Fullscreen seems to be on the other extreme end of the scale where it uses all of your browser which is overkill unless I guess you're running it full screen on a dashboard maybe? What I'm proposing here is a responsive or at least configurable design. Fullscreen looks like this: <img width="3336" alt="image" src="https://github.com/ollama-webui/ollama-webui/assets/862951/a44ed482-793b-4fcc-b0b3-d3be9fa440a3">
Author
Owner

@justinh-rahb commented on GitHub (Feb 16, 2024):

Fullscreen mode doesn't fix it (and it seems to be a bit broken as well).

What I'm proposing here is a responsive or at least configurable design.

Fair, I agree fully on both of these, does look a bit whack at that scale either way currently.

<!-- gh-comment-id:1947699718 --> @justinh-rahb commented on GitHub (Feb 16, 2024): > Fullscreen mode doesn't fix it (and it seems to be a bit broken as well). > > What I'm proposing here is a responsive or at least configurable design. > Fair, I agree fully on both of these, does look a bit whack at that scale either way currently.
Author
Owner

@tjbck commented on GitHub (Feb 16, 2024):

Full screen mode disabled:
image

Full screen mode enabled:
image

Screenshot of WIP

<!-- gh-comment-id:1947702074 --> @tjbck commented on GitHub (Feb 16, 2024): Full screen mode disabled: ![image](https://github.com/ollama-webui/ollama-webui/assets/25473318/8084e6fe-0541-47a1-9af1-8ed3533e76d1) Full screen mode enabled: ![image](https://github.com/ollama-webui/ollama-webui/assets/25473318/4c21c66a-91b0-482c-b655-56e9d1833437) Screenshot of WIP
Author
Owner

@sammcj commented on GitHub (Feb 16, 2024):

Yeah sorry if I didn't explain it very well the first time - sometimes it's hard to describe in words 😅

<!-- gh-comment-id:1947702248 --> @sammcj commented on GitHub (Feb 16, 2024): Yeah sorry if I didn't explain it very well the first time - sometimes it's hard to describe in words 😅
Author
Owner

@sammcj commented on GitHub (Feb 16, 2024):

What resolution / scaling is that at @tjbck?

<!-- gh-comment-id:1947703423 --> @sammcj commented on GitHub (Feb 16, 2024): What resolution / scaling is that at @tjbck?
Author
Owner

@justinh-rahb commented on GitHub (Feb 16, 2024):

🥰 Oh Tim, my OCD would hug you but my ASD doesn't do hugs, they were doing a 2-for-1 deal on my birthday I guess

<!-- gh-comment-id:1947703520 --> @justinh-rahb commented on GitHub (Feb 16, 2024): 🥰 Oh Tim, my OCD would hug you but my ASD doesn't do hugs, they were doing a 2-for-1 deal on my birthday I guess
Author
Owner

@justinh-rahb commented on GitHub (Feb 16, 2024):

My apologies @sammcj, with more context of your intention, your issue report is bang on. And now @tjbck has something to tag with his incoming PR 👍

<!-- gh-comment-id:1947709586 --> @justinh-rahb commented on GitHub (Feb 16, 2024): My apologies @sammcj, with more context of your intention, your issue report is bang on. And now @tjbck has something to tag with his incoming PR 👍
Author
Owner

@tjbck commented on GitHub (Feb 16, 2024):

@sammcj not entirely sure, but using a 33" ultrawide monitor with macos!

<!-- gh-comment-id:1947741450 --> @tjbck commented on GitHub (Feb 16, 2024): @sammcj not entirely sure, but using a 33" ultrawide monitor with macos!
Author
Owner

@justinh-rahb commented on GitHub (Feb 16, 2024):

f8e3714ed0d4a19b65ebe61006ac9bde

<!-- gh-comment-id:1947743326 --> @justinh-rahb commented on GitHub (Feb 16, 2024): ![f8e3714ed0d4a19b65ebe61006ac9bde](https://github.com/ollama-webui/ollama-webui/assets/52832301/ec48e561-14de-41dd-b461-6d8613035e0c)
Author
Owner

@sammcj commented on GitHub (Feb 16, 2024):

woop woop, thanks folks - that was incredibly fast turnaround 😄 ❤️

<!-- gh-comment-id:1947813996 --> @sammcj commented on GitHub (Feb 16, 2024): woop woop, thanks folks - that was incredibly fast turnaround 😄 ❤️
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#50867