docs: fix Dialog stories and usage table width (#4546)

Author: Lukas742

.storybook/components/Import.tsx

@@ -16,7 +16,7 @@ export const ImportStatement = ({ moduleName, packageName }: ImportStatementProp
   return (
     <pre
       style={{
-        display: 'block',
+        display: 'contents',
         overflowX: 'auto',
         padding: '0px',
         background: 'white',

packages/main/src/components/MessageView/MessageView.stories.tsx

@@ -10,7 +10,7 @@ import { ValueState } from '../../enums/ValueState.js';
 import { Bar } from '../../webComponents/Bar/index.js';
 import { Button } from '../../webComponents/Button/index.js';
 // todo replace once `createPortal` is supported
-import { Dialog } from '../../webComponents/Dialog/Dialog.stories.js';
+import { Dialog } from '../../webComponents/Dialog/CodeGen.js';
 import { Link } from '../../webComponents/Link/index.js';
 // todo replace once `createPortal` is supported
 import { ResponsivePopover } from '../../webComponents/ResponsivePopover/CodeGen.js';

packages/main/src/webComponents/Dialog/CodeGen.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { createPortal } from 'react-dom';
+import { Dialog as OriginalDialog, DialogDomRef, DialogPropTypes } from './index';
+
+// todo remove once portals are supported inline, or general popovers are supported w/o having to mount them to the body
+export const Dialog = forwardRef<DialogDomRef, DialogPropTypes>((args, ref) =>
+  createPortal(<OriginalDialog {...args} ref={ref} />, document.body)
+);
+
+Dialog.displayName = 'Dialog';

packages/main/src/webComponents/Dialog/Dialog.stories.tsx

@@ -1,10 +1,10 @@
 import { isChromatic } from '@sb/utils';
 import type { Meta, StoryObj } from '@storybook/react';
 import settingsIcon from '@ui5/webcomponents-icons/dist/settings.js';
-import React, { forwardRef, useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
+import React, { useEffect, useState } from 'react';
 import { BarDesign } from '../../enums';
-import { Bar, Button, DialogDomRef, DialogPropTypes, Icon, List, StandardListItem, Title } from '../index.js';
+import { Bar, Button, Icon, List, StandardListItem, Title } from '../index.js';
+import { Dialog } from './CodeGen';
 import { Dialog as OriginalDialog } from './index';
 
 const meta = {
@@ -21,13 +21,6 @@ const meta = {
   }
 } satisfies Meta<typeof OriginalDialog>;
 
-// todo remove once portals are supported inline, or general popovers are supported w/o having to mount them to the body
-export const Dialog = forwardRef<DialogDomRef, DialogPropTypes>((args, ref) =>
-  createPortal(<OriginalDialog {...args} ref={ref} />, document.body)
-);
-
-Dialog.displayName = 'Dialog';
-
 export default meta;
 type Story = StoryObj<typeof meta>;