fix: responsive ui + ui props fixes

equinor · Jun 24, 2024 · fbe9738 · fbe9738
1 parent 5fa81c2
commit fbe9738
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 6 deletions.
diff --git a/packages/dm-core-plugins/src/common/Stack/types.ts b/packages/dm-core-plugins/src/common/Stack/types.ts
@@ -66,4 +66,5 @@ export const defaultProps: StackProps = {
   grow: 0,
   shrink: 1,
   fullWidth: false,
+  spacing: 0,
 }
diff --git a/packages/dm-core-plugins/src/data-grid/DataGridPlugin.tsx b/packages/dm-core-plugins/src/data-grid/DataGridPlugin.tsx
@@ -124,7 +124,7 @@ export function DataGridPlugin(props: IUIPlugin) {
 
   return !data ? null : (
     <div className='dm-plugin-padding'>
-      <Stack fullWidth alignItems='flex-start' spacing={1}>
+      <Stack fullWidth alignItems='flex-start' spacing={1} scrollX>
         <DataGrid
           attributeType={attribute?.attributeType || 'string'}
           config={userConfig}

diff --git a/packages/dm-core-plugins/src/mediaViewer/MediaContent/MediaContent.tsx b/packages/dm-core-plugins/src/mediaViewer/MediaContent/MediaContent.tsx
@@ -35,9 +35,9 @@ export const MediaContent = (props: MediaContentProps): ReactElement => {
           src={blobUrl}
           alt={meta.title}
           style={{
-            width: config.width ?? '100%',
+            maxWidth: config.width ?? '100%',
+            width: '100%',
             height: config.height ?? 'auto',
-            maxWidth: 'unset',
           }}
         />
       )

diff --git a/packages/dm-core-plugins/src/stack/StackPlugin.tsx b/packages/dm-core-plugins/src/stack/StackPlugin.tsx
@@ -26,14 +26,17 @@ export const StackPlugin = (props: IUIPlugin) => {
     direction: configMap[config.direction] as DirectionTypes,
     [configMap.verticalPlacement]: configMap[config.verticalPlacement],
     [configMap.horizontalPlacement]: configMap[config.horizontalPlacement],
-    className: config.classNames?.join(' '),
+    className: config.classNames.join(' '),
     spacing: config.spacing,
     wrap: config.wrap ? 'wrap' : 'no-wrap',
     style: { maxWidth: config.maxWidth },
   }
 
   return (
-    <Stack className='dm-parent-plugin' {...stackProps}>
+    <Stack
+      {...stackProps}
+      className={`dm-plugin-padding dm-parent-plugin ${config.classNames}`}
+    >
       {config.items?.map((item, index) => (
         <ViewCreator
           key={`${item.recipe}_${index}`}

diff --git a/packages/dm-core-plugins/src/stack/types.ts b/packages/dm-core-plugins/src/stack/types.ts
@@ -16,7 +16,7 @@ export const defaultConfig: StackPluginConfig = {
   direction: 'vertical',
   horizontalPlacement: 'left',
   verticalPlacement: 'top',
-  spacing: 2,
+  spacing: 1,
   maxWidth: 'none',
   wrap: false,
   classNames: [],