Fix full-width for code-blocks and embeds (GitbookIO#2272)

Author: SamyPesse

e2e/pages.spec.ts

@@ -212,6 +212,11 @@ const testCases: TestsCase[] = [
  url: 'blocks/lists',
  fullPage: true,
  },
+ {
+ name: 'Code',
+ url: 'blocks/code',
+ fullPage: true,
+ },
  {
  name: 'Cards',
  url: 'blocks/cards',
@@ -224,6 +229,7 @@ const testCases: TestsCase[] = [
  {
  name: 'Embeds',
  url: 'blocks/embeds',
+ fullPage: true,
  },
  {
  name: 'Annotations',
@@ -511,7 +517,7 @@ for (const testCase of testCases) {
  }
  if (testEntry.screenshot !== false) {
  await argosScreenshot(page, `${testCase.name} - ${testEntry.name}`, {
- viewports: ['macbook-13', 'iphone-x', 'ipad-2'],
+ viewports: ['macbook-16', 'macbook-13', 'iphone-x', 'ipad-2'],
  argosCSS: `
  /* Hide Intercom */
  .intercom-lightweight-app {

src/components/DocumentView/Blocks.tsx

@@ -34,7 +34,15 @@ export function Blocks<T extends DocumentBlock, Tag extends React.ElementType =
  <Block
  key={node.key}
  block={node}
- style={['max-w-3xl', 'w-full', 'mx-auto', 'decoration-primary/6', blockStyle]}
+ style={[
+ node.data && 'fullWidth' in node.data && node.data.fullWidth
+ ? 'max-w-screen-xl'
+ : 'max-w-3xl',
+ 'w-full',
+ 'mx-auto',
+ 'decoration-primary/6',
+ blockStyle,
+ ]}
  {...contextProps}
  />
  ))}

src/components/DocumentView/CodeBlock/CodeBlock.tsx

@@ -22,17 +22,14 @@ export async function CodeBlock(props: BlockProps<DocumentBlockCode>) {
  const withLineNumbers = !!block.data.lineNumbers && block.nodes.length > 1;
  const withWrap = block.data.overflow === 'wrap';
  const title = block.data.title;
- const fullWidth = block.data.fullWidth;
-
- const fullWidthStyle = fullWidth ? 'max-w-4xl' : 'max-w-3xl';
  const titleRoundingStyle = [
  'rounded-md',
  'straight-corners:rounded-sm',
  title ? 'rounded-ss-none' : null,
  ];
 
  return (
- <div className={tcls('group/codeblock', 'grid', 'grid-flow-col', fullWidthStyle, style)}>
+ <div className={tcls('group/codeblock', 'grid', 'grid-flow-col', style)}>
  <div
  className={tcls(
  'flex',

src/components/DocumentView/Embed.tsx

@@ -1,13 +1,13 @@
 import { DocumentBlockEmbed } from '@gitbook/api';
+import Script from 'next/script';
+
 
 import { Card } from '@/components/primitives';
 import { api } from '@/lib/api';
-import { getNodeFragmentByName, isNodeEmpty } from '@/lib/document';
-import { ClassValue, tcls } from '@/lib/tailwind';
+import { tcls } from '@/lib/tailwind';
 
 import { BlockProps } from './Block';
 import { Caption } from './Caption';
-import { Inlines } from './Inlines';
 
 export async function Embed(props: BlockProps<DocumentBlockEmbed>) {
  const { block } = props;
@@ -17,11 +17,15 @@ export async function Embed(props: BlockProps<DocumentBlockEmbed>) {
  return (
  <Caption {...props}>
  {embed.type === 'rich' ? (
- <div
- dangerouslySetInnerHTML={{
- __html: embed.html,
- }}
- />
+ <>
+ <div
+ dangerouslySetInnerHTML={{
+ __html: embed.html,
+ }}
+ />
+ {/* We load the iframely script to resize the embed iframes dynamically */}
+ <Script src="https://cdn.iframe.ly/embed.js" defer async />
+ </>
  ) : (
  <Card
  leadingIcon={

src/components/DocumentView/Images.tsx

@@ -31,7 +31,6 @@ export function Images(props: BlockProps<DocumentBlockImages>) {
  align === 'right' && 'justify-end',
  align === 'left' && 'justify-start',
  isMultipleImages && ['grid', 'grid-flow-col', 'max-w-none'],
- block.data.fullWidth ? 'max-w-screen-2xl' : null,
  )}
  >
  {block.nodes.map((node: any, i: number) => (

src/components/DocumentView/Table/ViewCards.tsx

@@ -12,14 +12,12 @@ export function ViewCards(props: TableViewProps<DocumentTableViewCards>) {
  <div
  className={tcls(
  style,
- 'max-w-full',
- 'md:max-w-3xl',
  'inline-grid',
  'gap-4',
  'grid-cols-1',
  'min-[432px]:grid-cols-2',
  view.cardSize === 'large' ? 'md:grid-cols-2' : 'md:grid-cols-3',
- block.data.fullWidth ? ['max-w-full', 'large:flex-column'] : null,
+ block.data.fullWidth ? 'large:flex-column' : null,
  )}
  >
  {records.map((record) => {

src/components/DocumentView/Table/ViewGrid.tsx

@@ -14,40 +14,15 @@ export function ViewGrid(props: TableViewProps<DocumentTableViewGrid>) {
  const tableWrapper = columnsOverThreshold
  ? [
  // has over X columns
- 'w-full',
  'overflow-x-auto',
  'overflow-y-hidden',
  'mx-auto',
  'rounded-md',
  'border',
  'border-dark/3',
  'dark:border-light/2',
- block.data.fullWidth
- ? [
- // has over X columns, and is full width
- 'max-w-full',
- ]
- : [
- // NOT full width, but has over X columns
- 'max-w-4xl',
- ],
  ]
- : [
- 'w-full',
- 'overflow-x-auto',
- 'overflow-y-hidden',
- 'mx-auto',
- // has under X columns
- block.data.fullWidth
- ? [
- // has under X columns, and is full width
- 'max-w-full',
- ]
- : [
- // NOT full width, but has under X columns
- 'max-w-3xl',
- ],
- ];
+ : ['overflow-x-auto', 'overflow-y-hidden', 'mx-auto'];
 
  const tableTR = columnsOverThreshold
  ? ['[&>*+*]:border-l', '[&>*]:px-4']