diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/WarningIcon.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/WarningIcon.tsx
index b7c1ea5eb..f74478a4d 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/WarningIcon.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/WarningIcon.tsx
@@ -22,7 +22,7 @@ export const WarningIcon: React.FC<{
         side="left"
         align="center"
         size="none"
-        content={<div className="max-w-[200px]">{warningText}</div>}>
+        content={<div className="max-w-[170px] p-2">{warningText}</div>}>
         <div
           className={cn(
             'text-text-tertiary hover:text-text-secondary flex h-full cursor-pointer items-center'