More rice than you can shake a stick at.

You're gonna need a new rice cooker.

src/General/UI.coffee

@@ -339,7 +339,7 @@ UI = do ->
     else
       top
 
-    [left, right] = if clientX <= @clientWidth - 400
+    [left, right] = if close or clientX <= @clientWidth - 400
       [clientX + (if @close then 15 else 45) + 'px', null]
     else
       [null, @clientWidth - clientX + 45 + 'px']

src/General/css/layout.css

@@ -1264,11 +1264,6 @@ if _conf['Post Form Style'] isnt 'float' and _conf["Post Form Slideout Transitio
   max-width: 100%;
   min-width: 100%;
 }
-#dump-button {
-  width: 10%;
-  margin: 0;
-}
-
 #{
 if _conf['Compact Post Form Inputs'] then "
 .persona input.field {
@@ -1355,16 +1350,23 @@ input:not([type=radio]) {
   display: none;
 }
 #qr-no-file,
-.has-file #qr-filerm,
 .has-file #qr-filename {
   display: block;
 }
+.has-file #qr-filerm {
+  display: inline-block;
+}
 #qr-extras-container {
   position: absolute;
-  right: 3px;
-  top: 2px;
+  right: 0;
+  top: 0;
   z-index: 2;
 }
+#qr-extras-container > label,
+#qr-extras-container > a {
+  cursor: pointer;
+  margin-right: 3px;
+}
 #qr-filename-container {
   #{Style.sizing}: border-box;
   display: inline-block;
@@ -1376,18 +1378,12 @@ input:not([type=radio]) {
   overflow: hidden;
   padding: 2px 1px 0;
 }
-/* Thread Select / Spoiler Label */
+/* Thread Select */
 #qr-thread-select {
   vertical-align: bottom;
   width: 49%;
   display: inline-block;
 }
-#qr-spoiler-label {
-  vertical-align: bottom;
-  width: 49%;
-  display: inline-block;
-  text-align: right;
-}
 /* Dumping UI */
 .dump #dump-list-container {
   display: block;

src/General/css/theme.css

@@ -115,7 +115,7 @@ span[style="left: 5px; position: absolute;"] a {
 #qr-filename-container,
 #appchanx-settings input,
 .captcha-img,
-.dump #dump:not(:hover):not(:focus),
+.dump #dump,
 .qr-preview,
 .selectrice,
 button,
@@ -123,11 +123,12 @@ input,
 textarea {
   background: #{theme["Input Background"]};
   border: 1px solid #{theme["Input Border"]};
-  color: #{theme["Inputs"]};
+}
+.has-file #qr-extras-container {
+  background: #{theme["Input Background"]};
 }
 #dump:hover,
 #qr-filename-container:hover,
-#qr-filename-container:hover,
 .selectrice:hover,
 #selectrice li:hover,
 #selectrice li:nth-of-type(2n+1):hover,
@@ -135,7 +136,9 @@ input:hover,
 textarea:hover {
   background: #{theme["Hovered Input Background"]};
   border-color: #{theme["Hovered Input Border"]};
-  color: #{theme["Inputs"]};
+}
+.has-file  #qr-filename-container:hover #qr-extras-container {
+  background: #{theme["Hovered Input Background"]};
 }
 #dump:active,
 #dump:focus,
@@ -151,6 +154,10 @@ textarea.field:focus {
   color: #{theme["Inputs"]};
   outline: none;
 }
+.has-file  #qr-filename-container:active #qr-extras-container,
+.has-file  #qr-filename-container:focus #qr-extras-container {
+  background: #{theme["Focused Input Background"]};
+}
 #mouseover,
 #post-preview,
 #qp .post,

src/General/html/Features/QuickReply.html

@@ -21,13 +21,16 @@
       <span id=qr-no-file>No selected file</span>
       <span id=qr-filename></span>
       <span id=qr-extras-container>
-        <a id=qr-filerm href=javascript:; title='Remove file'>×</a>
+        <label id=qr-spoiler-label>
+          <input type=checkbox id=qr-file-spoiler title='Spoiler image' tabindex=70>
+        </label>
+        <span class=description>Spoiler</span>
         <a id=dump-button title='Dump list'>+</a>
+        <span class=description>Dump</span>
+        <a id=qr-filerm href=javascript:; title='Remove file'>×</a>
+        <span class=description>Remove File</span>
       </span>
     </span>
-    <label id=qr-spoiler-label>
-      <input type=checkbox id=qr-file-spoiler title='Spoiler image' tabindex=70>
-    </label>
     <input type=submit tabindex=80>
   </div>
   <input type=file multiple>

src/Posting/QuickReply.coffee

@@ -874,27 +874,28 @@ QR =
 
     QR.nodes = nodes =
       el:         dialog
-      move:       $ '.move',             dialog
-      autohide:   $ '#autohide',         dialog
-      thread:     $ 'select',            dialog
-      threadPar:  $ '#qr-thread-select', dialog
-      close:      $ '.close',            dialog
-      form:       $ 'form',              dialog
-      dumpButton: $ '#dump-button',      dialog
-      name:       $ '[data-name=name]',  dialog
-      email:      $ '[data-name=email]', dialog
-      sub:        $ '[data-name=sub]',   dialog
-      com:        $ '[data-name=com]',   dialog
-      dumpList:   $ '#dump-list',        dialog
-      addPost:    $ '#add-post',         dialog
-      charCount:  $ '#char-count',       dialog
-      fileSubmit: $ '#file-n-submit',    dialog
-      filename:   $ '#qr-filename',      dialog
-      fileRM:     $ '#qr-filerm',        dialog
+      move:       $ '.move',                dialog
+      autohide:   $ '#autohide',            dialog
+      thread:     $ 'select',               dialog
+      threadPar:  $ '#qr-thread-select',    dialog
+      close:      $ '.close',               dialog
+      form:       $ 'form',                 dialog
+      dumpButton: $ '#dump-button',         dialog
+      name:       $ '[data-name=name]',     dialog
+      email:      $ '[data-name=email]',    dialog
+      sub:        $ '[data-name=sub]',      dialog
+      com:        $ '[data-name=com]',      dialog
+      dumpList:   $ '#dump-list',           dialog
+      addPost:    $ '#add-post',            dialog
+      charCount:  $ '#char-count',          dialog
+      fileSubmit: $ '#file-n-submit',       dialog
+      filename:   $ '#qr-filename',         dialog
+      fileRM:     $ '#qr-filerm',           dialog
       fileExtras: $ '#qr-extras-container', dialog
-      spoiler:    $ '#qr-file-spoiler',  dialog
-      status:     $ '[type=submit]',     dialog
-      fileInput:  $ '[type=file]',       dialog
+      spoiler:    $ '#qr-file-spoiler',     dialog
+      spoilerPar: $ '#qr-spoiler-label',    dialog
+      status:     $ '[type=submit]',        dialog
+      fileInput:  $ '[type=file]',          dialog
 
     # Allow only this board's supported files.
     mimeTypes = $('ul.rules > li').textContent.trim().match(/: (.+)/)[1].toLowerCase().replace /\w+/g, (type) ->
@@ -961,6 +962,9 @@ QR =
     $.on nodes.fileExtras, 'click', (e) -> e.stopPropagation()
     $.on nodes.spoiler,    'change', -> QR.selected.nodes.spoiler.click()
     $.on nodes.fileInput,  'change', QR.fileInput
+    # mouseover descriptions
+    for name in ['spoilerPar', 'dumpButton', 'fileRM']
+      $.on nodes[name], 'mouseover', QR.mouseover
     # save selected post's data
     for name in ['name', 'email', 'sub', 'com']
       $.on nodes[name], 'input',  -> QR.selected.save @
@@ -1226,3 +1230,22 @@ QR =
       QR.posts[0].unlock()
       QR.notifications.push new Notification 'info', 'QR upload aborted.', 5
     QR.status()
+
+  mouseover: (e) ->
+    mouseover = $.el 'div',
+      id:        'mouseover'
+      className: 'dialog'
+
+    $.add Header.hover, mouseover
+
+    mouseover.innerHTML = @nextElementSibling.innerHTML
+
+    UI.hover
+      root:         @
+      el:           mouseover
+      latestEvent:  e
+      endEvents:    'mouseout'
+      asapTest: ->  true
+      close:        true
+
+    return