diff --git a/code/addons/docs/src/blocks/components/Preview.tsx b/code/addons/docs/src/blocks/components/Preview.tsx
index 12246c013207..edaeb88a9876 100644
--- a/code/addons/docs/src/blocks/components/Preview.tsx
+++ b/code/addons/docs/src/blocks/components/Preview.tsx
@@ -38,7 +38,6 @@ const ChildrenContainer = styled.div<PreviewProps & { layout: Layout }>(
     flexWrap: 'wrap',
     overflow: 'auto',
     flexDirection: isColumn ? 'column' : 'row',
-    width: 'fit-content',
 
     '& .innerZoomElementWrapper > *': isColumn
       ? {
@@ -173,18 +172,9 @@ const PositionedToolbar = styled(Toolbar)({
   height: 40,
 });
 
-const Relative = styled.div(({ theme }) => ({
+const Relative = styled.div({
   overflow: 'hidden',
   position: 'relative',
-  display: 'flex',
-  flexWrap: 'wrap',
-  gap: theme.layoutMargin,
-}));
-
-const RelativeActionBar = styled(ActionBar)({
-  position: 'relative',
-  marginLeft: 'auto',
-  alignSelf: 'flex-end',
 });
 
 /**
@@ -288,7 +278,7 @@ export const Preview: FC<PreviewProps> = ({
               )}
             </Zoom.Element>
           </ChildrenContainer>
-          <RelativeActionBar actionItems={actionItems} />
+          <ActionBar actionItems={actionItems} />
         </Relative>
       </ZoomContext.Provider>
       {withSource && expanded && source}
diff --git a/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx b/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx
index 209fb0e75b59..58286cec773e 100644
--- a/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx
+++ b/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx
@@ -69,9 +69,6 @@ const Wrapper = styled.div<WrapperProps>(
   ({ theme }) => ({
     position: 'relative',
     overflow: 'hidden',
-    display: 'flex',
-    flexWrap: 'wrap',
-    gap: theme.layoutMargin,
     color: theme.color.defaultText,
   }),
   ({ theme, bordered }) =>
@@ -101,16 +98,6 @@ const UnstyledScroller = ({ children, className }: ScrollAreaProps) => (
 const Scroller = styled(UnstyledScroller)(
   {
     position: 'relative',
-    width: 'fit-content',
-    maxWidth: '100%',
-    '> div': {
-      width: 'fit-content',
-      maxWidth: '100%',
-      '> div > pre': {
-        width: 'fit-content',
-        maxWidth: '100%',
-      },
-    },
   },
   ({ theme }) => themedSyntax(theme)
 );
@@ -133,16 +120,11 @@ See https://github.com/storybookjs/storybook/issues/18090
 const Code = styled.div(({ theme }) => ({
   flex: 1,
   paddingLeft: 2, // TODO: To match theming/global.ts for now
+  paddingRight: theme.layoutMargin,
   opacity: 1,
   fontFamily: theme.typography.fonts.mono,
 }));
 
-const RelativeActionBar = styled(ActionBar)({
-  position: 'relative',
-  marginLeft: 'auto',
-  alignSelf: 'flex-end',
-});
-
 const processLineNumber = (row: any) => {
   const children = [...row.children];
   const lineNumberNode = children[0];
@@ -265,7 +247,7 @@ export const SyntaxHighlighter = ({
       </Scroller>
 
       {copyable ? (
-        <RelativeActionBar actionItems={[{ title: copied ? 'Copied' : 'Copy', onClick }]} />
+        <ActionBar actionItems={[{ title: copied ? 'Copied' : 'Copy', onClick }]} />
       ) : null}
     </Wrapper>
   );