Use CSS media queries to define file name display.

Improve responsive table layout.

Author: blueimp

css/jquery.fileupload-ui.css

@@ -31,6 +31,15 @@
 .files video {
   max-width: 300px;
 }
+.files .name {
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+.files button {
+  margin-bottom: 5px;
+}
 .toggle[type='checkbox'] {
   transform: scale(2);
   margin-left: 10px;
@@ -46,16 +55,14 @@
   .files .btn span {
     display: none;
   }
-  .files .name {
-    width: 80px;
-    word-wrap: break-word;
-  }
   .files audio,
   .files video {
     max-width: 80px;
   }
-  .files img,
-  .files canvas {
-    max-width: 100%;
+}
+
+@media (max-width: 480px) {
+  .files .image td:nth-child(2) {
+    display: none;
   }
 }

index.html

@@ -213,14 +213,12 @@ <h3 class="title"></h3>
     <!-- The template to display files available for upload -->
     <script id="template-upload" type="text/x-tmpl">
       {% for (var i=0, file; file=o.files[i]; i++) { %}
-          <tr class="template-upload fade">
+          <tr class="template-upload fade{%=o.options.loadImageFileTypes.test(file.type)?' image':''%}">
               <td>
                   <span class="preview"></span>
               </td>
               <td>
-                  {% if (window.innerWidth > 480 || !o.options.loadImageFileTypes.test(file.type)) { %}
-                      <p class="name">{%=file.name%}</p>
-                  {% } %}
+                  <p class="name">{%=file.name%}</p>
                   <strong class="error text-danger"></strong>
               </td>
               <td>
@@ -253,7 +251,7 @@ <h3 class="title"></h3>
     <!-- The template to display files available for download -->
     <script id="template-download" type="text/x-tmpl">
       {% for (var i=0, file; file=o.files[i]; i++) { %}
-          <tr class="template-download fade">
+          <tr class="template-download fade{%=file.thumbnailUrl?' image':''%}">
               <td>
                   <span class="preview">
                       {% if (file.thumbnailUrl) { %}
@@ -262,15 +260,13 @@ <h3 class="title"></h3>
                   </span>
               </td>
               <td>
-                  {% if (window.innerWidth > 480 || !file.thumbnailUrl) { %}
-                      <p class="name">
-                          {% if (file.url) { %}
-                              <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
-                          {% } else { %}
-                              <span>{%=file.name%}</span>
-                          {% } %}
-                      </p>
-                  {% } %}
+                  <p class="name">
+                      {% if (file.url) { %}
+                          <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
+                      {% } else { %}
+                          <span>{%=file.name%}</span>
+                      {% } %}
+                  </p>
                   {% if (file.error) { %}
                       <div><span class="label label-danger">Error</span> {%=file.error%}</div>
                   {% } %}