diff --git a/examples/base-web/src/App.tsx b/examples/base-web/src/App.tsx
index bd040ca194..84a0229dd0 100644
--- a/examples/base-web/src/App.tsx
+++ b/examples/base-web/src/App.tsx
@@ -195,7 +195,7 @@ export default function App() {
         <HotTable
           theme={hotTheme}
           data={filteredRows}
-          width={600}
+          width="100%"
           // Fixed to fit all 9 rows exactly (no leftover space below the grid).
           // `height="auto"` isn't used here: this table's row count changes at
           // runtime via the filter, and "auto" watches the container for resizes,
diff --git a/examples/base-web/src/styles.css b/examples/base-web/src/styles.css
index 1aa5a0bfde..b94167fbdb 100644
--- a/examples/base-web/src/styles.css
+++ b/examples/base-web/src/styles.css
@@ -27,9 +27,13 @@ body {
   font-family: inherit;
 }
 
+/* Responsive rather than a fixed 600px: a hard width on the grid stops
+   Handsontable re-measuring, so a pane narrower than the card left the content
+   spilling out of its own root and the document scrolling sideways (DEV-2841).
+   The max-width clears the 880px of declared columns. */
 .table-shell {
-  width: 600px;
-  max-width: 100%;
+  width: 100%;
+  max-width: 900px;
 }
 
 .handsontableInputHolder,