Fix long titles in collections push out the last-edited-by and last-edited-at columns (#16992)

* Handle long collection item titles

* Fix EntityItemMenu's margin-left

* Remove `span` attribute from cols

* Fix "name" column is too close to "type"

* Fix "last edit" columns width

* Hide "last-edit" column at medium breakpoint

frontend/src/metabase/collections/components/BaseItemsTable.jsx

@@ -5,6 +5,7 @@ import { t } from "ttag";
 import BaseTableItem from "./BaseTableItem";
 import {
   ColumnHeader,
+  Table,
   SortingIcon,
   SortingControlContainer,
 } from "./BaseItemsTable.styled";
@@ -112,13 +113,13 @@ function BaseItemsTable({
     });
 
   return (
-    <table className="ContentTable" {...props}>
+    <Table {...props}>
       <colgroup>
-        <col span="1" style={{ width: "5%" }} />
-        <col span="1" style={{ width: "64%" }} />
-        <col span="1" style={{ width: "15%" }} />
-        <col span="1" style={{ width: "14%" }} />
-        <col span="1" style={{ width: "2%" }} />
+        <col style={{ width: "70px" }} />
+        <col />
+        <col style={{ width: "140px" }} />
+        <col style={{ width: "140px" }} />
+        <col style={{ width: "60px" }} />
       </colgroup>
       {!headless && (
         <thead
@@ -161,7 +162,7 @@ function BaseItemsTable({
         </thead>
       )}
       <tbody>{items.map(itemRenderer)}</tbody>
-    </table>
+    </Table>
   );
 }
 

frontend/src/metabase/collections/components/BaseItemsTable.styled.jsx

 import styled from "styled-components";
 
 import { color } from "metabase/lib/colors";
+import { breakpointMaxMedium } from "metabase/styled-components/theme/media-queries";
 
 import EntityItem from "metabase/components/EntityItem";
 import Icon from "metabase/components/Icon";
 import Link from "metabase/components/Link";
 
+const LAST_EDITED_BY_INDEX = 3;
+const LAST_EDITED_AT_INDEX = 4;
+
+export const Table = styled.table.attrs({ className: "ContentTable" })`
+  table-layout: fixed;
+
+  ${breakpointMaxMedium} {
+    & td:nth-child(${LAST_EDITED_BY_INDEX}),
+    th:nth-child(${LAST_EDITED_BY_INDEX}),
+    col:nth-child(${LAST_EDITED_BY_INDEX}),
+    td:nth-child(${LAST_EDITED_AT_INDEX}),
+    th:nth-child(${LAST_EDITED_AT_INDEX}),
+    col:nth-child(${LAST_EDITED_AT_INDEX}) {
+      display: none;
+    }
+  }
+`;
+
 export const ColumnHeader = styled.th`
   font-weight: bold;
   color: ${color("text-light")};

frontend/src/metabase/components/EntityItem.jsx

@@ -65,6 +65,7 @@ function EntityItemMenu({
   onMove,
   onCopy,
   onArchive,
+  className,
   analyticsContext,
 }) {
   const actions = useMemo(
@@ -105,7 +106,7 @@ function EntityItemMenu({
   }
   return (
     <EntityMenu
-      className="ml1 hover-child"
+      className={cx(className, "hover-child")}
       triggerIcon="ellipsis"
       items={actions}
     />
@@ -182,6 +183,7 @@ const EntityItem = ({
           onMove={onMove}
           onCopy={onCopy}
           onArchive={onArchive}
+          className="ml1"
           analyticsContext={analyticsContext}
         />
       </Flex>