input-pill: Refactor pills to eliminate fixed positioning of elements.

[synicalsyntax]

Removes fixed positioning from pills so that their alignment and positioning won't break at different zoom sizes.

[timabbott]

It looks like the "X" got considerably smaller?

Otherwise lgtm, though I think it might be worth adding to this PR the change that @armaanahluwalia suggested of increasing the whitespace between two pills by a few pixels (not sure how many is best).

[armaanahluwalia]

Awesome work here with the CSS cleanup. Basically i think the second pill should be positioned where the blinking cursor is once the first pill is in place.

[synicalsyntax]

[armaanahluwalia]

@synicalsyntax We're talking about number 2 in the picture ( Essentially adding a few pixels to the right margin of each pill. My guess is you could gauge how much space to add by making a second pill begin where the cursor blinks to the right of the first pill ).

Tim is also saying he feels the 'x' icon somehow is smaller than the current version. Maybe you could confirm.

[synicalsyntax]

Is this better?

[armaanahluwalia]

@synicalsyntax How come one x looks bigger than the other?

[synicalsyntax]

@armaanahluwalia I was comparing the original size with the new icon size. Here's the current one on this PR:

This is the size on chat.zulip.org:

[armaanahluwalia]

Looks good to me. Maybe 1px or 2px more on the margin-right of the pill thats all.

[synicalsyntax]

Personally, I think we have too much margin now; pills aren't supposed to be cramped, but they're supposed to be compact in their pill containers as well.

[armaanahluwalia]

You're right. IMO the container in night mode is not necessary in this case. We could just add background transparent to it so it disappears just like its not visible in normal mode.

[synicalsyntax]

Going to wait for feedback from @timabbott before I make any more changes. Current status:

[timabbott]

I'm happy with the between-pills spacing there. It looks like we lost a bit of padding around the name in the pills which makes them feel a bit cramped; can you add a bit there to better match what's currently on chat.zulip.org?

[synicalsyntax]

Is this better?

[timabbott]

The aria-label here is invalid -- the string should be quoted. But I also don't think we really need the aria-label here; this isn't a widget you would want to interact with as a blind user (instead, you just hit backspace to get rid of it, I think?).

[timabbott]

I removed the broken aria-label and merged this, thanks @synicalsyntax! Definitely looks nicer.