From fbe97382b96ec692658b22e88fd69d2e18df2358 Mon Sep 17 00:00:00 2001
From: Andrea Vesterhus <andrea.vesterhus@bouvet.no>
Date: Mon, 24 Jun 2024 18:23:10 +0200
Subject: [PATCH] fix: responsive ui + ui props fixes

---
 packages/dm-core-plugins/src/common/Stack/types.ts         | 1 +
 packages/dm-core-plugins/src/data-grid/DataGridPlugin.tsx  | 2 +-
 .../src/mediaViewer/MediaContent/MediaContent.tsx          | 4 ++--
 packages/dm-core-plugins/src/stack/StackPlugin.tsx         | 7 +++++--
 packages/dm-core-plugins/src/stack/types.ts                | 2 +-
 5 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/dm-core-plugins/src/common/Stack/types.ts b/packages/dm-core-plugins/src/common/Stack/types.ts
index 5a773270d..931386424 100644
--- 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
index 6068d12b1..6897b360e 100644
--- 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
index da764849a..3484b2af9 100644
--- 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
index 4f6ed1ce5..7a7acb594 100644
--- 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
index c941ee32e..847c6be00 100644
--- 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: [],