From 8f3a30c5a51820d3d198701acb71614cd51fb472 Mon Sep 17 00:00:00 2001
From: Nick Fitzpatrick <nick@metabase.com>
Date: Tue, 29 Oct 2024 17:02:40 -0300
Subject: [PATCH] fix broken css rule, remove description from field table
(#49286)
* fix broken css rule, remove description from field table
* adding back description
---
.../metabase/components/List/List.module.css | 3 ++-
.../metabase/components/ListItem/ListItem.jsx | 2 +-
.../metabase/reference/components/Field.jsx | 24 ++++++++++---------
3 files changed, 16 insertions(+), 13 deletions(-)
diff --git a/frontend/src/metabase/components/List/List.module.css b/frontend/src/metabase/components/List/List.module.css
index 619482bd386..b0b6f8c4881 100644
--- a/frontend/src/metabase/components/List/List.module.css
+++ b/frontend/src/metabase/components/List/List.module.css
@@ -53,7 +53,8 @@
}
.itemBody {
- display: flex 1 1 auto;
+ display: flex;
+ flex: 1 1 auto;
overflow: hidden;
}
diff --git a/frontend/src/metabase/components/ListItem/ListItem.jsx b/frontend/src/metabase/components/ListItem/ListItem.jsx
index b9e7f11d8b0..cec998bddad 100644
--- a/frontend/src/metabase/components/ListItem/ListItem.jsx
+++ b/frontend/src/metabase/components/ListItem/ListItem.jsx
@@ -30,7 +30,7 @@ const ListItem = ({
<div className={S.itemIcons}>
{icon && <Icon className={S.chartIcon} name={icon} size={16} />}
</div>
- <div className={S.itemBody}>
+ <div className={cx(S.itemBody, CS.flexColumn)}>
<div className={S.itemTitle}>
<Ellipsified tooltip={name}>{name}</Ellipsified>
</div>
diff --git a/frontend/src/metabase/reference/components/Field.jsx b/frontend/src/metabase/reference/components/Field.jsx
index 6cac63848d8..289a20a6410 100644
--- a/frontend/src/metabase/reference/components/Field.jsx
+++ b/frontend/src/metabase/reference/components/Field.jsx
@@ -16,9 +16,12 @@ import { isTypeFK } from "metabase-lib/v1/types/utils/isa";
import F from "./Field.module.css";
const Field = ({ field, foreignKeys, url, icon, isEditing, formField }) => (
- <div className={cx(S.item, CS.pt1, CS.borderTop)}>
- <div className={S.itemBody} style={{ maxWidth: "100%", borderTop: "none" }}>
- <div className={F.field}>
+ <div className={cx(S.item, CS.py1, CS.borderTop)}>
+ <div
+ className={cx(S.itemBody, CS.flexColumn)}
+ style={{ maxWidth: "100%", borderTop: "none" }}
+ >
+ <div className={F.field} style={{ flexGrow: "1" }}>
<div className={cx(S.itemTitle, F.fieldName)}>
{isEditing ? (
<input
@@ -59,7 +62,7 @@ const Field = ({ field, foreignKeys, url, icon, isEditing, formField }) => (
optionSectionFn={o => o.section}
/>
) : (
- <div className={CS.flex}>
+ <div className={cx(CS.flex, CS.alignCenter)}>
<div className={S.leftIcons}>
{icon && <Icon className={S.chartIcon} name={icon} size={20} />}
</div>
@@ -83,7 +86,7 @@ const Field = ({ field, foreignKeys, url, icon, isEditing, formField }) => (
</div>
<div className={F.fieldDataType}>{field.base_type}</div>
</div>
- <div className={cx(S.itemSubtitle, F.fieldSecondary, { [CS.mt1]: true })}>
+ <div className={cx(S.itemSubtitle, { [CS.mt1]: true })}>
<div className={F.fieldForeignKey}>
{isEditing
? (isTypeFK(formField.semantic_type.value) ||
@@ -107,13 +110,12 @@ const Field = ({ field, foreignKeys, url, icon, isEditing, formField }) => (
</span>
)}
</div>
- <div className={F.fieldOther} />
+ {field.description && (
+ <div className={cx(S.itemSubtitle, CS.mb2, { [CS.mt1]: isEditing })}>
+ {field.description}
+ </div>
+ )}
</div>
- {field.description && (
- <div className={cx(S.itemSubtitle, CS.mb2, { [CS.mt1]: isEditing })}>
- {field.description}
- </div>
- )}
</div>
</div>
);
--
GitLab