removes empty space under video and audio in cards on position bottom (…

…#2964)
Altinn · Feb 4, 2025 · 0f3f3b8 · 0f3f3b8
1 parent 9412d83
commit 0f3f3b8
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 42 deletions.
diff --git a/src/layout/Audio/Audio.tsx b/src/layout/Audio/Audio.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import { useCurrentLanguage } from 'src/features/language/LanguageProvider';
 import { useLanguage } from 'src/features/language/useLanguage';
 import { useParentCard } from 'src/layout/Cards/CardContext';
-import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import type { PropsFromGenericComponent } from 'src/layout';
 
@@ -19,24 +18,22 @@ export function AudioComponent({ node }: IAudioProps) {
   const cardMediaHeight = useParentCard()?.minMediaHeight;
 
   return (
-    <ComponentStructureWrapper node={node}>
-      <audio
-        controls
-        id={id}
-        style={{
-          height: renderedInCardMedia ? cardMediaHeight : undefined,
-          letterSpacing: '0.3px',
-          width: '100%',
-        }}
-      >
-        <source src={audioSrc} />
-        <track
-          kind='captions'
-          src={audioSrc}
-          srcLang={languageKey}
-          label={altText}
-        />
-      </audio>
-    </ComponentStructureWrapper>
+    <audio
+      controls
+      id={id}
+      style={{
+        height: renderedInCardMedia ? cardMediaHeight : undefined,
+        letterSpacing: '0.3px',
+        width: '100%',
+      }}
+    >
+      <source src={audioSrc} />
+      <track
+        kind='captions'
+        src={audioSrc}
+        srcLang={languageKey}
+        label={altText}
+      />
+    </audio>
   );
 }
diff --git a/src/layout/ComponentStructureWrapper.tsx b/src/layout/ComponentStructureWrapper.tsx
@@ -8,7 +8,6 @@ import { useFormComponentCtx } from 'src/layout/FormComponentContext';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import type { LabelProps } from 'src/components/label/Label';
 import type { CompTypes } from 'src/layout/layout';
-import type { LayoutComponent } from 'src/layout/LayoutComponent';
 import type { LayoutNode } from 'src/utils/layout/LayoutNode';
 
 type ComponentStructureWrapperProps<Type extends CompTypes> = {
@@ -28,7 +27,7 @@ export function ComponentStructureWrapper<Type extends CompTypes = CompTypes>({
   const overrideItemProps = useFormComponentCtx()?.overrideItemProps;
   const _grid = useNodeItem(node, (i) => i.grid);
   const grid = overrideItemProps?.grid ?? _grid;
-  const layoutComponent = node.def as unknown as LayoutComponent<Type>;
+  const layoutComponent = node.def;
   const showValidationMessages = layoutComponent.renderDefaultValidations();
 
   const componentWithValidations = (

diff --git a/src/layout/Video/Video.tsx b/src/layout/Video/Video.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import { useCurrentLanguage } from 'src/features/language/LanguageProvider';
 import { useLanguage } from 'src/features/language/useLanguage';
 import { useParentCard } from 'src/layout/Cards/CardContext';
-import { ComponentStructureWrapper } from 'src/layout/ComponentStructureWrapper';
 import { useNodeItem } from 'src/utils/layout/useNodeItem';
 import type { PropsFromGenericComponent } from 'src/layout';
 
@@ -19,24 +18,22 @@ export function VideoComponent({ node }: IVideoProps) {
   const cardMediaHeight = useParentCard()?.minMediaHeight;
 
   return (
-    <ComponentStructureWrapper node={node}>
-      <video
-        controls
-        id={id}
-        style={{
-          height: renderedInCardMedia ? cardMediaHeight : undefined,
-          letterSpacing: '0.3px',
-          width: '100%',
-        }}
-      >
-        <source src={videoSrc} />
-        <track
-          kind='captions'
-          src={videoSrc}
-          srcLang={languageKey}
-          label={altText}
-        />
-      </video>
-    </ComponentStructureWrapper>
+    <video
+      controls
+      id={id}
+      style={{
+        height: renderedInCardMedia ? cardMediaHeight : undefined,
+        letterSpacing: '0.3px',
+        width: '100%',
+      }}
+    >
+      <source src={videoSrc} />
+      <track
+        kind='captions'
+        src={videoSrc}
+        srcLang={languageKey}
+        label={altText}
+      />
+    </video>
   );
 }