From e3aaea02ee832960eb17f8c07a9724462f54955f Mon Sep 17 00:00:00 2001 From: Albrecht Degering Date: Wed, 22 Jul 2026 20:52:41 +0200 Subject: [PATCH] fix: preserve responsive image proportions --- CHANGELOG.md | 6 ++++++ README.md | 4 ++-- SOURCE.md | 4 ++-- docs/FORMAT_SUPPORT.md | 2 +- docs/REFERENCE_IMPLEMENTATIONS.md | 2 +- package-lock.json | 4 ++-- package.json | 2 +- public/toolbox-app.json | 2 +- src/components/PageReader.test.tsx | 10 ++++++++++ src/components/PageReader.tsx | 4 +++- src/styles.css | 8 ++++++++ src/version.ts | 2 +- 12 files changed, 38 insertions(+), 12 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e354cd2..7e0ea79 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## 0.2.1 - 2026-07-22 + +- Preserve the intrinsic aspect ratio of embedded images when their recorded + display width is reduced to fit the reader, including linked images. +- Allow the page reader to scroll when its Toolbox grid area is constrained. + ## 0.2.0 - 2026-07-22 - Open unfragmented FSSHTTPB package-store `.one` sections through the same diff --git a/README.md b/README.md index eeab0ab..dade232 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ It is also an independent application in the add·ideas Toolbox contract. The source uses the Toolbox SDK shell and manifest, builds with Vite `base: './'`, and is delivered to Toolbox Portal as a checksummed static ZIP. -## What version 0.2.0 supports +## What version 0.2.1 supports - Desktop revision-store and unfragmented FSSHTTPB package-store `.one` sections from the tested producer families. @@ -80,7 +80,7 @@ supplied through the SDK's `?toolbox=` context mechanism. The app uses the SDK ```sh npm run release:artifact -(cd release && sha256sum -c onenote-tools-0.2.0.sha256) +(cd release && sha256sum -c onenote-tools-0.2.1.sha256) ``` The ZIP root contains the built static app and manifest plus the changelog, diff --git a/SOURCE.md b/SOURCE.md index 5080ddf..b552c3d 100644 --- a/SOURCE.md +++ b/SOURCE.md @@ -1,8 +1,8 @@ # Corresponding source -The corresponding source for OneNote Tools 0.2.0 is the `v0.2.0` tag: +The corresponding source for OneNote Tools 0.2.1 is the `v0.2.1` tag: -https://git.add-ideas.de/zemion/onenote-tools/src/tag/v0.2.0 +https://git.add-ideas.de/zemion/onenote-tools/src/tag/v0.2.1 Build the release from that tag with Node.js 22 or newer: diff --git a/docs/FORMAT_SUPPORT.md b/docs/FORMAT_SUPPORT.md index b7520d6..8e129f1 100644 --- a/docs/FORMAT_SUPPORT.md +++ b/docs/FORMAT_SUPPORT.md @@ -1,6 +1,6 @@ # Format support -## Version 0.2.0 support matrix +## Version 0.2.1 support matrix | Input or feature | Status | Tested evidence and boundary | | -------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------- | diff --git a/docs/REFERENCE_IMPLEMENTATIONS.md b/docs/REFERENCE_IMPLEMENTATIONS.md index f9f3804..54927d1 100644 --- a/docs/REFERENCE_IMPLEMENTATIONS.md +++ b/docs/REFERENCE_IMPLEMENTATIONS.md @@ -1,6 +1,6 @@ # Specifications and pinned references -Version 0.2.0 records these immutable implementation revisions: +Version 0.2.1 records these immutable implementation revisions: | Repository | Exact revision | Use | | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------- | diff --git a/package-lock.json b/package-lock.json index 621ed5c..2364191 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "onenote-tools", - "version": "0.2.0", + "version": "0.2.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "onenote-tools", - "version": "0.2.0", + "version": "0.2.1", "license": "MPL-2.0 AND LGPL-2.1-only", "dependencies": { "@add-ideas/toolbox-contract": "0.1.1", diff --git a/package.json b/package.json index e7c86bd..0f5988a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "onenote-tools", - "version": "0.2.0", + "version": "0.2.1", "description": "A local-first browser reader and exporter for OneNote files.", "license": "MPL-2.0 AND LGPL-2.1-only", "private": true, diff --git a/public/toolbox-app.json b/public/toolbox-app.json index 1271899..1538a1d 100644 --- a/public/toolbox-app.json +++ b/public/toolbox-app.json @@ -40,5 +40,5 @@ "repository": "https://git.add-ideas.de/zemion/onenote-tools", "license": "MPL-2.0 AND LGPL-2.1-only" }, - "version": "0.2.0" + "version": "0.2.1" } diff --git a/src/components/PageReader.test.tsx b/src/components/PageReader.test.tsx index e101fc3..c5ea253 100644 --- a/src/components/PageReader.test.tsx +++ b/src/components/PageReader.test.tsx @@ -59,6 +59,9 @@ const page: OneNotePageDto = { id: 'image-1', resourceId: 'resource-image', altText: 'Embedded diagram', + pictureWidth: 8, + pictureHeight: 4, + href: 'https://example.com/diagram', isBackground: false, layout: {}, }, @@ -141,6 +144,13 @@ describe('PageReader structured content', () => { screen.getByRole('img', { name: 'Embedded diagram' }) ).toHaveAttribute('src', 'blob:local-image') ); + expect(screen.getByRole('img', { name: 'Embedded diagram' })).toHaveStyle({ + width: '384px', + height: 'auto', + }); + expect( + screen.getByRole('link', { name: 'Embedded diagram' }) + ).toHaveAttribute('href', 'https://example.com/diagram'); }); it('downloads an attachment only after an explicit user action', async () => { diff --git a/src/components/PageReader.tsx b/src/components/PageReader.tsx index f75adc6..19561b7 100644 --- a/src/components/PageReader.tsx +++ b/src/components/PageReader.tsx @@ -400,7 +400,9 @@ function ImageView({ alt={image.altText ?? image.filename ?? ''} style={{ width: halfInches(image.pictureWidth), - height: halfInches(image.pictureHeight), + // A fixed height would remain unchanged when max-width scales a + // large image down, distorting its aspect ratio. + height: 'auto', }} /> ) : ( diff --git a/src/styles.css b/src/styles.css index b52c370..2e2218e 100644 --- a/src/styles.css +++ b/src/styles.css @@ -333,6 +333,8 @@ p { .page-reader { min-width: 0; + min-height: 0; + overflow: auto; padding: clamp(1.4rem, 4vw, 3rem); background: #fff; } @@ -453,9 +455,15 @@ p { display: block; max-width: 100%; height: auto; + object-fit: contain; border-radius: 0.3rem; } +.onenote-image > a { + display: block; + max-width: 100%; +} + .onenote-image figcaption { max-width: 40rem; color: #716675; diff --git a/src/version.ts b/src/version.ts index 60861a9..4f974fc 100644 --- a/src/version.ts +++ b/src/version.ts @@ -1 +1 @@ -export const APP_VERSION = '0.2.0'; +export const APP_VERSION = '0.2.1';