Build a responsive Editor layout

Responsive Editor layouts have three independent concerns: the document scale, the available toolbar width, and whether the document scrolls inside a fixed-height host. Configure each explicitly.

Build the shell

Give fullscreen to an element that contains the toolbar, control, and Editor:

<div id="editor-shell">
  <div id="toolbar"></div>
  <button id="fullscreen" type="button">Fullscreen</button>
  <div id="editor"></div>
</div>

<script type="module" src="/src/main.ts"></script>

Fit to the container

Configure fit-to-width and container-aware chrome, then refit after the browser enters or exits fullscreen:

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const shell = document.querySelector<HTMLElement>('#editor-shell');
const fullscreen = document.querySelector<HTMLButtonElement>('#fullscreen');

if (!shell || !fullscreen) throw new Error('The responsive editor shell is incomplete.');

const superdoc = new SuperDoc({
  selector: '#editor',
  toolbar: '#toolbar',
  document: '/contract.docx',
  contained: true,
  zoom: {
    mode: 'fit-width',
    fitWidth: { min: 40, max: 100, padding: 24 },
  },
  modules: {
    toolbar: {
      responsiveToContainer: true,
      hideButtons: true,
    },
    comments: { displayMode: 'auto' },
  },
});

const toggleFullscreen = async () => {
  if (document.fullscreenElement) await document.exitFullscreen();
  else await shell.requestFullscreen();
};
const refit = () => superdoc.setZoomMode('fit-width');

fullscreen.addEventListener('click', toggleFullscreen);
document.addEventListener('fullscreenchange', refit);

window.addEventListener('beforeunload', () => {
  fullscreen.removeEventListener('click', toggleFullscreen);
  document.removeEventListener('fullscreenchange', refit);
  superdoc.destroy();
});

zoom.mode: 'fit-width' continuously follows the available document width. The min, max, and padding values constrain that policy. Calling setZoom() switches to manual mode; call setZoomMode('fit-width') to resume automatic fitting.

responsiveToContainer measures the toolbar's container rather than the browser window. hideButtons lets lower-priority controls leave the visible row when space becomes tight. comments.displayMode: 'auto' lets review UI move between sidebar and inline presentation.

Set contained: true only when the host has a deliberate fixed height and should own an internal scroll region. Leave it off when the document should expand with the page. Avoid nesting the Editor inside another horizontal scroller.

The Fullscreen API is browser-owned, so the application must provide the button and handle rejected fullscreen requests where required by its product. The explicit fullscreenchange refit prevents the document from keeping dimensions calculated for the previous viewport.