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;
+  right: 0;
-  top: 2px;
+  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>
-        <a id=dump-button title='Dump list'>+</a>
-      </span>
-    </span>
         <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>
     <input type=submit tabindex=80>
   </div>
   <input type=file multiple>

src/Posting/QuickReply.coffee

@@ -893,6 +893,7 @@ QR =
       fileRM:     $ '#qr-filerm',           dialog
       fileExtras: $ '#qr-extras-container', dialog
       spoiler:    $ '#qr-file-spoiler',     dialog
+      spoilerPar: $ '#qr-spoiler-label',    dialog
       status:     $ '[type=submit]',        dialog
       fileInput:  $ '[type=file]',          dialog
 
@@ -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