From 00ec1d78dcf3950b6703827aa46fa209fe3c5e4e Mon Sep 17 00:00:00 2001
From: Nigel Breslaw <nigel.breslaw@slint.dev>
Date: Tue, 21 Jan 2025 15:46:11 +0200
Subject: [PATCH] Fix opacity snippet

---
 .../src/content/docs/reference/common.mdx     | 36 ++++++++++---------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/docs/astro/src/content/docs/reference/common.mdx b/docs/astro/src/content/docs/reference/common.mdx
index 79b54fc460a..b7bd217b9c4 100644
--- a/docs/astro/src/content/docs/reference/common.mdx
+++ b/docs/astro/src/content/docs/reference/common.mdx
@@ -58,24 +58,26 @@ When set to `false`, the element and all his children won't be drawn and not rea
 will still take up layout space within any layout container.
 
 The following example demonstrates the `opacity` property with children. An opacity is applied to the red rectangle. Since the green rectangle is a child of the red one, you can see the gradient underneath it, but you can't see the red rectangle through the green one.
-<CodeSnippetMD imagePath="/src/assets/generated/rectangle-opacity.png"  imageWidth="200" imageHeight="200"  imageAlt='rectangle opacity'>
+<CodeSnippetMD imagePath="/src/assets/generated/rectangle-opacity.png" scale="3" imageWidth="100" imageHeight="100"  imageAlt='rectangle opacity'>
 ```slint
-Rectangle {
-    x: 10px;
-    y: 10px;
-    width: 180px;
-    height: 180px;
-    background: #315afd;
-    opacity: 0.5;
-}
-
-Rectangle {
-    x: 10px;
-    y: 210px;
-    width: 180px;
-    height: 180px;
-    background: green;
-    opacity: 0.5;
+export component Example inherits Window {
+    width: 100px;
+    height: 100px;
+    Rectangle {
+        opacity: 0.5;
+        background: red;
+        border-color: #822;
+        border-width: 5px;
+        width: 50px; height: 50px;
+        x: 10px; y: 10px;
+        Rectangle {
+            background: green;
+            border-color: #050;
+            border-width: 5px;
+            width: 50px; height: 50px;
+            x: 25px; y: 25px;
+        }
+    }
 }
 ```
 </CodeSnippetMD>