Since this is unlikely to be fixed anytime soon and the revamping will most likely take ages, I’ve gone ahead and installed the Stylus extension on my browser and created a code sheet that loads based on this rule:
Pages starting with: https://www.inaturalist.org/observations
In that code sheet I added all the following CSS that I’ve already mentioned above:
#map {
height: calc(100vh - 57px - 109px - 75px - 100px);
}
#obs {
height: calc(100vh - 57px - 109px - 75px - 100px - 116px);
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
#obs .media-left {
border-bottom: 1px solid #fff;
}
#results .container {
width: 100%;
}
#results .container .grid {
justify-content: center;
}
@media(min-width:1200px) {
#obs .taxon .display-name {
max-width: 180px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
@media(min-width:1500px) {
.col-xs-4.col-xs-offset-8:has(#obs) {
margin-left: 75%;
width: 25%;
}
#obs .taxon .display-name {
max-width: 200px;
}
}
@media(min-width:2000px) {
.col-xs-4.col-xs-offset-8:has(#obs) {
margin-left: 80%;
width: 20%;
}
#obs .taxon .display-name {
max-width: 240px;
}
}
Now both the map and the observation cards themselves fill the entire available screen space as shown in the screenshots I posted above.
Format date & time in observation cards
When hovering the elapsed date in the bottom right corner of an observation card (e.g. “13d“) a tooltip is shown with the exact date. This is indeed very useful, however that date is unformatted and as such quite difficult to read (e.g. 2026-01-06T11:12:00+01:00)
It would be much more legible and user friendly to have that date formatted, just like it is shown when opening the observation page:
What’s more, adding the CSS property cursor: help; to the element (and to the location icon as well) would improve the usability even further.
It got buried in this thread (post 389) but I want to plug a fantastic website created @wy_bio here called iNat Explorer which covers most of the requests here, and maybe even some you hadn’t asked for yet!
I created a quick example of how it will help me, searching California for 2 species of oak (dark and light blue) and their hybrid (green) so that I could identify areas where there are likely hybrids, but which haven’t yet been identified or are under-counted:
You can also get much more granular, and make selections from a seemingly endless set of filters, allowing me to determine which wild oaks I had not already reviewed in CA that had ID disagreements and were also tagged with the observation field “possible hybrid” and to then sort by number of “faves” so that I could review any compelling oak hybrid observations that get buried in the growing pile of indeterminate genus/section level.
The UI takes a little getting used to at first, but the learning curve is pretty quick, and once you get used to it, there’s so much functionality in terms of filters and combinations you can apply.
I can’t really overstate how useful I’ve found the site, so if you’re looking for a function, check it out (click on ‘Filters’ to get started), and don’t forget to leave feedback on the forum post where the developer has asked and responded to feedback over time.
3 Likes
