From 1e743061b5ad9ebf662cfdd7720ddcf36385f5cb Mon Sep 17 00:00:00 2001
From: Karol Wypchlo <kwypchlo@gmail.com>
Date: Wed, 29 Sep 2021 14:10:38 +0200
Subject: [PATCH] fix layout issues

---
 packages/dashboard/src/components/Table.js |  2 +-
 packages/dashboard/src/pages/downloads.js  | 21 +++++++++++++++++++--
 packages/dashboard/src/pages/uploads.js    | 21 +++++++++++++++++++--
 3 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/packages/dashboard/src/components/Table.js b/packages/dashboard/src/components/Table.js
index cd2b9c18..1c01b1fa 100644
--- a/packages/dashboard/src/components/Table.js
+++ b/packages/dashboard/src/components/Table.js
@@ -74,7 +74,7 @@ export default function Table({ items, count, headers, mutate, actions, offset,
                 {items && items.length ? (
                   items.map((row, index) => (
                     <tr className={index % 2 ? "bg-gray-100" : "bg-white"} key={index}>
-                      {headers.map(({ key, formatter, href, nowrap = true }) => (
+                      {headers.map(({ key, formatter, href, nowrap }) => (
                         <td
                           key={key}
                           className={`${nowrap ? "whitespace-nowrap" : ""} px-6 py-4 text-sm font-medium text-gray-900`}
diff --git a/packages/dashboard/src/pages/downloads.js b/packages/dashboard/src/pages/downloads.js
index 942efd11..d18257f7 100644
--- a/packages/dashboard/src/pages/downloads.js
+++ b/packages/dashboard/src/pages/downloads.js
@@ -12,8 +12,25 @@ const apiPrefix = process.env.NODE_ENV === "development" ? "/api/stubs" : "";
 const getSkylinkLink = ({ skylink }) => skynetClient.getSkylinkUrl(skylink);
 const getRelativeDate = ({ downloadedOn }) => dayjs(downloadedOn).format("YYYY-MM-DD HH:mm:ss");
 const headers = [
-  { key: "name", name: "Name", nowrap: false, href: getSkylinkLink },
-  { key: "skylink", name: "Skylink" },
+  {
+    key: "name",
+    name: "File",
+    formatter: ({ name, skylink }) => (
+      <>
+        <p>
+          <a
+            href={getSkylinkLink({ skylink })}
+            className="text-green-600 hover:text-green-900 break-all"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {name}
+          </a>
+        </p>
+        <p className="text-gray-500 text-xs">{skylink}</p>
+      </>
+    ),
+  },
   { key: "size", name: "Size", formatter: ({ size }) => prettyBytes(size) },
   { key: "downloadedOn", name: "Accessed on", formatter: getRelativeDate },
 ];
diff --git a/packages/dashboard/src/pages/uploads.js b/packages/dashboard/src/pages/uploads.js
index 201d947d..ff452f49 100644
--- a/packages/dashboard/src/pages/uploads.js
+++ b/packages/dashboard/src/pages/uploads.js
@@ -14,8 +14,25 @@ const apiPrefix = process.env.NODE_ENV === "development" ? "/api/stubs" : "";
 const getSkylinkLink = ({ skylink }) => skynetClient.getSkylinkUrl(skylink);
 const getRelativeDate = ({ uploadedOn }) => dayjs(uploadedOn).format("YYYY-MM-DD HH:mm:ss");
 const headers = [
-  { key: "name", name: "Name", nowrap: false, href: getSkylinkLink },
-  { key: "skylink", name: "Skylink" },
+  {
+    key: "name",
+    name: "File",
+    formatter: ({ name, skylink }) => (
+      <>
+        <p>
+          <a
+            href={getSkylinkLink({ skylink })}
+            className="text-green-600 hover:text-green-900 break-all"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {name}
+          </a>
+        </p>
+        <p className="text-gray-500 text-xs">{skylink}</p>
+      </>
+    ),
+  },
   { key: "size", name: "Size", formatter: ({ size }) => prettyBytes(size) },
   { key: "uploadedOn", name: "Uploaded on", formatter: getRelativeDate },
 ];