I like the dropdown arrow in the header row only when it isn’t taking away space from the column label. Many of my spreadsheets now have to be resized because of row header, but this requires extra space in columns that would otherwise not need the extra space. Here is a screenshot showing how the arrow is causing issues with the column labels:
Note that the presence of the orange triangle results in the width of nbui-fast-render-container remaining at 100%.
It’s hard to have both the benefit of the arrow in the cell as well as the ability to make concise spreadsheets (minimizing column widths for sheets with many columns).
One idea would be to make the table header row slightly taller to accommodate the drop-down arrow. In Chrome I modified the css to obtain the following:
Idea #1: Make the Table Header Row automatically taller and put the arrow underneath.
.nbui-hot-header-row-dropdown-icon {position:relative;background-color:#ccc5;margin-top:-20px;padding:0 6px;}
This looks pretty clean, but it takes up room and this particular css modification throws off the row spacing, but the point was to show what it could look like.
Idea #2: Have the arrows only appear when you mouse over or select the column. Return the label width to 100% and make the arrow have a semi-transparent background. Notice how the arrow appears both in the column I have selected AND the cell that the mouse is currently hovering over.
Below is the css modification that can create this effect. I have the “User CSS” extension for Chrome installed and now this works exactly the way I want within app.spreadsheet.com. 
.nbui-hot-table-renderer:hover .nbui-hot-header-row-dropdown-icon {display:block;}
.highlight .nbui-hot-header-row-dropdown-icon {display:block;}
.nbui-hot-header-row-dropdown-icon {display:none;background-color:#cccc}
.nbui-fast-render-container {width:100% !important}
.nbui-hot-header-row-dropdown-icon {border-radius:2px;}
Worksheet Column Headers:
You can use this same technique to display more text in the main worksheet header row using the following css modification:
.handsontable thead th .relative {padding-left:0;padding-right:0;font-size:1em;font-weight:bold;font-family:Arial Narrow,Arial;}
.handsontable thead th .relative .colHeader{width:100%;}
.handsontable .changeType {position:absolute;right:0;background-color:#dddc !important;height:80% !important;margin:1px 1px !important;padding:0 4px;font-size:0.9em;/visibility:visible;/}
In addition to allowing more of the column label text to be displayed, the button can be larger, requiring less mouse precision to click on the arrow.
Here’s a fix for the orange triangle used for cell messages:
.nbui-doggy-ear-triangle-messages {width:auto !important;}
