-
-
Notifications
You must be signed in to change notification settings - Fork 797
Description
Hi there, and thanks again for this awesome project! 🙌
I would like to suggest a small but impactful UI improvement regarding how messages are displayed on desktop screens in Gotify.
🔎 Problem Observed:
Currently, each notification message is limited to a fixed width (even if the screen is large enough).
As a result, long technical messages (for example, ZFS reports, SMART errors, system logs, etc.) end up being squeezed, which forces horizontal scrolling to read all the information.
This greatly impacts readability, especially on desktop/laptop displays.
🛠️ Quick Manual Test (with my limited CSS/HTML skills):
I'm not an expert at all in frontend development (CSS/HTML), but I quickly experimented and found that modifying two elements made the interface much more usable without causing problems:
✅ 1. Adjust the .jss31 class (probably generated by Material-UI or the frontend framework) :
Before:
.jss31 {
width: 600px;
}
After tweaking:
.jss31 {
width: 100%;
max-width: 100%;
}
➔ This allowed the message container to expand properly and use the full width of the page.
✅ 2. Adjust the <main> container in the HTML
Currently the <main> tag has styling that limits the content width.
Ideally, it would be adjusted to look like:
<main style="margin: 0px auto; max-width: 100%;">
➔ This change allows all messages and the central content area to naturally adapt to larger screens without being restricted to an unnecessary narrow area.
📸 Visual Comparison:
Current behavior:
Expected improved behavior: (screenshot attached after quick CSS patch)
🎯 Why it matters:
No more unnecessary horizontal scrolling.
Much better readability for long technical notifications.
Minimal change needed (probably just CSS/HTML tweaks).
Would not affect mobile view negatively (a responsive max-width could easily be applied if necessary).
🧠 Notes:
I'm fully aware that my method is a quick hack (I'm absolutely not a web developer 😅).
It’s just to demonstrate the UX improvement potential.
I'm sure your team could integrate it much cleaner directly into the frontend properly if you consider it valuable!
Thanks a lot for considering this suggestion!
I'd be happy to test any beta or proposed change if needed 🚀

