fix: Add horizontal scroll to wide tables on narrow screens#1675
fix: Add horizontal scroll to wide tables on narrow screens#1675Reckbeg wants to merge 5 commits into
Conversation
* Fix package-lock file * Docs: remove CodeSandbox embedded demos and add links to working exa,ples in Stackblitz (handsontable#1621)
<!-- CURSOR_SUMMARY --> > [!NOTE] > **Low Risk** > Low risk documentation-only changes: adds new guide pages and adjusts VuePress sidebar navigation with no runtime or API impact. > > **Overview** > Adds three new AI-focused documentation pages: `ai-sdk`, `integration-with-langchain`, and `mcp-server`, describing how to use HyperFormula for deterministic spreadsheet computation in agent workflows. > > Updates the VuePress guide sidebar to surface these pages under **Integrations**, renames the section from *Framework integration* to *Integrations*, and moves the former *Overview* links into a new *About* section. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 54c541b. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY --> Co-authored-by: GreenFlux <support@greenflux.us> Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
- Add idID.ts with translations for all ~400 built-in functions - Add idID export to languages/index.ts - Update docs to reflect 18 supported languages - Add Indonesian to language table in localizing-functions.md
- Add overflow-x: auto to tables on pages using widePage layout - Fixes list-of-differences and built-in-functions guides not scaling well on narrower screens - Applies to both pages for consistency Closes handsontable#1359
❌ Deploy Preview for hyperformula-dev-docs failed. Why did it fail? →
|
❌ Deploy Preview for hyperformula-docs failed. Why did it fail? →
|
| allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" | ||
| sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"> | ||
| </iframe> | ||
| Explore the full working example on [Stackblitz](https://stackblitz.com/github/handsontable/hyperformula-demos/tree/3.2.x/react-demo?v=${$page.buildDateURIEncoded}). |
There was a problem hiding this comment.
Stackblitz links won't interpolate page variable in URL
Medium Severity
The markdown links use JavaScript template literal syntax ${$page.buildDateURIEncoded} inside a plain markdown URL. VuePress compiles markdown into Vue templates, where only {{ }} works for text interpolation and :attr for dynamic attribute binding. The old iframes correctly used :src with backtick template literals. The new plain [text](url) markdown renders a static href, so ${...} appears literally in the URL instead of the actual build date value. This affects all five pages with Stackblitz links.
Additional Locations (2)
Reviewed by Cursor Bugbot for commit 90ffb71. Configure here.
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
There are 2 total unresolved issues (including 1 from previous review).
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 160c1c8. Configure here.
| NOT: 'TIDAK', | ||
| NOW: 'SEKARANG', | ||
| NPER: 'NPER', | ||
| NPV: 'NVP', |
There was a problem hiding this comment.
Transposed letters in NPV function translations
Medium Severity
The Indonesian translation for NPV is 'NVP' and for XNPV is 'XNVP' — both swap the last two letters. No other language pack uses NVP as a translation for NPV. This means Indonesian-locale users would need to type the incorrect transposed name to invoke these financial functions, and the standard abbreviation would not work.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 160c1c8. Configure here.


Summary
Fixes #1359 — wide tables in docs overflow on narrow screens instead of being scrollable.
Problem
The List of differences with other spreadsheets guide and the Built-in functions guide both use
max-width: 1200pxvia the.widePageCSS class. However, on screens narrower than 1200px, the 5-column tables overflow the container without any scroll mechanism, making content inaccessible.Solution
Added
overflow-x: autoto tables inside.widePagepages, enabling horizontal scrolling when the table exceeds the viewport width.Changes
docs/guide/list-of-differences.md— Added scrollable table CSSdocs/guide/built-in-functions.md— Added same CSS for consistencyCSS added
This only affects pages using the
.widePagelayout, so other pages with standard tables are unaffected.Note
Low Risk
Primarily documentation/navigation updates plus a new
idIDtranslation export; low runtime risk aside from potential translation/lockfile packaging regressions.Overview
Adds new docs content and navigation for AI/agent integrations: introduces
HyperFormula AI SDK,Integration with LangChain, andHyperFormula MCP Server, and reorganizes the guide sidebar (renames Framework integration to Integrations and moves overview pages under a new About section).Improves docs UX by making wide tables horizontally scrollable on
.widePagepages, and replaces embedded CodeSandbox iframes in integration/custom-function demos with StackBlitz links.Extends internationalization support by adding an Indonesian (
idID) language pack, exporting it fromsrc/i18n/languages/index.ts, and updating docs to reflect 18 supported languages;package-lock.jsonalso gains additional optional platform-specificesbuildentries.Reviewed by Cursor Bugbot for commit 160c1c8. Bugbot is set up for automated code reviews on this repo. Configure here.