From 717ed8fe67c802c7162c6d1ad0dd2adf985fb908 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 28 May 2026 10:48:31 +0300 Subject: [PATCH 1/4] fix(xplat): prevent oversized rendering of Blazor card images The shared design system applies width:100% to every inside .igd-main-content__markdown, which stretches portrait/small images to full content-column width and recomputes height from the intrinsic ratio - rendering the 378x597 Blazor card screenshot as a ~1420px tall tower. Adds an inline width:auto override on the four affected sites and a top-level docs/IMAGE_SIZING.md explaining the pattern for future contributors. Closes #245 --- docs/IMAGE_SIZING.md | 51 +++++++++++++++++++ .../general-getting-started-blazor-client.mdx | 2 +- .../general-getting-started-blazor-maui.mdx | 2 +- ...general-getting-started-blazor-web-app.mdx | 2 +- .../en/components/general-getting-started.mdx | 4 +- 5 files changed, 56 insertions(+), 5 deletions(-) create mode 100644 docs/IMAGE_SIZING.md diff --git a/docs/IMAGE_SIZING.md b/docs/IMAGE_SIZING.md new file mode 100644 index 0000000000..b133d742a1 --- /dev/null +++ b/docs/IMAGE_SIZING.md @@ -0,0 +1,51 @@ +# Image sizing in MDX content + +## TL;DR + +If a screenshot looks comically large (portrait images rendered as tall towers, small images blown up to full content width), add `style="width:auto;"` to the `` tag: + +```mdx +... +``` + +## Why this is needed + +The shared `igniteui-astro-components` design system applies a global CSS rule to every `` inside the markdown content area: + +```scss +// node_modules/igniteui-astro-components/src/styles/global/_markdown.scss +.igd-main-content__markdown img { + display: block; + max-width: 100%; + width: 100%; // ← stretches every image to the content column width + height: auto; // ← height is recomputed from the intrinsic aspect ratio + object-fit: cover; + ... +} +``` + +`width: 100%` makes the browser ignore the image's intrinsic width and stretch it to fill the article column. `height: auto` then recomputes the height from the intrinsic aspect ratio. For wide landscape screenshots (e.g. 1008×504) this looks fine — they were going to fill the column anyway. For **portrait** or **small-width** images, it produces an enormous render: + +| Native size | Aspect | Rendered in a ~900px column | +|---|---|---| +| 378 × 597 (portrait) | 0.63 | ~900 × **1420** — a giant tower | +| 236 × 206 (tiny) | 1.15 | ~900 × **786** — pixelated and huge | +| 626 × 1107 (tall) | 0.57 | ~900 × **1591** — fills the screen | + +## The override + +Just `width: auto` is enough. It cancels the global `width: 100%`, which restores the intrinsic width attribute Astro emits on the `` (so the image renders at its natural pixel size instead of stretched). The global `height: auto` is then a no-op — the height matches the intrinsic too. `object-fit: cover` from the global rule is already a no-op without an explicit height, so it does not need to be overridden. + +The global `max-width: 100%` still applies, so the image will shrink responsively if the viewport is narrower than the image — you do not lose that behavior by overriding only `width`. + +Inline `style=` wins over the global selector by specificity, so no `!important` is needed. + +## When to apply it + +Rule of thumb: apply the override if the source asset is **portrait** (height > width) or **narrow** (width < ~600px). For typical wide landscape screenshots, leave the default — `width: 100%` is what you want there. + +If you're unsure, check the asset's pixel dimensions before importing. Wide screenshots like 1008×504 do not need the override. + +## Owning the fix upstream + +The proper long-term fix is to change the upstream rule in `igniteui-astro-components` to drop `width: 100%` (and ideally `object-fit: cover`, which is a no-op without an explicit height and is misleading). Until then, this inline override is the per-image escape hatch. diff --git a/docs/xplat/src/content/en/components/general-getting-started-blazor-client.mdx b/docs/xplat/src/content/en/components/general-getting-started-blazor-client.mdx index 476b499340..5791b710e7 100644 --- a/docs/xplat/src/content/en/components/general-getting-started-blazor-client.mdx +++ b/docs/xplat/src/content/en/components/general-getting-started-blazor-client.mdx @@ -139,4 +139,4 @@ Add an Ignite UI for Blazor component to your razor page: Build and run the Blazor app. -getting-started-blazor-card +getting-started-blazor-card diff --git a/docs/xplat/src/content/en/components/general-getting-started-blazor-maui.mdx b/docs/xplat/src/content/en/components/general-getting-started-blazor-maui.mdx index 6beef161aa..b86d208e72 100644 --- a/docs/xplat/src/content/en/components/general-getting-started-blazor-maui.mdx +++ b/docs/xplat/src/content/en/components/general-getting-started-blazor-maui.mdx @@ -140,7 +140,7 @@ Add an Ignite UI for Blazor component to your razor page: Build and run the .NET MAUI Blazor app for Windows. -getting-started-blazor-card-windows +getting-started-blazor-card-windows For more information about building cross-platform applications with .NET MAUI, visit the [Microsoft Documentation](https://docs.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-android). diff --git a/docs/xplat/src/content/en/components/general-getting-started-blazor-web-app.mdx b/docs/xplat/src/content/en/components/general-getting-started-blazor-web-app.mdx index edf7c7f724..c196f1e753 100644 --- a/docs/xplat/src/content/en/components/general-getting-started-blazor-web-app.mdx +++ b/docs/xplat/src/content/en/components/general-getting-started-blazor-web-app.mdx @@ -157,4 +157,4 @@ Add an Ignite UI for Blazor component to your razor page (Please note that Ignit Build and run the Blazor app. -getting-started-blazor-card +getting-started-blazor-card diff --git a/docs/xplat/src/content/en/components/general-getting-started.mdx b/docs/xplat/src/content/en/components/general-getting-started.mdx index 5d58d1f5b2..6094f054f1 100644 --- a/docs/xplat/src/content/en/components/general-getting-started.mdx +++ b/docs/xplat/src/content/en/components/general-getting-started.mdx @@ -50,7 +50,7 @@ import gettingStartedBlazorCard from '@xplat-images/general/getting-started-blaz
- nodejs + nodejs DOWNLOAD NODE
@@ -675,7 +675,7 @@ Add an Ignite UI for Blazor component to your razor page: Build and run the Blazor app. -getting-started-blazor-card +getting-started-blazor-card From 0aa2fb10fe2b74b9dce020c4309633e1c818a120 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 28 May 2026 10:52:17 +0300 Subject: [PATCH 2/4] chore: remove IMAGE_SIZING.md --- docs/IMAGE_SIZING.md | 51 ------------------- .../jp/components/general/getting-started.mdx | 2 +- .../content/en/components/nextjs-usage.mdx | 2 +- .../jp/components/general-getting-started.mdx | 2 +- .../content/jp/components/nextjs-usage.mdx | 2 +- 5 files changed, 4 insertions(+), 55 deletions(-) delete mode 100644 docs/IMAGE_SIZING.md diff --git a/docs/IMAGE_SIZING.md b/docs/IMAGE_SIZING.md deleted file mode 100644 index b133d742a1..0000000000 --- a/docs/IMAGE_SIZING.md +++ /dev/null @@ -1,51 +0,0 @@ -# Image sizing in MDX content - -## TL;DR - -If a screenshot looks comically large (portrait images rendered as tall towers, small images blown up to full content width), add `style="width:auto;"` to the `` tag: - -```mdx -... -``` - -## Why this is needed - -The shared `igniteui-astro-components` design system applies a global CSS rule to every `` inside the markdown content area: - -```scss -// node_modules/igniteui-astro-components/src/styles/global/_markdown.scss -.igd-main-content__markdown img { - display: block; - max-width: 100%; - width: 100%; // ← stretches every image to the content column width - height: auto; // ← height is recomputed from the intrinsic aspect ratio - object-fit: cover; - ... -} -``` - -`width: 100%` makes the browser ignore the image's intrinsic width and stretch it to fill the article column. `height: auto` then recomputes the height from the intrinsic aspect ratio. For wide landscape screenshots (e.g. 1008×504) this looks fine — they were going to fill the column anyway. For **portrait** or **small-width** images, it produces an enormous render: - -| Native size | Aspect | Rendered in a ~900px column | -|---|---|---| -| 378 × 597 (portrait) | 0.63 | ~900 × **1420** — a giant tower | -| 236 × 206 (tiny) | 1.15 | ~900 × **786** — pixelated and huge | -| 626 × 1107 (tall) | 0.57 | ~900 × **1591** — fills the screen | - -## The override - -Just `width: auto` is enough. It cancels the global `width: 100%`, which restores the intrinsic width attribute Astro emits on the `` (so the image renders at its natural pixel size instead of stretched). The global `height: auto` is then a no-op — the height matches the intrinsic too. `object-fit: cover` from the global rule is already a no-op without an explicit height, so it does not need to be overridden. - -The global `max-width: 100%` still applies, so the image will shrink responsively if the viewport is narrower than the image — you do not lose that behavior by overriding only `width`. - -Inline `style=` wins over the global selector by specificity, so no `!important` is needed. - -## When to apply it - -Rule of thumb: apply the override if the source asset is **portrait** (height > width) or **narrow** (width < ~600px). For typical wide landscape screenshots, leave the default — `width: 100%` is what you want there. - -If you're unsure, check the asset's pixel dimensions before importing. Wide screenshots like 1008×504 do not need the override. - -## Owning the fix upstream - -The proper long-term fix is to change the upstream rule in `igniteui-astro-components` to drop `width: 100%` (and ideally `object-fit: cover`, which is a no-op without an explicit height and is misleading). Until then, this inline override is the per-image escape hatch. diff --git a/docs/angular/src/content/jp/components/general/getting-started.mdx b/docs/angular/src/content/jp/components/general/getting-started.mdx index 268df17f13..dcd21ac7ba 100644 --- a/docs/angular/src/content/jp/components/general/getting-started.mdx +++ b/docs/angular/src/content/jp/components/general/getting-started.mdx @@ -26,7 +26,7 @@ Ignite UI for Angular はデュアルライセンス モデルで提供され、
diff --git a/docs/xplat/src/content/en/components/nextjs-usage.mdx b/docs/xplat/src/content/en/components/nextjs-usage.mdx index cd29aa8df7..a981af4c2d 100644 --- a/docs/xplat/src/content/en/components/nextjs-usage.mdx +++ b/docs/xplat/src/content/en/components/nextjs-usage.mdx @@ -24,7 +24,7 @@ Explore the seamless integration of {ProductName} into your Next.js project. Thi
diff --git a/docs/xplat/src/content/jp/components/general-getting-started.mdx b/docs/xplat/src/content/jp/components/general-getting-started.mdx index c7b3310a97..c65ad906b7 100644 --- a/docs/xplat/src/content/jp/components/general-getting-started.mdx +++ b/docs/xplat/src/content/jp/components/general-getting-started.mdx @@ -39,7 +39,7 @@ import gettingStartedBlazorCard from '@xplat-images/general/getting-started-blaz
diff --git a/docs/xplat/src/content/jp/components/nextjs-usage.mdx b/docs/xplat/src/content/jp/components/nextjs-usage.mdx index b811d7c5ac..fb1ff36dcf 100644 --- a/docs/xplat/src/content/jp/components/nextjs-usage.mdx +++ b/docs/xplat/src/content/jp/components/nextjs-usage.mdx @@ -26,7 +26,7 @@ import geoMap from '@xplat-images/general/geo-map.png';
From ada7ca8cf48d32f476d877ab8683e9a4532a0289 Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 28 May 2026 11:01:41 +0300 Subject: [PATCH 3/4] fix(xplat): apply Blazor card image width override to JP pages Mirror the EN-side width:auto inline override on the four JP equivalents so the Blazor card screenshot renders at intrinsic size on the Japanese documentation as well. --- .../jp/components/general-getting-started-blazor-client.mdx | 2 +- .../jp/components/general-getting-started-blazor-maui.mdx | 2 +- .../jp/components/general-getting-started-blazor-web-app.mdx | 2 +- .../xplat/src/content/jp/components/general-getting-started.mdx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/xplat/src/content/jp/components/general-getting-started-blazor-client.mdx b/docs/xplat/src/content/jp/components/general-getting-started-blazor-client.mdx index fd1acfdac1..b4740d294b 100644 --- a/docs/xplat/src/content/jp/components/general-getting-started-blazor-client.mdx +++ b/docs/xplat/src/content/jp/components/general-getting-started-blazor-client.mdx @@ -141,4 +141,4 @@ Razor ページに Ignite UI for Blazor コンポーネントの追加: Blazor アプリをビルドして実行します。 -getting-started-blazor-card +getting-started-blazor-card diff --git a/docs/xplat/src/content/jp/components/general-getting-started-blazor-maui.mdx b/docs/xplat/src/content/jp/components/general-getting-started-blazor-maui.mdx index e8d2303829..329e94839d 100644 --- a/docs/xplat/src/content/jp/components/general-getting-started-blazor-maui.mdx +++ b/docs/xplat/src/content/jp/components/general-getting-started-blazor-maui.mdx @@ -142,7 +142,7 @@ Razor ページに Ignite UI for Blazor コンポーネントの追加: Windows 用の .NET MAUI Blazor アプリをビルドして実行します。 -getting-started-blazor-card-windows +getting-started-blazor-card-windows .NET MAUI を使用したクロス プラットフォーム アプリケーションの構築の詳細については、[Microsoft のドキュメント](https://docs.microsoft.com/ja-jp/dotnet/maui/get-started/first-app?pivots=devices-android)を参照してください。 diff --git a/docs/xplat/src/content/jp/components/general-getting-started-blazor-web-app.mdx b/docs/xplat/src/content/jp/components/general-getting-started-blazor-web-app.mdx index bb8650f789..07b5be954b 100644 --- a/docs/xplat/src/content/jp/components/general-getting-started-blazor-web-app.mdx +++ b/docs/xplat/src/content/jp/components/general-getting-started-blazor-web-app.mdx @@ -159,4 +159,4 @@ Razor ページに Ignite UI for Blazor コンポーネントを追加します Blazor アプリをビルドして実行します。 -getting-started-blazor-card +getting-started-blazor-card diff --git a/docs/xplat/src/content/jp/components/general-getting-started.mdx b/docs/xplat/src/content/jp/components/general-getting-started.mdx index c65ad906b7..fde64585f9 100644 --- a/docs/xplat/src/content/jp/components/general-getting-started.mdx +++ b/docs/xplat/src/content/jp/components/general-getting-started.mdx @@ -596,6 +596,6 @@ Razor ページに Ignite UI for Blazor コンポーネントの追加: Blazor アプリケーションをビルドして実行します。 -getting-started-blazor-card +getting-started-blazor-card From a4b4d17d87f195af4004de98bfaa3a1e8ab9cb7d Mon Sep 17 00:00:00 2001 From: Arkan Ahmedov Date: Thu, 28 May 2026 11:26:29 +0300 Subject: [PATCH 4/4] fix(xplat,angular): apply width:auto to wc-project and layout_mode images The 236x206 wc-project screenshot (web-components getting-started) and the 626x1107 layout_mode screenshot (chart data legend / tooltip pages) both hit the global width:100% rule and render way larger than their intrinsic size. Adds the same inline width:auto override on every EN/JP instance across xplat and angular. --- .../en/components/charts/features/chart-data-legend.mdx | 2 +- .../en/components/charts/features/chart-data-tooltip.mdx | 2 +- .../jp/components/charts/features/chart-data-legend.mdx | 2 +- .../jp/components/charts/features/chart-data-tooltip.mdx | 4 ++-- .../en/components/charts/features/chart-data-legend.mdx | 2 +- .../en/components/charts/features/chart-data-tooltip.mdx | 2 +- .../src/content/en/components/general-getting-started.mdx | 2 +- .../jp/components/charts/features/chart-data-legend.mdx | 2 +- .../jp/components/charts/features/chart-data-tooltip.mdx | 4 ++-- .../src/content/jp/components/general-getting-started.mdx | 2 +- 10 files changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-legend.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-legend.mdx index ba7adf0c1e..3704c3cc45 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-data-legend.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-data-legend.mdx @@ -96,7 +96,7 @@ Legend items can be positioned in a vertical or table structure via the +Layout Mode ## Angular Data Legend Styling diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-tooltip.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-tooltip.mdx index 7694cfd55e..ef3d40cef1 100644 --- a/docs/angular/src/content/en/components/charts/features/chart-data-tooltip.mdx +++ b/docs/angular/src/content/en/components/charts/features/chart-data-tooltip.mdx @@ -123,7 +123,7 @@ Legend items can be positioned in a vertical or table structure via the +Layout Mode ## Angular Data Tooltip Styling diff --git a/docs/angular/src/content/jp/components/charts/features/chart-data-legend.mdx b/docs/angular/src/content/jp/components/charts/features/chart-data-legend.mdx index 8d16b153bc..ec5b14a5ef 100644 --- a/docs/angular/src/content/jp/components/charts/features/chart-data-legend.mdx +++ b/docs/angular/src/content/jp/components/charts/features/chart-data-legend.mdx @@ -98,7 +98,7 @@ OHLC 価格の **TypicalPrice** (標準価格) とパーセンテージの **Cha 例: -Layout Mode +Layout Mode ## Angular データ凡例のスタイル設定 diff --git a/docs/angular/src/content/jp/components/charts/features/chart-data-tooltip.mdx b/docs/angular/src/content/jp/components/charts/features/chart-data-tooltip.mdx index 964d1d4804..f84cadecbd 100644 --- a/docs/angular/src/content/jp/components/charts/features/chart-data-tooltip.mdx +++ b/docs/angular/src/content/jp/components/charts/features/chart-data-tooltip.mdx @@ -127,9 +127,9 @@ Ignite UI for Angular では、**DataToolTip** は、シリーズの値とタイ 凡例項目は、 プロパティを使って垂直または表形式の構造に配置できます。デフォルト値は `Table` で、以前のリリースと同じ外観と操作性を維持します。 例: -Layout Mode +Layout Mode -Layout Mode +Layout Mode ## Angular データ ツールチップのスタイル設定 diff --git a/docs/xplat/src/content/en/components/charts/features/chart-data-legend.mdx b/docs/xplat/src/content/en/components/charts/features/chart-data-legend.mdx index 15b3577f4e..94f9f5504d 100644 --- a/docs/xplat/src/content/en/components/charts/features/chart-data-legend.mdx +++ b/docs/xplat/src/content/en/components/charts/features/chart-data-legend.mdx @@ -96,7 +96,7 @@ Legend items can be positioned in a vertical or table structure via the +Layout Mode ## {Platform} Data Legend Styling diff --git a/docs/xplat/src/content/en/components/charts/features/chart-data-tooltip.mdx b/docs/xplat/src/content/en/components/charts/features/chart-data-tooltip.mdx index 4ae0ccfda9..96f7222561 100644 --- a/docs/xplat/src/content/en/components/charts/features/chart-data-tooltip.mdx +++ b/docs/xplat/src/content/en/components/charts/features/chart-data-tooltip.mdx @@ -123,7 +123,7 @@ Legend items can be positioned in a vertical or table structure via the +Layout Mode ## {Platform} Data Tooltip Styling diff --git a/docs/xplat/src/content/en/components/general-getting-started.mdx b/docs/xplat/src/content/en/components/general-getting-started.mdx index 6094f054f1..91be6173b3 100644 --- a/docs/xplat/src/content/en/components/general-getting-started.mdx +++ b/docs/xplat/src/content/en/components/general-getting-started.mdx @@ -317,7 +317,7 @@ code . 7 - Create a new folder named **src**, and within that folder create a new file named **index.js**. Your project structure should look like this: -wc-project +wc-project 8 - Update the **package.json** file to include a build script using **webpack** diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-data-legend.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-data-legend.mdx index fd91656ece..e950b16482 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-data-legend.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-data-legend.mdx @@ -98,7 +98,7 @@ OHLC 価格の **TypicalPrice** (標準価格) とパーセンテージの **Cha 例: -Layout Mode +Layout Mode ## {Platform} データ凡例のスタイル設定 diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-data-tooltip.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-data-tooltip.mdx index 76c498040a..4f085805bd 100644 --- a/docs/xplat/src/content/jp/components/charts/features/chart-data-tooltip.mdx +++ b/docs/xplat/src/content/jp/components/charts/features/chart-data-tooltip.mdx @@ -127,9 +127,9 @@ import layoutMode from '@xplat-images/general/layout_mode.png'; 凡例項目は、 プロパティを使って垂直または表形式の構造に配置できます。デフォルト値は `Table` で、以前のリリースと同じ外観と操作性を維持します。 例: -Layout Mode +Layout Mode -Layout Mode +Layout Mode ## {Platform} データ ツールチップのスタイル設定 diff --git a/docs/xplat/src/content/jp/components/general-getting-started.mdx b/docs/xplat/src/content/jp/components/general-getting-started.mdx index fde64585f9..c901bbc57e 100644 --- a/docs/xplat/src/content/jp/components/general-getting-started.mdx +++ b/docs/xplat/src/content/jp/components/general-getting-started.mdx @@ -287,7 +287,7 @@ code . 7 - **src** という名前の新しいフォルダーを作成し、そのフォルダー内に **index.js** という名前の新しいファイルを作成します。プロジェクト構造は以下のようになります。 -wc-project +wc-project 8 - **package.json** ファイルを、**webpack** を使用してビルド スクリプトを含めるよう変更します。