fix: scroll when extending parent container

equinor · Jan 19, 2024 · 014ed92 · 014ed92
1 parent de90a8d
commit 014ed92
Show file tree

Hide file tree

Showing 16 changed files with 353 additions and 272 deletions.
diff --git a/example/app/data/DemoDataSource/recipes/plugins/grid/example/dashboard.recipe.json b/example/app/data/DemoDataSource/recipes/plugins/grid/example/dashboard.recipe.json
@@ -68,7 +68,7 @@
             "type": "PLUGINS:dm-core-plugins/grid/GridArea",
             "rowStart": 4,
             "columnStart": 1,
-            "rowEnd": 5,
+            "rowEnd": 4,
             "columnEnd": 3
           }
         },
@@ -83,7 +83,7 @@
             "type": "PLUGINS:dm-core-plugins/grid/GridArea",
             "rowStart": 4,
             "columnStart": 4,
-            "rowEnd": 5,
+            "rowEnd": 4,
             "columnEnd": 6
           }
         },
@@ -101,7 +101,7 @@
             "type": "PLUGINS:dm-core-plugins/grid/GridArea",
             "rowStart": 5,
             "columnStart": 1,
-            "rowEnd": 6,
+            "rowEnd": 5,
             "columnEnd": 6
           }
         }

diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -36,7 +36,16 @@ const Content = () => {
     <DMSSProvider dmssBasePath={import.meta.env.VITE_DMSS_URL}>
       <DMJobProvider dmJobPath={import.meta.env.VITE_DM_JOB_URL}>
         <UiPluginProvider pluginsToLoad={plugins}>
-          <App />
+          <div
+            style={{
+              display: 'flex',
+              height: '100vh',
+              width: '100vw',
+              overflow: 'hidden',
+            }}
+          >
+            <App />
+          </div>
         </UiPluginProvider>
         <ToastContainer />
       </DMJobProvider>

diff --git a/packages/dm-core-plugins/src/data-grid/DataGridPlugin.tsx b/packages/dm-core-plugins/src/data-grid/DataGridPlugin.tsx
@@ -110,7 +110,11 @@ export function DataGridPlugin(props: IUIPlugin) {
   }
 
   return !data ? null : (
-    <Stack alignItems='flex-end' spacing={1}>
+    <Stack
+      alignItems='flex-start'
+      spacing={1}
+      style={{ width: '100%', height: '100%', overflow: 'auto' }}
+    >
       <DataGrid
         attributeType={attribute?.attributeType || 'string'}
         config={userConfig}
@@ -123,9 +127,17 @@ export function DataGridPlugin(props: IUIPlugin) {
         title={document?.title}
       />
       {config.editable && (
-        <Button onClick={saveDocument} disabled={!isDirty || loading}>
-          Save
-        </Button>
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            overflow: 'hidden',
+          }}
+        >
+          <Button onClick={saveDocument} disabled={!isDirty || loading}>
+            Save
+          </Button>
+        </div>
       )}
     </Stack>
   )

diff --git a/packages/dm-core-plugins/src/explorer/ExplorerPlugin.tsx b/packages/dm-core-plugins/src/explorer/ExplorerPlugin.tsx
@@ -22,7 +22,7 @@ export default () => {
     undefined
   )
   return (
-    <div style={{ display: 'flex', height: '100vh', width: '100%' }}>
+    <div style={{ display: 'flex', height: '100%', width: '100%' }}>
       {loading ? (
         <div style={{ display: 'flex', justifyContent: 'center' }}>
           <Progress.Circular />
@@ -41,7 +41,13 @@ export default () => {
         </Sidebar>
       )}
       {selectedType && selectedEntity && (
-        <div style={{ width: '100%', padding: '20px' }}>
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+          }}
+        >
           <EntityView
             type={selectedType}
             idReference={selectedEntity}

diff --git a/packages/dm-core-plugins/src/form/components/Form.tsx b/packages/dm-core-plugins/src/form/components/Form.tsx
@@ -24,6 +24,7 @@ import { AttributeList } from './AttributeList'
 const Wrapper = styled.div`
   max-width: 650px;
   width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
 `

diff --git a/packages/dm-core-plugins/src/grid/GridElement.tsx b/packages/dm-core-plugins/src/grid/GridElement.tsx
@@ -21,7 +21,6 @@ const Element = styled.div<TElementProps>`
     `${props.itemBorder.size} ${props.itemBorder.style} ${props.itemBorder.color}`};
   border-radius: ${(props: TElementProps) =>
     props.showItemBorders && props.itemBorder.radius};
-  padding: 10px;
 `
 
 type TGridItemProps = {
@@ -46,12 +45,20 @@ export const GridElement = (props: TGridItemProps): React.ReactElement => {
       itemBorder={itemBorder}
     >
       {item?.title && <Typography variant='h4'>{item.title}</Typography>}
-      <ViewCreator
-        idReference={idReference}
-        viewConfig={item.viewConfig}
-        onSubmit={onSubmit}
-        onChange={onChange}
-      />
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+        }}
+      >
+        <ViewCreator
+          idReference={idReference}
+          viewConfig={item.viewConfig}
+          onSubmit={onSubmit}
+          onChange={onChange}
+        />
+      </div>
     </Element>
   )
 }
diff --git a/packages/dm-core-plugins/src/grid/GridPlugin.tsx b/packages/dm-core-plugins/src/grid/GridPlugin.tsx
@@ -6,18 +6,17 @@ import { TGridPluginConfig, TGridSize } from './types'
 
 const Grid = styled.div<TGridSize>`
   display: grid;
+  overflow: auto;
+  width: 100%;
+  height: 100%;
   grid-template-rows: ${(props) =>
     props.rowSizes
       ? props.rowSizes.join(' ')
-      : Array(props.rows + 1)
-          .fill('1fr')
-          .join('')};
+      : 'repeat(' + props.rows + ', 1fr)'};
   grid-template-columns: ${(props) =>
     props.columnSizes
       ? props.columnSizes.join(' ')
-      : Array(props.columns + 1)
-          .fill('1fr')
-          .join('')};
+      : 'repeat(' + props.columns + ', 1fr)'};
   grid-column-gap: ${(props) => props.columnGap};
   grid-row-gap: ${(props) => props.rowGap};
 `

diff --git a/packages/dm-core-plugins/src/header/HeaderPlugin.tsx b/packages/dm-core-plugins/src/header/HeaderPlugin.tsx
@@ -118,13 +118,21 @@ export default (props: IUIPlugin): React.ReactElement => {
       ? config.uiRecipesList
       : uiRecipes.map((recipe: TUiRecipe) => recipe.name)
   return (
-    <div>
+    <div
+      style={{
+        display: 'flex',
+        width: '100%',
+        height: '100%',
+        flexDirection: 'column',
+      }}
+    >
       <TopBar
         style={{
           display: 'flex',
           justifyItems: 'center',
           justifyContent: 'space-between',
           marginBottom: '8px',
+          height: '64px',
         }}
       >
         <TopBar.Header
@@ -169,12 +177,20 @@ export default (props: IUIPlugin): React.ReactElement => {
         setIsOpen={setVisibleUserInfo}
         applicationEntity={entity}
       />
-      <UIPlugin
-        key={idReference + selectedRecipe.name}
-        idReference={idReference}
-        type={entity.type}
-        config={selectedRecipe.config}
-      />
+      <div
+        style={{
+          height: 'calc(100% - 64px)',
+          width: '100%',
+          display: 'flex',
+        }}
+      >
+        <UIPlugin
+          key={idReference + selectedRecipe.name}
+          idReference={idReference}
+          type={entity.type}
+          config={selectedRecipe.config}
+        />
+      </div>
     </div>
   )
 }