Support Scaling For Widescreen & Ultra-Wide Monitors on Desktop

[rockc]

I believe this only applies to a small group of people but I would like to put it out there. When viewing observations in iNaturalist with the map, features on the map do not properly scale when using an ultra-wide monitor (This may also affect widescreens but I am not sure), causing them to hover in the center of the screen. It makes the map a bit awkward to use with features at the center blocking users from having a clear view of the map.

If possible, having the screen properly scale with resolution, including widescreen and ultra-wide, would be appreciated. Bringing the info boxes to the periphery of the screen so that people’s view of the map remains unobstructed and easier to get a full image of the area you are looking at. Also scaling of the map itself vertically as with widescreens the map appears as a strip instead of filling out the screen.

If this belongs in a different topic or doesn’t apply here I apologize.

[lappelbaum]

Don’t forget to vote for your own request

[pisum]

are you talking only about changes in the map view? if so, i think there have been a lot of suggestions for Explore page updates, including more dynamic scaling (i would assume mostly for mobile, but which could apply to large or wide monitors, too). see: https://forum.inaturalist.org/t/ideas-for-a-revamped-explore-observations-search-page/8439. this kind of limited request might go best within that larger thread.

(it may be worth noting that below the buttons to zoom in/out and to find your current location, there’s a button to view the map in full screen, which might be the actual best solution to view the map on a large or wide screen.)

if you’re talking about making the whole website more dynamic for large or wide monitors, then you probably should make a case for such changes on other pages. small screens are less niche than large / wide screens, and past requests for small-screen-friendly designs haven’t gone very far: https://forum.inaturalist.org/t/mobile-friendly-website-responsive/1224.

[aspidoscelis]

For what it’s worth, I think it’s the horizontal resolution of the screen that’s the issue, not the aspect ratio of your screen—meaning, a square screen with the same horizontal resolution in pixels would have just as much dead space at right and left, along with of course a lot more space above and below the map, while the map interface would look just fine on an ultra-wide monitor with low resolution.

You can address this to some extent by zooming in with a browser, although of course that makes all the other UI elements bigger, too. So you don’t really get that much of an increase in usable map space, because a lot of it gets eaten up by the now-massive list of observations on the right. Basically, the UI is optimized for small, low-resolution screens. If your screen is large or high-resolution, no matter what its aspect ratio is, the UI is not going to fit well.

[aspidoscelis]

(“Small” meaning “small for a desktop”. It also doesn’t work well on really small—i.e., phone—screens.)

[thatmash]

This might be a good time to bring up the same weird scaling at 1440p with 100% scaling in windows

A similar problem with UI elements blocking the map and that huge amount of whitespace at the bottom

You’d think that the bottom of the map would be a set distance from the bottom info bar rather than being a constant height
And that the map controls and observation list would follow the edges of the screen

Something like this:

Looks a bit odd though

[kildor]

It becomes even worst if you switch the interface language to broader one, like Russian.

Only highlighted part of the map can interact with the user (dragging, opening the marker or close the obs. card.

[bouteloua]

No, I’ve made feature requests on behalf of others that I myself didn’t support. But you could discuss it further at #forum-feedback or at the Discourse forum: https://meta.discourse.org/tag/topic-voting

[aspidoscelis]

@user82793

The fact that one has made a feature request is de facto evidence that one supports their feature request.

Evidence, not proof. :-) Exceptions exist but are presumably rare.

[tiwane]

We discussed this and won’t be adding support for the current Explore. When the Explore page is rewritten, we’ll take a look at various screen resolution and see what we can support.

[ytsaiok]

Platform: Ubuntu 24.04.2 LTS with a 3840 × 2160 display

App version number, if a mobile app issue: desktop/website

Browser, if a website issue: (doesn’t seem important) Firefox 140.0.2, Chrome 137.0.7151.119 (Official Build) (64-bit)

URLs (aka web addresses) of any relevant observations or pages:
https://www.inaturalist.org/observations

Screenshots of what you are seeing:

Description of problem:

Step 1: Visit https://www.inaturalist.org/observations

[pisum]

see https://forum.inaturalist.org/t/support-scaling-for-widescreen-ultra-wide-monitors-on-desktop/38844

[cthawley]

Welcome to the forum! I moved your post to this existing feature request (which was declined pending future updates) to keep the conversation in one place.

[SAB3600]

Platform(s), such as mobile, website, API, other:
Website

URLs (aka web addresses) of any pages, if relevant:
https://www.inaturalist.org/observations?subview=map

Description of need:
Not a web dev guy but there appears to be a white bar that takes up about a third of the potential map view screen on iNat.

Feature request details:
Remove seemingly unnecessary white bar in map on map view.

[jwidness]

Welcome to the forum!
I moved your post to this existing request. Hopefully it will be implemented sooner rather than later, but I don’t personally have any idea what the timeline is.

[ken_ohio]

Is using the full screen button an option for you? See the button in the purple square (that I added in a screenshot) below.

I know you lose a lot of the functions around the map, but it does work for some purposes.

[kildor]

I’ve used chrome extension to add custom css to inat page and fix map and list views of observation page for me

map

@mixin out($color) {
	outline: solid 1px darken($color, 15%);
}

#obs-container,
#obs-container .container,
#map,
#observations-map {
	height: 700px;
}

#obs-container {
	.container {
		width: 100%;
	}

	span.quality_grade {
		font-size: 1px;
		width: 16px;
		overflow: hidden;
		text-indent: 100px;
		border-radius: 50%;
		margin: 0;

		&.needs_id {
			display: block !important;
			background: darken(#ffee91, 10%);
			@include out(darken(#ffee91, 10%));
		}

		&.casual {
			background-color: #ddd;
			@include out(#ddd);
		}

		&.research {
			@include out(#74ac00);
		}
	}
}

#map-legend-control {
	top: 650px;

	& + .col-xs-4.col-xs-offset-8 {
		margin-left: 75%;
		width: 24%;
	}
}

#results > .container > .row > .col-xs-8 {
	width: 100%;
}

#obs {
	height: 650px;
}

and

List

#result-table {
	width: 97%;

	thead {
		display: flex;
		justify-content: center;
	}
	tbody {
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
		gap: 5px;
		tr {
			display: flex;
			flex-direction: column;
			background: #f9f9f9;
			border: 1px solid #aaa;
			max-width: 330px;
			> td {
				width: 316px !important;
				padding: 8px;
			}
		}
	}
	.img {
		width: 300px !important;
		height: 300px !important;
		margin: auto;
	}

	td.user + td,
	td.place + td {
		div[title] {
			display: flex;
			justify-content: space-between;
		}

		.date {
			font-weight: bolder;
		}
	}
	td.taxon {
		span.quality_grade {
			&.needs_id {
				display: block !important;
			}
		}
	}
}

May be someone will find this also usefull.