style(range): fix spurious shadows in mobile Safari

[anandaroop]

https://artsyproduct.atlassian.net/browse/ONYX-282

In a recent QA session for alerts functionality, Onyx noticed a visual glitch in the Range component that seems to affect only mobile Safari (😣)

Before

Web (left) is fine but mWeb (right) shows an extraneous shadow with a hard, clipped edge.

After

Removing the first-of-type modifier and allowing both thumb sliders to get the FLAT_SHADOW style makes them consistent

---

After this change, I was concerned that the Shadow component placed to coincide with the max slider might need adjusting, but honestly we seem better off without it?

With Shadow

Looks way too heavy, and there is still some clipping apparent.

Without Shadow

There is still some clipping happening, but it is essentially unnoticeable unless you are zoomed af. (I.e. try to spot it in the After screenshot above)

[anandaroop]

I'm going to use BrowserStack to validate this change in various browsers, using the already-deployed temp Storybook at https://5cc358d0ea3369002031a052-mrpqctjfde.chromatic.com/?path=/story/components-range--default

But meanwhile lmk if you have any concerns @dzucconi

[anandaroop]

Also there is apparently a visual diff that needs approving at https://www.chromatic.com/build?appId=5cc358d0ea3369002031a052&number=2767

Maybe a leftover from https://github.com/artsy/palette/pull/1309?

[dzucconi]

lgtm!

[anandaroop]

Cool, seems fine in a smattering of BrowserStack combos as well —

iOS safari	iOS Chrome	Android Chrome	Android Edge

[anandaroop]

I'll approve that diff too

[artsyit]

:rocket: PR was released in @artsy/palette-charts@34.2.0, @artsy/palette@35.2.0 :rocket: