typing overlap slightly better, but text box width shrinks at a noticeab...

Right now there is a green border around the filename and extension elements, it seems to lessen the overlap that occurs when you type additional characters into the filename. However, when you delete characters from the text box, the width of the box does not shrink quickly enough. 
You should not included these CSS changes.