Merge pull request #137 from axonivy/detail-scroll

make detail scrollable
axonivy · Jan 17, 2025 · 0493c08 · 0493c08
2 parents 40f6537 + 28328b4
commit 0493c08
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/packages/dataclass-editor/src/detail/Detail.css b/packages/dataclass-editor/src/detail/Detail.css
@@ -0,0 +1,3 @@
+.detail-content {
+  overflow: auto;
+}
diff --git a/packages/dataclass-editor/src/detail/Detail.tsx b/packages/dataclass-editor/src/detail/Detail.tsx
@@ -8,6 +8,7 @@ import { useValidation } from '../context/useValidation';
 import { messagesByProperty } from '../data/validation-utils';
 import { useHotkeyTexts } from '../utils/hotkeys';
 import { DataClassDetailContent } from './dataclass/DataClassDetailContent';
+import './Detail.css';
 import { FieldDetailContent } from './field/FieldDetailContent';
 
 type DetailProps = {
@@ -38,13 +39,15 @@ export const Detail = ({ title, helpUrl }: DetailProps) => {
       <SidebarHeader icon={IvyIcons.PenEdit} title={title} className='detail-header'>
         <Button icon={IvyIcons.Help} onClick={() => openUrl(helpUrl)} title={helpText} aria-label={helpText} />
       </SidebarHeader>
-      {!field ? (
-        <DataClassDetailContent />
-      ) : (
-        <FieldProvider value={{ field, setField, messages: messagesByProperty(validations) }}>
-          <FieldDetailContent key={selectedField} />
-        </FieldProvider>
-      )}
+      <Flex direction='column' className='detail-content'>
+        {!field ? (
+          <DataClassDetailContent />
+        ) : (
+          <FieldProvider value={{ field, setField, messages: messagesByProperty(validations) }}>
+            <FieldDetailContent key={selectedField} />
+          </FieldProvider>
+        )}
+      </Flex>
     </Flex>
   );
 };