diff --git a/apps/edr-freight-web/backoffice/src/components/page/PageHeader.tsx b/apps/edr-freight-web/backoffice/src/components/page/PageHeader.tsx index 86beb22fb..2194930ec 100644 --- a/apps/edr-freight-web/backoffice/src/components/page/PageHeader.tsx +++ b/apps/edr-freight-web/backoffice/src/components/page/PageHeader.tsx @@ -58,9 +58,15 @@ export function PageHeader({ {meta} {subtitle ? ( - - {subtitle} - + typeof subtitle === "string" ? ( + + {subtitle} + + ) : ( + // A component subtitle handles its own layout — truncating it + // to one line would defeat e.g. an expandable description. +
{subtitle}
+ ) ) : null} diff --git a/apps/edr-freight-web/backoffice/src/components/reports/ReportDescription.tsx b/apps/edr-freight-web/backoffice/src/components/reports/ReportDescription.tsx new file mode 100644 index 000000000..69707dac8 --- /dev/null +++ b/apps/edr-freight-web/backoffice/src/components/reports/ReportDescription.tsx @@ -0,0 +1,27 @@ +import { Spoiler, Text } from "@mantine/core"; + +interface ReportDescriptionProps { + text: string; +} + +/** + * Report descriptions run to a paragraph. Clamps to roughly two lines and adds + * a Show more toggle — Spoiler measures the content, so the toggle only appears + * when the text actually overflows. + */ +export function ReportDescription({ text }: ReportDescriptionProps) { + return ( + + + {text} + + + ); +} + +export default ReportDescription; diff --git a/apps/edr-freight-web/backoffice/src/components/reports/ReportSection.tsx b/apps/edr-freight-web/backoffice/src/components/reports/ReportSection.tsx index e686bc9d0..09da81439 100644 --- a/apps/edr-freight-web/backoffice/src/components/reports/ReportSection.tsx +++ b/apps/edr-freight-web/backoffice/src/components/reports/ReportSection.tsx @@ -1,8 +1,9 @@ -import { Stack, Text, Title } from "@mantine/core"; +import { Stack, Title } from "@mantine/core"; import { useQuery } from "@tanstack/react-query"; import { api } from "@/services/api"; +import { ReportDescription } from "./ReportDescription"; import { ReportView } from "./ReportView"; interface ReportSectionProps { @@ -29,9 +30,7 @@ export function ReportSection({ reportKey, idKeyValue, defaultView }: ReportSect
{def.title} - - {def.description} - +
diff --git a/apps/edr-freight-web/backoffice/src/components/reports/ReportView.tsx b/apps/edr-freight-web/backoffice/src/components/reports/ReportView.tsx index 2634e882c..2c78a9b6c 100644 --- a/apps/edr-freight-web/backoffice/src/components/reports/ReportView.tsx +++ b/apps/edr-freight-web/backoffice/src/components/reports/ReportView.tsx @@ -13,6 +13,7 @@ import type { ReportFilterDef, ReportRunParams } from "@/types/reports"; import { DataTable, DataTableFooter, usePagination, type ColumnDef } from "@edr/ui-common"; import { ReportChart } from "./ReportChart"; +import { ReportDescription } from "./ReportDescription"; import { ReportExportButton } from "./ReportExportButton"; import { formatKpiValue, formatReportCell } from "./report-format"; @@ -229,7 +230,7 @@ export function ReportView({ reportKey, idKeyValue, pageHeader, defaultView }: R {pageHeader ? ( } action={ {exportButton}