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