Do limit main DIV container's width much less or not at all
A date poll grows in width by the amount of available time slots. Currently, the tool's width is limited, so we need to scroll horizontal despite the browser window width is sufficient to display all content at once – displays with 1980px or more width are quite common, but only 1110px are used by the software. Instead, allow to utilize all the available browser width or at least more width. I don't see any downside; if the window becomes too wide for taste of a user, user can easily change the browser window's size, e.g. snap to right half of the screen.
Current state
Suggested state
Motivation / Use Case
I do regularly need 6 or 8 time slots for a group with members from diverse organizations & countries, who hence have quite diverse time constraints (holidays, jour fixes,...). To find the required 6 or 8 time slots, I usually need 20-25 options. They are displayed much wider than the current hard width maximum of 1110px – so even if browser window is wide enough to display all options, one must scroll horizontally, which has negative effects, e.g.
- users unfamiliar with the tool do not initially see a save button and thus do not even start to fill the options
- users can't see all options, making it less convenient & quick to match with their time planning
- users sometimes see only dates but not the year & month – especially bad when planning around year's change
- I can't see at one glance all options & answers to get a quick overview on the most feasible dates and whom to contact
- In some installations like https://nuudel.digitalcourage.de/ the name column is not fixated at the left, so becomes invisible, hence lines are mixed up etc.
What to change (I did not understand the CSS source code, but was only able to identify the HTML elements and the computed CSS values)
Increase computed CSS width of 1170px for
<div class="container ombre">
Within that div, the two table with the options needs to be set wider than 1110px to utilize the available space
<table id="results1" class="results">
<thead style="width: 1110px;">
<tbody style="width: 1110px;">
<table class="results" id="results2">
<tbody style="width: 1110px;">
<tfoot style="width: 1110px;">