--- a/website/issues/html/issue.item.html	Sun Aug 22 23:00:06 2021 -0400
+++ b/website/issues/html/issue.item.html	Sat Aug 28 13:15:04 2021 -0400
@@ -162,7 +162,7 @@
    <input type="file" id="file-1@content" name="file-1@content" size="40">
  </td>
   <th><label for="file-1@description" i18n:translate="">File Description</label>:</th>
- <td colspan=3><input type="edit" id="file-1@description" name="file-1@description" size="40"></td>
+ <td colspan=3><input type="edit" class="fileDesc" id="file-1@description" name="file-1@description" size="40"></td>
 </tr>
 <tr tal:condition="context/is_edit_ok">
   <td colspan=4>
@@ -222,22 +222,55 @@
                 let fileInput = document.getElementById('file-1@content');
 		let fileDesc = document.getElementById('file-1@description');
 
+		function make_clear_fileInput_closure(input) {
+		  return function(ev) { input.value = "";
+		  ev.preventDefault();}
+		  }
+
+
+                function make_new_clear_button() {
+		  newClearInput=document.createElement('button');
+		  newClearInput.textContent = "X";
+		  newClearInput.setAttribute("aria-label",
+		    "Clear next file input.");
+		  newClearInput.setAttribute("title",
+		    "Clear next file input.");
+		  newClearInput.classList.add("clearButton");
+		  return newClearInput;
+		}
+
+                function make_new_file_input() {
+                  newInput=document.createElement('input');
+                  newInput.type="file";
+                  newInput.id="file-" + NextInputNum +"@content";
+                  newInput.name=newInput.id;
+                  return newInput;
+		}
+
                 function add_file_input () {
-
                  // Only allow one change listener on newest input.
                  fileInput.removeEventListener('change',
                           add_file_input,
                           false);
+		  newClearInput = fileInput.insertAdjacentElement(
+		                                   'beforebegin',
+		                                   make_new_clear_button());
+
+		  // add change handler to file clear button
+                  newClearInput.addEventListener('click',
+			make_clear_fileInput_closure(fileInput),
+			false);
+
+		  /* Insert break so next input is on new line */
+		  br = fileInput.insertAdjacentElement('afterend',
+					document.createElement('br'));
 
                   /* create new file input to get next dragged file */
                   /* <input type="file" name="file-2@content"> for 2,
                      3, 4, ... */
-                  newInput=document.createElement('input');
-                  newInput.type="file";
-                  newInput.id="file-" + NextInputNum +"@content";
-                  newInput.name=newInput.id;
-                  fileInput = fileInput.insertAdjacentElement('afterend',
-                                                               newInput);
+                  fileInput = br.insertAdjacentElement('afterend',
+                                                    make_new_file_input());
+
                   // add change hander to newest file input
                   fileInput.addEventListener('change',
                         add_file_input, // create new input for more files
@@ -259,15 +292,20 @@
                   addLink.value="file-" + NextInputNum
                   fileInput.insertAdjacentElement('afterend', addLink);
 
-                  addLink=document.createElement('input');
-                  addLink.type="edit";
-                  addLink.id="file-" + NextInputNum + "@description";
-                  addLink.name=addLink.id
-                  addLink.size = 40
-                  fileDesc=fileDesc.insertAdjacentElement('afterend', addLink);
+		  /* break line before description field to prevent
+		   wrapping multiple descriptions onto one line when
+		   zoomed out or large display.*/
+		  br = fileDesc.insertAdjacentElement('afterend',
+				       document.createElement('br'));
+                  fileDesc=document.createElement('input');
+                  fileDesc.type="edit";
+                  fileDesc.id="file-" + NextInputNum + "@description";
+                  fileDesc.name=fileDesc.id
+                  fileDesc.size = 40
+		  fileDesc.classList.add("fileDesc");
+                  fileDesc=br.insertAdjacentElement('afterend', fileDesc);
 
                   NextInputNum = NextInputNum+1;
-
                 }
 
                 function MarkDropZone(e, active) {
@@ -365,7 +403,7 @@
                 }, false);
               </script>
               <style tal:attributes="nonce request/client/client_nonce">
-                #FileArea input[type=file] ~ input[type=file] {display:block;}
+                #FileArea button.clearButton ~ input[type=file] {display:inline-block;}
                 #DropZone {     /* don't display dropzone by default.
                                    Displayed as block by javascript. */
                              display:none;
@@ -378,6 +416,7 @@
                                 /* lighter color */
                              background: rgba(255,255,255,0.4);
                           }
+		button.clearButton, input.fileDesc {margin-block-end: 0.5em}
               </style>
 
 <p tal:condition="context/id" i18n:translate="">