Move filerm inside container

src/General/css/style.css

@@ -707,11 +707,12 @@ input.field.tripped:not(:hover):not(:focus) {
 }
 #qr-no-file,
 .has-file #qr-filename {
-  display: block;
+  display: inline-block;
   padding: 0px 4px;
   margin-bottom: 2px;
   overflow: hidden;
   text-overflow: ellipsis;
+  max-width: 90%;
 }
 #qr-no-file {
   color: #AAA;
@@ -734,9 +735,10 @@ input.field.tripped:not(:hover):not(:focus) {
 }
 #qr-filerm {
   position: relative;
-  right: 14px;
-  bottom: 6px;
-  margin-right: -8px;
+  bottom: 1px;
+  display: inline;
+  float: right;
+  margin-right: 2px;
   z-index: 2;
 }
 #file-n-submit {

src/General/html/Features/QuickReply.html

@@ -27,8 +27,8 @@
     <span id=qr-filename-container class=field tabindex=60>
       <span id=qr-no-file>No selected file</span>
       <span id=qr-filename></span>
+      <a id=qr-filerm href=javascript:; title='Remove file' tabindex=80>×</a>
     </span>
-    <a id=qr-filerm href=javascript:; title='Remove file' tabindex=80>×</a>
     <input type=submit tabindex=70>
   </div>
   <input type=file multiple>

src/Posting/QuickReply.coffee

@@ -948,7 +948,9 @@ QR =
     $.on nodes.dumpButton, 'click',  -> nodes.el.classList.toggle 'dump'
     $.on nodes.addPost,    'click',  -> new QR.post true
     $.on nodes.form,       'submit', QR.submit
-    $.on nodes.fileRM,     'click',  -> QR.selected.rmFile()
+    $.on nodes.fileRM,     'click',  (e) -> 
+      e.stopPropagation()
+      QR.selected.rmFile()
     $.on nodes.spoiler,    'change', -> QR.selected.nodes.spoiler.click()
     $.on nodes.fileInput,  'change', QR.fileInput
     # save selected post's data