fix: make adhoc table fit width (#1591)

* fix: make adhoc table fit width
grafana · Oct 9, 2022 · da74fe8 · da74fe8
1 parent 774d8fa
commit da74fe8
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
diff --git 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
@@ -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}
+            <div className={styles.profileName}>
+              <span title={profile.name}>{profile.name}</span>
               {isRowSelected && <CheckIcon className={styles.checkIcon} />}
-            </>
+            </div>
           ),
         },
-        { 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
@@ -1,5 +1,6 @@
 .table {
   width: 100%;
+  table-layout: fixed;
 
   thead th {
     &.sortable {