diff --git a/src/apps/reports/src/pages/reports/ReportsPage.module.scss b/src/apps/reports/src/pages/reports/ReportsPage.module.scss index e177b1b44..e282cf8d2 100644 --- a/src/apps/reports/src/pages/reports/ReportsPage.module.scss +++ b/src/apps/reports/src/pages/reports/ReportsPage.module.scss @@ -56,7 +56,7 @@ .paramCard { display: grid; - grid-template-rows: auto 40px auto; + grid-template-rows: auto auto; row-gap: 8px; align-content: start; } diff --git a/src/apps/reports/src/pages/reports/ReportsPage.tsx b/src/apps/reports/src/pages/reports/ReportsPage.tsx index b27b76195..861372464 100644 --- a/src/apps/reports/src/pages/reports/ReportsPage.tsx +++ b/src/apps/reports/src/pages/reports/ReportsPage.tsx @@ -265,6 +265,15 @@ const formatParameterLabel = (name: string): string => ( .replace(/^./, char => char.toUpperCase()) ) +const buildParameterTooltipContent = (parameter: ReportParameter): JSX.Element => ( + <> +
{parameter.description?.trim() || 'No description available.'}
+
+ {`Location: ${parameter.location || 'query'} (${parameter.name})`} +
+ +) + const EMPTY_BILLING_ACCOUNT_PROFILE_RESPONSE: BillingAccountProfileResponse = { billingAccount: undefined, } @@ -369,14 +378,7 @@ const SelectedReportSection = (props: SelectedReportSectionProps): JSX.Element =
{parameter.type}
- {parameter.description || 'No description available'} -
- {`Location: ${parameter.location || 'query'} - (${parameter.name})`} - - )} + content={buildParameterTooltipContent(parameter)} place='top' >