Widen Object Detail Modal (#22143)

* wider object detail modal

* modal styling updates

frontend/src/metabase/visualizations/components/ObjectDetail/ObjectDetail.styled.tsx

@@ -8,10 +8,11 @@ interface ObjectDetailModalProps {
 
 export const ObjectDetailModal = styled.div<ObjectDetailModalProps>`
   border: 1px solid ${colors.border};
-  border-radius: 8px;
+  border-radius: 0.5rem;
   overflow: hidden;
   ${breakpointMinMedium} {
-    width: ${({ wide }) => (wide ? "880px" : "568px")};
+    width: ${({ wide }) => (wide ? "64rem" : "48rem")};
+    max-width: 95vw;
   }
   max-height: 95vh;
   width: 95vw;
@@ -60,3 +61,18 @@ export const CloseButton = styled.div`
 export const ErrorWrapper = styled.div`
   height: 480px;
 `;
+
+type GridContainerProps = { cols?: number };
+
+export const GridContainer = styled.div<GridContainerProps>`
+  display: grid;
+  grid-template-columns: repeat(${props => props.cols || 2}, minmax(0, 1fr));
+  gap: 1rem;
+`;
+
+type GridItemProps = { colSpan?: number };
+
+export const GridCell = styled.div<GridItemProps>`
+  grid-column: span ${props => props.colSpan || 1} / span
+    ${props => props.colSpan || 1};
+`;

frontend/src/metabase/visualizations/components/ObjectDetail/ObjectDetail.tsx

@@ -283,9 +283,9 @@ export function ObjectDetailHeader({
   return (
     <div className="Grid border-bottom relative">
       <div className="Grid-cell">
-        <h1 className="p3">
+        <h2 className="p3">
           {objectName} {objectId}
-        </h1>
+        </h2>
       </div>
       <div className="flex align-center">
         <div className="flex p2">

frontend/src/metabase/visualizations/components/ObjectDetail/ObjectDetailsTable.tsx

@@ -10,13 +10,18 @@ import { TYPE, isa } from "metabase/lib/types";
 import { formatValue, formatColumn } from "metabase/lib/formatting";
 
 import { OnVisualizationClickType } from "./types";
-import { ObjectDetailsTable } from "./ObjectDetail.styled";
+import {
+  ObjectDetailsTable,
+  GridContainer,
+  GridCell,
+} from "./ObjectDetail.styled";
 
 export interface DetailsTableCellProps {
   column: any;
   value: any;
   isColumnName: boolean;
   settings: any;
+  className?: string;
   onVisualizationClick: OnVisualizationClickType;
   visualizationIsClickable: (clicked: unknown) => boolean;
 }
@@ -26,6 +31,7 @@ export function DetailsTableCell({
   value,
   isColumnName,
   settings,
+  className = "",
   onVisualizationClick,
   visualizationIsClickable,
 }: DetailsTableCellProps): JSX.Element {
@@ -71,10 +77,13 @@ export function DetailsTableCell({
   return (
     <div>
       <span
-        className={cx({
-          "cursor-pointer": isClickable,
-          link: isClickable && isLink,
-        })}
+        className={cx(
+          {
+            "cursor-pointer": isClickable,
+            link: isClickable && isLink,
+          },
+          className,
+        )}
         onClick={
           isClickable
             ? e => {
@@ -109,33 +118,34 @@ export function DetailsTable({
 
   return (
     <ObjectDetailsTable>
-      {cols.map((column, columnIndex) => (
-        <div className="Grid Grid--1of2 mb2" key={columnIndex}>
-          <div className="Grid-cell">
-            <DetailsTableCell
-              column={column}
-              value={row[columnIndex]}
-              isColumnName
-              settings={settings}
-              onVisualizationClick={onVisualizationClick}
-              visualizationIsClickable={visualizationIsClickable}
-            />
-          </div>
-          <div
-            style={{ wordWrap: "break-word" }}
-            className="Grid-cell text-bold text-dark"
-          >
-            <DetailsTableCell
-              column={column}
-              value={row[columnIndex]}
-              isColumnName={false}
-              settings={settings}
-              onVisualizationClick={onVisualizationClick}
-              visualizationIsClickable={visualizationIsClickable}
-            />
-          </div>
-        </div>
-      ))}
+      <GridContainer cols={3}>
+        {cols.map((column, columnIndex) => (
+          <React.Fragment key={columnIndex}>
+            <GridCell>
+              <DetailsTableCell
+                column={column}
+                value={row[columnIndex]}
+                isColumnName
+                settings={settings}
+                className="text-bold text-medium"
+                onVisualizationClick={onVisualizationClick}
+                visualizationIsClickable={visualizationIsClickable}
+              />
+            </GridCell>
+            <GridCell colSpan={2}>
+              <DetailsTableCell
+                column={column}
+                value={row[columnIndex]}
+                isColumnName={false}
+                settings={settings}
+                className="text-bold text-dark text-spaced text-wrap"
+                onVisualizationClick={onVisualizationClick}
+                visualizationIsClickable={visualizationIsClickable}
+              />
+            </GridCell>
+          </React.Fragment>
+        ))}
+      </GridContainer>
     </ObjectDetailsTable>
   );
 }

frontend/test/metabase/scenarios/visualizations/object_detail.cy.spec.js

@@ -152,8 +152,7 @@ function drillFK({ id }) {
 }
 
 function assertDetailView({ id, entityName, byFK = false }) {
-  cy.get("h1")
-    .parent()
+  cy.get("h2")
     .should("contain", entityName)
     .should("contain", id);