Codey

Appearance

Report a problem:

Problems can be reported via Microsoft Teams in your team channel within the "IT - Codey" team.

Please include the following information:

Report type:
Docs problem report a bug instead →
Path:
/vnext/contributing/adr/records/011__use-resizeobserver-for-applicationshell-layout.html
Message:

DESCRIBE THE PROBLEM BEFORE SUBMITTING TO CODEY

Use resizeobserver for ApplicationShell layout ​

Status: Approved

Decision Date: 11/04/2025

Scope: codey-components

Context ​

The ApplicationShell component received a design update, with header, sidebar and footer becoming sticky by default, optionally reverting back to static layout.
The design also features a light grey background, with the main content wrapper having a white background and adapting its width to the content.

While finding a combination of html wrappers and css properties to achieve the required UX in all configurations...

  • sticky / static layout
  • small, full-width, x-overflowing content
  • floating / static scrollbars

...we got stuck in a situation where our fully CSS solution was causing unwanted body scrollbars on top of a sticky layout with content wrapper scrollbar.

Decision ​

During our search for a fix we found a solution using a ResizeObserver to track the exact available screen size (also taking account of scrollbar size).

Using the ResizeObserver method we were able to come up with a solution that resulted in the required UX in all configurations. Which also provides us with great flexibility for future usage to handle possible future issues with difficult CSS sizing and positioning problems by making various dimensions and locations of important layout elements available across all CSS.
For example a modal appended to the <body> could make use of the header's size and location while calculating its own position and size.

When we later found a possible CSS-only fix for the original scrollbar problem described in the Context, we still decided to go ahead with this solution because of the usefulness and flexibility of this solution.

Consequences ​

This solution comes at the cost of:

  • a small performance hit for tracking HTML elements by using ResizeObserver.
  • dependency on javascript for styling.
  • a need to mock ResizeObserver in vitest, where there are no browser specific APIs.

Alternatives ​