Prevent upload list from overflowing and add standalone copy text button

assets/sass/app.scss

@@ -1,2 +1,2 @@
 @import "layout";
-@import "fm";
+@import "fm";

assets/sass/layout.scss

@@ -928,6 +928,23 @@ td.actions {
 	width: 100%;
 }
 
+.table-col-grow-cell {
+	display: flex;
+	flex-direction: row;
+
+	> * {
+		width: 0;
+		flex-grow: 1;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	* {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+}
+
 .pagination {
 	ul {
 		display: flex;

assets/ts/copyable_text.ts

@@ -12,4 +12,12 @@ document.addEventListener('DOMContentLoaded', () => {
             });
         }
     });
+
+    document.querySelectorAll<HTMLElement>('.copy-button[data-content]').forEach(el => {
+        el.addEventListener('click', () => {
+            navigator.clipboard.writeText(`${el.dataset.content}`)
+                .then(() => console.log('copy success'))
+                .catch(console.error);
+        });
+    });
 });

views/file-uploader.njk

@@ -61,8 +61,7 @@
                 <thead>
                 <tr>
                     <th>#</th>
-                    <th class="table-col-grow">URL</th>
-                    <th>Name</th>
+                    <th class="table-col-grow">Name</th>
                     <th>Size</th>
                     <th>Expires at</th>
                     <th>Actions</th>
@@ -73,19 +72,15 @@
                 {% for file in files %}
                     <tr>
                         <td>{{ file.id }}</td>
-                        <td>
-                            <div class="copyable-text">
-                                <a class="content" href="{{ file.getURL() }}" target="_blank">{{ file.getURL() }}</a>
-                                <button class="copy-button"><i data-feather="copy"></i></button>
-                            </div>
-                        </td>
-                        <td><pre>{{ file.real_name }}</pre></td>
+                        <td class="table-col-grow-cell"><a href="{{ file.getURL() }}"><pre>{{ file.real_name }}</pre></a></td>
                         <td>{{ (file.size / (1024 * 1024)).toFixed(2) }}MB</td>
                         <td>{% if file.expires_at %}{{ file.expires_at.toISOString() }}{% else %}Never{% endif %}</td>
                         <td class="actions">
                             {% if file.shouldBeDeleted() %}
                                 Pending deletion
                             {% else %}
+                                <button class="copy-button" data-content="{{ file.getURL() }}"><i data-feather="copy"></i> <span class="tip">Copy URL</span></button>
+
                                 <form action="{{ route('delete-file-frontend', file.slug) }}" method="post">
                                     {{ macros.csrf(getCsrfToken) }}
                                     <button class="button danger"><i data-feather="trash"></i> <span class="tip">Delete</span></button>
@@ -95,7 +90,7 @@
                     </tr>
                 {% else %}
                     <tr>
-                        <td colspan="6" class="center">You haven't uploaded any file yet.</td>
+                        <td colspan="5" class="center">You haven't uploaded any file yet.</td>
                     </tr>
                 {% endfor %}
                 </tbody>