# Build a responsive Editor layout

> Fit the document to its container, adapt built-in chrome, and refit after fullscreen changes.



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 [#build-the-shell]

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

```html
<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 [#fit-to-the-container]

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

```ts
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.