Request to add option to fill page or make reactive

[NightHawkATL]

Is your feature request related to a problem? Please describe.
I have a few notifications that are long and wide and I have to scroll to get to the horizontal scroll bar to see the wider notifications.

Describe the solution you'd like
It would be nice to have the notifications window fill the available area to allow for viewing the wider notifications either with an option to "fill" or have the notification area be reactive to the size of the screen or window viewing them.

Describe alternatives you've considered
not using Gotify as there are others that offer this but aren't as easy to configure if there is no native Gotify support.

Additional context
none at the moment as the above should suffice, but let me know if you have questions.

[eternal-flame-AD]

Thanks for the ticket, I think it is because of many by-pixel max width styles in the code:

server/ui/src/message/Message.tsx

Lines 30 to 32 in 63cfc1f

	messageContentWrapper: {
	width: '100%',
	maxWidth: 585,

server/ui/src/common/DefaultPage.tsx

Lines 11 to 23 in 63cfc1f

	const DefaultPage: FC<IProps> = ({title, rightControl, maxWidth = 700, children}) => (
	<main style={{margin: '0 auto', maxWidth}}>
	<Grid container spacing={4}>
	<Grid item xs={12} style={{display: 'flex', flexWrap: 'wrap'}}>
	<Typography variant="h4" style={{flex: 1}}>
	{title}
	</Typography>
	{rightControl}
	</Grid>
	{children}
	</Grid>
	</main>
	);

I am not familiar with frontend but maybe this can become a relative constraint? @jmattheis

[jmattheis]

Yeah, I think we should have some min-width so that small messages keep the current design and only bigger messages get more width. Maybe something like: min(100%, max(fit-to-content, 700px)).

[mranderson56]

Hi,

Same for me ! @jmattheis Do you think it's possible to add this modification to the next release ?

[slykereven]

While you're waiting for the fix, you can do a little css injection

Under Firefox with the Stylus extension
https://addons.mozilla.org/en-GB/firefox/addon/styl-us/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search
Add or adapt this :
@-moz-document url-prefix("https://YOUR URL/#/") {
/* Insert code here... */
main.jss1 > main {
max-width: 85% !important;
margin: 0 !important;
}
.jss31 {
max-width: 95% !important;
}
.jss36 > pre {
height: auto;
max-height: 300px;
}
.jss36 > pre > code {
display: inline-block;
height: auto;
max-height: 300px;
}
.jss37 {
height: auto;
max-height: 400px;
}
}

use F5 to refresh the page, not the button on the page

[mranderson56]

Hi @jmattheis ,
Any update about this issue ?
Thanks.

[jmattheis]

Nope, no update on this.

[BerserkeR-Git]

Even without extremely long notifications, small text based notifications from sonarr or whatever take up lots of screen space as well. Why not opt for a more compact list view; where the nav objects can stay at a normal size (maybe slightly smaller than they are right now) but the notification tiles in the middle are in a more compact list view, so you know more of what's going on at a glance?

I can only view a couple notifications on desktop, this UI looks like it's made for people with bad eyes or something, just compare it to the scaling of Github and you'll see the difference.