honestbleeps/Reddit-Enhancement-Suite — pull request #1277 by githue (2014-06-18 08:49:14+00:00)
Title: Fixes for the shortcuts bar

## What's wrong currently?

The CSS for the buttons that sort, scroll, delete and add shortcuts needs improvement. For example their height doesn't scale with the bar.

![sr-header-area-fixes-align-02](https://cloud.githubusercontent.com/assets/7245595/3310776/e224ec98-f6ba-11e3-8726-c78d3ebd898b.png) ![sr-header-area-fixes-align-01](https://cloud.githubusercontent.com/assets/7245595/3310789/0e4bdff2-f6bb-11e3-8945-a84b98cc481c.png)

A lot, and I mean _a lot_ of subreddits have disabled the background colors on the buttons, which makes them almost useless when users have lots of shortcuts. I believe this is partly explained by the former example.

![sr-header-area-fixes-bg-01](https://cloud.githubusercontent.com/assets/7245595/3310876/50f9edf2-f6bc-11e3-97c6-c165124b28c6.png) ![sr-header-area-fixes-bg-02](https://cloud.githubusercontent.com/assets/7245595/3310945/22bdec58-f6bd-11e3-937c-84da2365c2a2.png)

([/r/pristine](http://www.reddit.com/r/pristine) and [/r/formula1](http://www.reddit.com/r/formula1))

The position of the dropdown menu is hardcoded to be 16 pixels from the top of the parent link, which doesn't help much if the font size, line height or height changes. Furthermore there's a significant gap between the parent link and the dropdown menu which can cause the menu to unexpectedly disappear if the user isn't fast enough. I've gotten used to this over time, but new users shouldn't have to.

![sr-header-area-fixes-drop-03](https://cloud.githubusercontent.com/assets/7245595/3311388/dd9582c4-f6c3-11e3-9336-b6e5d921d02b.png) ![sr-header-area-fixes-drop-01](https://cloud.githubusercontent.com/assets/7245595/3311162/8d65ab6a-f6c0-11e3-876a-124b1f755548.png)

(This shows the hover area of the link in purple, if your cursor is anywhere between that and the dropdown then it will begin the countdown to hide it.)

## Solution

First, make the buttons fit the bar precisely, every time.

![sr-header-area-fixes-align-03](https://cloud.githubusercontent.com/assets/7245595/3310848/d4efece8-f6bb-11e3-8eb5-90b7d46f9380.png) ![sr-header-area-fixes-align-04](https://cloud.githubusercontent.com/assets/7245595/3310849/d6c9699a-f6bb-11e3-88fc-7a013a1a3c76.png)

(Themers still have the ability to adjust the vertical alignment)

Second, force a background on the container so that it can't be made transparent by themers, they still have the option to change the background, but they can't remove it completely. This is written in a way so as to blend in on subreddits that have already removed the background color. I discovered that they would make the BG transparent if they were making the links bar a dark color, so I set the fall-back to a dark gray.

![sr-header-area-fixes-bg-03](https://cloud.githubusercontent.com/assets/7245595/3310938/1a399834-f6bd-11e3-8b59-bbbbddb6b9e5.png)

([/r/pristine](http://www.reddit.com/r/pristine))

Third, calculate the exact height and position of the shortcuts so the dropdown appears precisely where it should, every time, no matter the font-size, line-height or height. Additionally set the links to `inline-block` to expand to their 'true' height.

![sr-header-area-fixes-drop-02](https://cloud.githubusercontent.com/assets/7245595/3311182/e49de7f8-f6c0-11e3-8d47-c7c1a407f2b0.png)

(The purple background is only for demonstration.)