Platform: Website
Browser: Firefox, Chrome, etc. (all browsers, I think)
URLs (aka web addresses) of any relevant observations or pages: https://www.inaturalist.org/flags/845748#activity_comment_eba53dfb-d14c-40b5-876a-fbdb94732e41
Screenshots of what you are seeing:
Description of problem:
Comments on flags have fixed width, 532px, leaving an enormous amount of blank space on most monitors and screens. View the screenshots on a non-white background to see how constricted the comments are. Screenshots were taken on an older monitor with a width of 1440px; monitors these days are even wider than that. 532px may have been generous a decade or two ago, but it’s tiny now, even for some phones and tablets.
In addition to this, any content which exceeds that width is cut off, as happens to the table in the first screenshot and the example URL.
Fixed width for content is pretty much anathema to responsive design principles - that is, designing for users who have lots of different screen and monitor sizes.
Expected behaviour: the text of the comments should be the same width as the header shown in the second screenshot. (Which has already generous margins on both sides.)
Inspection shows two lines which would have to change:
.item_content{width:532px}in the application CSS either needs to be deleted or changed to.item_content{width:100%}<div class="col-xs-8">in the HTML needs to be changed to<div class="col-xs-12">, because bootstrap CSS sets col-xs-8’s width to 2/3rds of available space.
.item_content .body{overflow:visible} seems like a no-brainer too, since not displaying part of the comment is a serious bug and there’s still plenty of empty space to overflow into. Possibly {overflow:auto} or {overflow:scroll} instead.
