diff --git a/web/src/components/ui/layouts/AppPageLayout.stories.tsx b/web/src/components/ui/layouts/AppPageLayout.stories.tsx index 3fb756206..3f363dcbc 100644 --- a/web/src/components/ui/layouts/AppPageLayout.stories.tsx +++ b/web/src/components/ui/layouts/AppPageLayout.stories.tsx @@ -45,25 +45,25 @@ export const NonScrollable: Story = { export const WithCustomClassName: Story = { args: { className: 'bg-gray-50', - header:
Header Content
, + header:
Header Content
, children:
Content with custom background
} }; export const LongContent: Story = { args: { - header:
Header Content
, + header:
Header Content
, scrollable: true, headerBorderVariant: 'ghost', children: ( - <> +
{Array.from({ length: 100 }, (_, i) => (

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

))} - +
) } }; diff --git a/web/src/components/ui/layouts/AppPageLayoutContent.tsx b/web/src/components/ui/layouts/AppPageLayoutContent.tsx index 9e9ca7cca..5002a2ba4 100644 --- a/web/src/components/ui/layouts/AppPageLayoutContent.tsx +++ b/web/src/components/ui/layouts/AppPageLayoutContent.tsx @@ -11,10 +11,9 @@ export const AppPageLayoutContent: React.FC< const Selector = scrollable ? ScrollArea : 'main'; const ChildSelector = scrollable ? 'main' : React.Fragment; - console.log('scrollable', scrollable); - return ( - + {children} ); diff --git a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardEditTitle.tsx b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardEditTitle.tsx index c5f29f16d..59f79cb61 100644 --- a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardEditTitle.tsx +++ b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardEditTitle.tsx @@ -3,9 +3,15 @@ import { EditableTitle } from '@/components/ui/typography/EditableTitle'; import { Input } from '@/components/ui/inputs'; import React from 'react'; import { type useUpdateDashboard } from '@/api/buster_rest/dashboards'; +import { InputTextArea } from '@/components/ui/inputs/InputTextArea'; export const DASHBOARD_TITLE_INPUT_ID = 'dashboard-title-input'; +const descriptionAutoResize = { + minRows: 1, + maxRows: 25 +}; + export const DashboardEditTitles: React.FC<{ title: string; onUpdateDashboard: ReturnType['mutateAsync']; @@ -18,14 +24,14 @@ export const DashboardEditTitles: React.FC<{ }); const { run: onChangeDashboardDescription } = useDebounceFn( - useMemoizedFn((value: React.ChangeEvent) => { + useMemoizedFn((value: React.ChangeEvent) => { if (!readOnly) onUpdateDashboard({ description: value.target.value, id: dashboardId }); }), { wait: 650 } ); return ( -
+
{(description || !readOnly) && ( - )} diff --git a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardViewDashboardController.tsx b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardViewDashboardController.tsx index 17fb897f0..f617c4b5c 100644 --- a/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardViewDashboardController.tsx +++ b/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardViewDashboardController.tsx @@ -25,22 +25,24 @@ export const DashboardViewDashboardController: React.FC = ({ const dashboard = dashboardResponse?.dashboard; return ( - - + +
+ - + +
); };