make marker popups work better

[samanpwbb]

• Added overflow-auto and max height to popups
• Fixed overly broad and aggressive rule intended for tiles that was interfering with image styles in popups
• Made base type styles smaller

From:

To:

[tmcw]

Hm, looks good but enforcing a max-height in CSS may be problematic: Leaflet writes its styles from JS-land and users with custom maxHeight values will see changed behavior. /cc @mourner

[samanpwbb]

I fixed this on mapbox.com side as a short term solution: https://github.com/mapbox/mapbox.github.com/commit/0444bf3076031a3d7633c628d61094719c0169ca

[mourner]

@samanpwbb why not just use maxHeight option of Leaflet?

[samanpwbb]

I'd like this sort of thing to be handled by CSS.

I'm guessing Leaflet's maxHeight sets an inline attribute on the element? In that case, maxHeight will override the CSS rule, so I don't think having this in the distributed CSS file is a problem.

[mourner]

The reason why I had to put important here is that some stupid CSS frameworks like Bootstrap use !important too, which will break Leaflet maps unless overriden with !important from Leaflet side. E.g. https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L222
So I'd suggest not touching these.

[samanpwbb]

That is the silliest rule I've ever seen. As much as I'd like to step out of this CSS specificity arms race, I don't see how your override could hurt as long as it applies only to tiles.

[mourner]

Right. I should be more specific in Leaflet as well.

[mourner]

One reason it was not entirely handled in CSS is that I wanted to add a special class when popup reaches max height so that I could style the scrolled container, e.g. add borders like Leaflet does now.

[samanpwbb]

Okay, reverted to importants. Now that the rule applies to img.leaflet-tile rather than img this shouldn't interfere with too much.

[samanpwbb]

Removed the max height rule with bc3b5fe so this should now be good to go. Sounds like it's best to leave max height management to the front end.

[samanpwbb]

@tmcw / @mourner I think this should be fine now but I await approval.

[mourner]

shouldn't this be more specific?

[mourner]

Otherwise looks good.

[tmcw]

Y, we should not style all .leaflet-container img with a margin-bottom.

[samanpwbb]

Cool, I made the style more specific. I am ok totally cutting it as well if you guys still feel weird about it. I think it's ok to be a little opinionated with styles within the marker-description though - this is in 95% of the cases just going to make markers look better for people. The other 5% are people who are already messing with popup appearance and then it's a one css line override.

[mourner]

Yeah, looks good now.