From 33fb74e083c14542f46326230869e589feefd152 Mon Sep 17 00:00:00 2001
From: Oisin Coveney <oisin@metabase.com>
Date: Tue, 1 Oct 2024 14:27:09 +0300
Subject: [PATCH] Attempt a fix at font size scaling
---
.../src/metabase/css/dashboard.module.css | 9 ++++
.../components/ScalarValue/ScalarValue.jsx | 48 ++++---------------
2 files changed, 18 insertions(+), 39 deletions(-)
diff --git a/frontend/src/metabase/css/dashboard.module.css b/frontend/src/metabase/css/dashboard.module.css
index 7393201f951..bef57aa4cc4 100644
--- a/frontend/src/metabase/css/dashboard.module.css
+++ b/frontend/src/metabase/css/dashboard.module.css
@@ -218,3 +218,12 @@
pointer-events: all;
user-select: auto;
}
+
+.ScalarValueContainer {
+ container-type: size;
+ container-name: scalar-value;
+}
+
+.ScalarValueElement {
+ font-size: calc(0.5rem + 10cqmin);
+}
diff --git a/frontend/src/metabase/visualizations/components/ScalarValue/ScalarValue.jsx b/frontend/src/metabase/visualizations/components/ScalarValue/ScalarValue.jsx
index 7654c655028..c3ed18d4151 100644
--- a/frontend/src/metabase/visualizations/components/ScalarValue/ScalarValue.jsx
+++ b/frontend/src/metabase/visualizations/components/ScalarValue/ScalarValue.jsx
@@ -3,7 +3,6 @@
*/
/* eslint-disable react/prop-types */
import cx from "classnames";
-import { useMemo } from "react";
import { t } from "ttag";
import { Ellipsified } from "metabase/core/components/Ellipsified";
@@ -23,54 +22,25 @@ import {
ScalarTitleContent,
ScalarValueWrapper,
} from "./ScalarValue.styled";
-import { findSize, getMaxFontSize } from "./utils";
export const ScalarWrapper = ({ children }) => (
- <ScalarRoot>{children}</ScalarRoot>
+ <ScalarRoot className={DashboardS.ScalarValueContainer}>
+ {children}
+ </ScalarRoot>
);
-const ScalarValue = ({
- value,
- height,
- width,
- gridSize,
- totalNumGridCols,
- fontFamily,
-}) => {
+const ScalarValue = ({ value }) => {
const {
other: { number: numberTheme },
} = useMantineTheme();
- const fontSize = useMemo(() => {
- if (numberTheme?.value?.fontSize) {
- return numberTheme.value?.fontSize;
- }
-
- return findSize({
- text: value,
- targetHeight: height,
- targetWidth: width,
- fontFamily: fontFamily ?? "Lato",
- fontWeight: 700,
- unit: "rem",
- step: 0.2,
- min: 1,
- max: gridSize ? getMaxFontSize(gridSize.width, totalNumGridCols) : 4,
- });
- }, [
- fontFamily,
- gridSize,
- height,
- totalNumGridCols,
- value,
- width,
- numberTheme?.value?.fontSize,
- ]);
-
return (
<ScalarValueWrapper
- className={cx(DashboardS.ScalarValue, QueryBuilderS.ScalarValue)}
- fontSize={fontSize}
+ className={cx(
+ DashboardS.ScalarValue,
+ DashboardS.ScalarValueElement,
+ QueryBuilderS.ScalarValue,
+ )}
lineHeight={numberTheme?.value?.lineHeight}
data-testid="scalar-value"
>
--
GitLab