From 9cbc501866c2a6185954696ef5c2f16093a595d2 Mon Sep 17 00:00:00 2001
From: Chris Collins <chriscollins3456@gmail.com>
Date: Thu, 14 Mar 2024 15:24:56 -0400
Subject: [PATCH] fix(ui) Add min width to the usage stats component

---
 .../components/SchemaFieldDrawer/FieldUsageStats.tsx       | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldUsageStats.tsx b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldUsageStats.tsx
index 2f7288904b2df9..355c3c25fefea2 100644
--- a/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldUsageStats.tsx
+++ b/datahub-web-react/src/app/entity/shared/tabs/Dataset/Schema/components/SchemaFieldDrawer/FieldUsageStats.tsx
@@ -49,7 +49,12 @@ export default function FieldUsageStats({ expandedField }: Props) {
             <SectionHeader>Usage</SectionHeader>
             <UsageBarWrapper>
                 <UsageBarBackground>
-                    <UsageBar width={((relevantUsageStats.count || 0) / maxFieldUsageCount) * USAGE_BAR_MAX_WIDTH} />
+                    <UsageBar
+                        width={Math.max(
+                            ((relevantUsageStats.count || 0) / maxFieldUsageCount) * USAGE_BAR_MAX_WIDTH,
+                            4,
+                        )}
+                    />
                 </UsageBarBackground>
                 <UsageTextWrapper>{relevantUsageStats.count || 0} queries / month</UsageTextWrapper>
             </UsageBarWrapper>