From 5b231e1efd739498708552d30cf0fd34d1fc9f53 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Thu, 30 Jan 2025 17:16:19 -0700
Subject: [PATCH] make dashboard header sizing more consistent

---
 .../_DashboardMetricItem/MetricTitle.tsx      | 22 +++++++++----------
 .../_DashboardMetricItem.tsx                  |  2 +-
 web/src/components/text/Title.tsx             |  1 +
 web/src/styles/busterAntDStyleConfig.tsx      |  5 ++++-
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/web/src/app/app/dashboards/[dashboardId]/_DashboardMetricItem/MetricTitle.tsx b/web/src/app/app/dashboards/[dashboardId]/_DashboardMetricItem/MetricTitle.tsx
index 72226bfbf..be74ff6b3 100644
--- a/web/src/app/app/dashboards/[dashboardId]/_DashboardMetricItem/MetricTitle.tsx
+++ b/web/src/app/app/dashboards/[dashboardId]/_DashboardMetricItem/MetricTitle.tsx
@@ -48,17 +48,21 @@ export const MetricTitle: React.FC<{
         <div
           {...attributes}
           {...listeners}
-          className={cx('group flex h-full cursor-pointer flex-col space-y-0.5 px-4 py-2')}>
+          className={cx('group flex cursor-pointer flex-col space-y-0.5 px-4')}>
           <div className="flex w-full justify-between space-x-0.5">
-            <Title {...titleConfig} level={4}>
-              {`${title}`}
+            <Title
+              {...titleConfig}
+              level={4}
+              className="max-w-[calc(100%_-_24px)] !text-md"
+              style={{ fontSize: '14px' }}>
+              {`${title} ${title} ${title} ${title} ${title} ${title} `}
             </Title>
 
             {isDragOverlay || !allowEdit ? (
-              <ThreeDotPlaceholder />
+              <></>
             ) : (
               <ThreeDotMenu
-                className="opacity-0 transition group-hover:opacity-100"
+                className="absolute right-[12px] top-[5px] opacity-0 transition group-hover:opacity-100"
                 dashboardId={dashboardId}
                 threadId={threadId}
               />
@@ -144,13 +148,9 @@ const ThreeDotMenu: React.FC<{
   });
 
   return (
-    <div onClick={onClick} className={`relative w-[24px] ${className}`}>
+    <div onClick={onClick} className={`w-[24px] ${className}`}>
       <Dropdown trigger={['click']} menu={dropdownMenu}>
-        <Button
-          className="absolute top-[-2px]"
-          type="text"
-          icon={<AppMaterialIcons icon="more_vert" />}
-        />
+        <Button className="" type="text" icon={<AppMaterialIcons icon="more_vert" />} />
       </Dropdown>
     </div>
   );
diff --git a/web/src/app/app/dashboards/[dashboardId]/_DashboardMetricItem/_DashboardMetricItem.tsx b/web/src/app/app/dashboards/[dashboardId]/_DashboardMetricItem/_DashboardMetricItem.tsx
index 2e18980fa..9ef65cf58 100644
--- a/web/src/app/app/dashboards/[dashboardId]/_DashboardMetricItem/_DashboardMetricItem.tsx
+++ b/web/src/app/app/dashboards/[dashboardId]/_DashboardMetricItem/_DashboardMetricItem.tsx
@@ -58,7 +58,7 @@ const _DashboardMetricItem: React.FC<{
   const cardClassNamesMemoized = useMemo(() => {
     return {
       body: `h-full w-full overflow-hidden !p-0 relative`,
-      header: cx(`!p-0 !min-h-[65px]`, styles.cardTitle)
+      header: cx(`!p-0 !min-h-[52px]`, styles.cardTitle)
     };
   }, []);
 
diff --git a/web/src/components/text/Title.tsx b/web/src/components/text/Title.tsx
index 45c370605..c50d42818 100644
--- a/web/src/components/text/Title.tsx
+++ b/web/src/components/text/Title.tsx
@@ -27,6 +27,7 @@ export const Title = React.memo<
       }}
       {...props}
       className={cx(
+        'leading-none',
         type === 'default' && styles.default,
         type === 'secondary' && styles.secondary,
         type === 'tertiary' && styles.tertiary,
diff --git a/web/src/styles/busterAntDStyleConfig.tsx b/web/src/styles/busterAntDStyleConfig.tsx
index 18be77a2c..3168fbd24 100644
--- a/web/src/styles/busterAntDStyleConfig.tsx
+++ b/web/src/styles/busterAntDStyleConfig.tsx
@@ -249,7 +249,10 @@ export const busterAppStyleConfig: ThemeConfig = {
       colorBgContainer: '#FFF',
       colorBorderSecondary: '#E0E0E0',
       lineWidth: 0.5,
-      fontWeightStrong: 400
+      fontWeightStrong: 400,
+      borderRadiusLG: 6,
+      borderRadiusSM: 6,
+      borderRadiusXS: 6
     },
     Slider: {
       trackBg: '#E0E0E0'