update dashboard controller to use scroller

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: <div className="bg-gray-100">Header Content</div>,
+    header: <div className="">Header Content</div>,
     children: <div className="">Content with custom background</div>
   }
 };
 
 export const LongContent: Story = {
   args: {
-    header: <div className="bg-gray-100">Header Content</div>,
+    header: <div className="">Header Content</div>,
     scrollable: true,
     headerBorderVariant: 'ghost',
     children: (
-      <>
+      <div className="border border-red-500 bg-red-100 p-1">
         {Array.from({ length: 100 }, (_, i) => (
           <p key={i} className="mb-4">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
             incididunt ut labore et dolore magna aliqua.
           </p>
         ))}
-      </>
+      </div>
     )
   }
 };

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 (
-    <Selector className={cn('bg-page-background app-content h-full max-h-[100%] p-0', className)}>
+    <Selector
+      className={cn('bg-page-background app-content h-full max-h-full overflow-hidden', className)}>
       <ChildSelector>{children}</ChildSelector>
     </Selector>
   );

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<typeof useUpdateDashboard>['mutateAsync'];
@@ -18,14 +24,14 @@ export const DashboardEditTitles: React.FC<{
   });
 
   const { run: onChangeDashboardDescription } = useDebounceFn(
-    useMemoizedFn((value: React.ChangeEvent<HTMLInputElement>) => {
+    useMemoizedFn((value: React.ChangeEvent<HTMLTextAreaElement>) => {
       if (!readOnly) onUpdateDashboard({ description: value.target.value, id: dashboardId });
     }),
     { wait: 650 }
   );
 
   return (
-    <div className="flex flex-col space-y-0">
+    <div className="flex flex-col space-y-1.5">
       <EditableTitle
         className="w-full truncate"
         readOnly={readOnly}
@@ -37,12 +43,13 @@ export const DashboardEditTitles: React.FC<{
       </EditableTitle>
 
       {(description || !readOnly) && (
-        <Input
+        <InputTextArea
           variant="ghost"
-          className={'pl-0!'}
+          className={'py-0! pl-0!'}
           readOnly={readOnly}
           onChange={onChangeDashboardDescription}
           defaultValue={description}
+          autoResize={descriptionAutoResize}
           placeholder="Add description..."
         />
       )}

web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardViewDashboardController.tsx

@@ -25,22 +25,24 @@ export const DashboardViewDashboardController: React.FC<DashboardViewProps> = ({
   const dashboard = dashboardResponse?.dashboard;
 
   return (
-    <ScrollArea className="flex h-full flex-col space-y-3 p-10">
+    <ScrollArea className="h-full">
-      <DashboardEditTitles
+      <div className="flex h-full flex-col space-y-3 p-10">
-        onUpdateDashboard={onUpdateDashboard}
+        <DashboardEditTitles
-        dashboardId={dashboardId}
+          onUpdateDashboard={onUpdateDashboard}
-        readOnly={readOnly}
+          dashboardId={dashboardId}
-        title={dashboardResponse?.dashboard?.name || ''}
+          readOnly={readOnly}
-        description={dashboardResponse?.dashboard?.description || ''}
+          title={dashboardResponse?.dashboard?.name || ''}
-      />
+          description={dashboardResponse?.dashboard?.description || ''}
+        />
 
-      <DashboardContentController
+        <DashboardContentController
-        metrics={metrics}
+          metrics={metrics}
-        dashboard={dashboard}
+          dashboard={dashboard}
-        onUpdateDashboardConfig={onUpdateDashboardConfig}
+          onUpdateDashboardConfig={onUpdateDashboardConfig}
-        onOpenAddContentModal={onOpenAddContentModal}
+          onOpenAddContentModal={onOpenAddContentModal}
-        readOnly={readOnly}
+          readOnly={readOnly}
-      />
+        />
+      </div>
     </ScrollArea>
   );
 };