diff --git a/webapp/javascript/components/FileList.module.scss b/webapp/javascript/components/FileList.module.scss index c8404bbb8c..4133a799a9 100644 --- a/webapp/javascript/components/FileList.module.scss +++ b/webapp/javascript/components/FileList.module.scss @@ -40,13 +40,25 @@ $tdHeight: 25px; } &:last-child { - width: 400px; - min-width: 400px; - max-width: 400px; - text-align: right; + width: 250px; + min-width: 250px; + max-width: 250px; padding: 0px 10px; } } + + .profileName { + display: flex; + align-items: center; + + span { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + width: calc(100% - 30px); + margin-right: 10px; + } + } } } diff --git a/webapp/javascript/components/FileList.tsx b/webapp/javascript/components/FileList.tsx index a3f3ede889..e2ce84b59e 100644 --- a/webapp/javascript/components/FileList.tsx +++ b/webapp/javascript/components/FileList.tsx @@ -1,4 +1,5 @@ import React, { useMemo } from 'react'; +import { format, parseISO } from 'date-fns'; import { Maybe } from '@webapp/util/fp'; import { AllProfiles } from '@webapp/models/adhoc'; @@ -29,17 +30,23 @@ const getBodyRows = ( (profId) => profId === profile.id ); + const date = parseISO(profile.updatedAt); + const timeString = `${format(date, 'MMM d, yyyy')} at ${format( + date, + 'h:mm a' + )}`; + acc.push({ cells: [ { value: ( - <> - {profile.name} +
+ {profile.name} {isRowSelected && } - +
), }, - { value: profile.updatedAt }, + { value: timeString }, ], onClick: () => { // Optimize to not reload the same one diff --git a/webapp/javascript/ui/Table.module.scss b/webapp/javascript/ui/Table.module.scss index 3f36340a32..b46cf47fe3 100644 --- a/webapp/javascript/ui/Table.module.scss +++ b/webapp/javascript/ui/Table.module.scss @@ -1,5 +1,6 @@ .table { width: 100%; + table-layout: fixed; thead th { &.sortable {