diff --git a/packages/sak-dekorator/src/ErrorMessagePanel.tsx b/packages/sak-dekorator/src/ErrorMessagePanel.tsx
index 8512a6dbb8..7345b0e614 100644
--- a/packages/sak-dekorator/src/ErrorMessagePanel.tsx
+++ b/packages/sak-dekorator/src/ErrorMessagePanel.tsx
@@ -1,6 +1,6 @@
 import { decodeHtmlEntity } from '@fpsak-frontend/utils';
 import { XMarkIcon } from '@navikt/aksel-icons';
-import { Button, Detail, HGrid } from '@navikt/ds-react';
+import { Button, Detail, HStack } from '@navikt/ds-react';
 import React, { useMemo, useState } from 'react';
 import { FormattedMessage, WrappedComponentProps, injectIntl } from 'react-intl';
 import { v4 as uuidv4 } from 'uuid';
@@ -49,7 +49,7 @@ export const ErrorMessagePanel = (props: OwnProps & WrappedComponentProps) => {
   return (
     <div className={styles.container}>
       {errorMessagesWithId.map((message, index) => (
-        <HGrid gap="1" columns={{ xs: '11fr 1fr' }} key={message.id}>
+        <HStack gap="3" key={message.id}>
           <Detail className={styles.wordWrap}>{`${decodeHtmlEntity(message.message)} `}</Detail>
           {message.additionalInfo && (
             <Detail>
@@ -64,7 +64,7 @@ export const ErrorMessagePanel = (props: OwnProps & WrappedComponentProps) => {
               </a>
             </Detail>
           )}
-        </HGrid>
+        </HStack>
       ))}
       <div className={styles.lukkContainer}>
         <Button
diff --git a/packages/sak-dekorator/src/HeaderWithErrorPanel.stories.tsx b/packages/sak-dekorator/src/HeaderWithErrorPanel.stories.tsx
index 15c5c08708..38552183ba 100644
--- a/packages/sak-dekorator/src/HeaderWithErrorPanel.stories.tsx
+++ b/packages/sak-dekorator/src/HeaderWithErrorPanel.stories.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import HeaderWithErrorPanel from './HeaderWithErrorPanel';
 
 export default {
@@ -21,7 +21,13 @@ export const visDekoratorUtenFeilmeldinger = () => (
 );
 
 export const visDekoratorMedFeilmeldinger = () => {
-  const [errorMessages, removeErrorMessages] = useState([{ message: 'Feilmelding 1' }, { message: 'Feilmelding 2' }]);
+  const [errorMessages, removeErrorMessages] = useState([
+    { message: 'Feilmelding 1' },
+    {
+      message: 'En lang feilmelding som også har ekstra informasjon som kan åpnes i en popup.',
+      additionalInfo: { feilmelding: 'Detaljert feilmelding', url: '' },
+    },
+  ]);
   return (
     <div style={{ marginLeft: '-56px' }}>
       <HeaderWithErrorPanel