From 9b51672a1dfe0e3b34a583bbac883a4381c407e7 Mon Sep 17 00:00:00 2001
From: Lucas Vogel <contact@vogelino.com>
Date: Mon, 2 Sep 2024 19:26:27 -0400
Subject: [PATCH] refactor(TrendWithImpactChartWrapper): Restrain width to fit

---
 .../src/components/TopicChartTooltip.tsx      | 58 ++++++++++---------
 .../TrendWithImpactChartWrapper.tsx           |  2 +-
 2 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/frontend-nextjs/src/components/TopicChartTooltip.tsx b/frontend-nextjs/src/components/TopicChartTooltip.tsx
index 7142b95..50f7eb9 100644
--- a/frontend-nextjs/src/components/TopicChartTooltip.tsx
+++ b/frontend-nextjs/src/components/TopicChartTooltip.tsx
@@ -1,53 +1,53 @@
-import { cn } from "@/utility/classNames";
-import type { ComparableDateItemType } from "@/utility/comparableDateItemSchema";
-import { format } from "@/utility/dateUtil";
-import { texts, titleCase } from "@/utility/textUtil";
-import { getTopicIcon } from "@/utility/topicsUtil";
-import { memo } from "react";
+import { cn } from '@/utility/classNames'
+import type { ComparableDateItemType } from '@/utility/comparableDateItemSchema'
+import { format } from '@/utility/dateUtil'
+import { texts, titleCase } from '@/utility/textUtil'
+import { getTopicIcon } from '@/utility/topicsUtil'
+import { memo } from 'react'
 import {
 	type AggregationUnitType,
 	formatDateByAggregationUnit,
-} from "./EventsTimeline/useAggregationUnit";
-import { ImpactKeywordLabel } from "./ImpactChart/ImpactKeywordLabel";
+} from './EventsTimeline/useAggregationUnit'
+import { ImpactKeywordLabel } from './ImpactChart/ImpactKeywordLabel'
 
 function TopicChartTooltip({
 	aggregationUnit,
 	topics,
 	item,
 }: {
-	aggregationUnit: AggregationUnitType;
+	aggregationUnit: AggregationUnitType
 	topics: {
-		topic: string;
-		color: string;
-		sum: number;
-	}[];
+		topic: string
+		color: string
+		sum: number
+	}[]
 	item: Record<string, number> & {
-		comparableDateObject: ComparableDateItemType;
-	};
+		comparableDateObject: ComparableDateItemType
+	}
 }) {
-	const { date } = item.comparableDateObject;
+	const { date } = item.comparableDateObject
 	return (
 		<div
 			className={cn(
-				"bg-pattern-soft border border-grayMed p-4 flex flex-col gap-1",
-				"shadow-lg shadow-black/5 dark:shadow-black/50",
+				'bg-pattern-soft border border-grayMed p-4 flex flex-col gap-1',
+				'shadow-lg shadow-black/5 dark:shadow-black/50',
 			)}
 		>
 			<strong className="font-bold font-headlines text-base leading-tight pb-2 mb-2 border-b border-grayLight min-w-56">
-				{aggregationUnit !== "day" &&
+				{aggregationUnit !== 'day' &&
 					`${aggregationUnit.charAt(0).toUpperCase()}${aggregationUnit.slice(
 						1,
 					)} of `}
-				{aggregationUnit === "day" && format(date, "EEEE d MMMM yyyy")}
-				{aggregationUnit === "month" && format(date, "MMMM yyyy")}
-				{aggregationUnit !== "day" &&
-					aggregationUnit !== "month" &&
+				{aggregationUnit === 'day' && format(date, 'EEEE d MMMM yyyy')}
+				{aggregationUnit === 'month' && format(date, 'MMMM yyyy')}
+				{aggregationUnit !== 'day' &&
+					aggregationUnit !== 'month' &&
 					formatDateByAggregationUnit(date, aggregationUnit)}
 			</strong>
 			{topics
 				.map((t) => ({ ...t, value: item[t.topic] ?? 0 }))
 				.map(({ topic, value, color }) => {
-					const Icon = getTopicIcon(topic);
+					const Icon = getTopicIcon(topic)
 					return (
 						<div
 							key={topic}
@@ -67,16 +67,18 @@ function TopicChartTooltip({
 								{(+value)?.toLocaleString(texts.language) ?? 0}
 							</span>
 						</div>
-					);
+					)
 				})}
 			<div className="border-t border-grayLight pt-1 mt-1 flex gap-4 justify-between items-center">
 				<strong className="font-bold ">{texts.charts.common.total}:</strong>
 				<span className="font-mono text-xs text-grayDark">
-					{topics.reduce((acc, { topic }) => acc + (item[topic] || 0), 0)}
+					{topics
+						.reduce((acc, { topic }) => acc + (item[topic] || 0), 0)
+						.toLocaleString(texts.language)}
 				</span>
 			</div>
 		</div>
-	);
+	)
 }
 
-export default memo(TopicChartTooltip);
+export default memo(TopicChartTooltip)
diff --git a/frontend-nextjs/src/components/TrendWithImpactChartWrapper.tsx b/frontend-nextjs/src/components/TrendWithImpactChartWrapper.tsx
index f462b34..c380082 100644
--- a/frontend-nextjs/src/components/TrendWithImpactChartWrapper.tsx
+++ b/frontend-nextjs/src/components/TrendWithImpactChartWrapper.tsx
@@ -118,7 +118,7 @@ function TrendWithImpactChartWrapper({
 									{impactHeadline}
 								</h3>
 								<p className="text-sm text-grayDark">{impactDescription}</p>
-								<Alert className="mt-2 px-2 py-1 flex-row flex items-baseline gap-4 xl:w-[calc(100%-12rem)]">
+								<Alert className="mt-2 px-2 py-1 flex-row flex items-baseline gap-4 xl:w-fit xl:max-w-[calc(100%-12rem)]">
 									<AlertTitle className="inline-flex items-baseline gap-2 text-nowrap">
 										<AlertTriangle className="w-4 h-4 translate-y-0.5" />
 										{texts.charts.impact.disclaimer.title}