Visal docs tweak (#7264)

docs/astro/src/content/docs/index.mdx

@@ -23,7 +23,7 @@ import LineHighlight from '/src/assets/getting-started/line-highlight.webp';
 
 
 <div style="display: flex; justify-content: center;">
-  <Image src={BannerImage} width="700px" alt="Slint examples running on a range of devices"/>
+  <Image src={BannerImage} style={{width: "700px"}} width="1200px" alt="Slint examples running on a range of devices"/>
 </div>
 
 The documentation is split into several sections:
@@ -67,25 +67,25 @@ href={`${import.meta.env.BASE_URL}/language-integrations/`}
 The documentation includes a lot of code snippets. The language hint lets you know what
 language the snippet is written in.
 <div style="display: flex; justify-content: left;">
-<Image src={LanguageHint} width="500" alt="Screenshot showing language hint" />
+<Image src={LanguageHint} style={{width: "500px"}} alt="Screenshot showing language hint" />
 </div>
 
 
 Some snippets of Slint code are interactive. You can click the `run` button to run the snippet
 in a web based live-editing tool called [SlintPad](https://slintpad.com).
 <div style="display: flex; justify-content: left;">
-<Image src={RunInSlintPad} width="500" alt="Screenshot showing run button"  />
+<Image src={RunInSlintPad} style={{width: "500px"}} alt="Screenshot showing run button"  />
 </div>
 
 To easily copy the text of a snippet use the copy button.
 <div style="display: flex; justify-content: left;">
-<Image src={CopySnippet} width="500" alt="Screenshot showing copy button"  />
+<Image src={CopySnippet} style={{width: "500px"}} alt="Screenshot showing copy button"  />
 </div>
 
 Examples that want to help focus on a specific part of the code will have highlights. They are only
 a documentation feature and you won't see this kind of highlight when writing your own code.
 <div style="display: flex; justify-content: left;">
-<Image src={LineHighlight} width="500" alt="Screenshot showing text highlights" />
+<Image src={LineHighlight} style={{width: "500px"}} alt="Screenshot showing text highlights" />
 </div>
 
 ### Get in touch

docs/astro/src/content/docs/tutorial/creating_the_tiles.mdx

@@ -58,7 +58,7 @@ import mainTilesFromRust from '/src/content/code/main_tiles_from_rust.rs?raw'
 
   </TabItem>
 </Tabs>
-{/* 
+
 
 The code takes the list of tiles, duplicates it, and shuffles it, accessing the `memory_tiles` property through the Rust code.
 
@@ -70,13 +70,10 @@ You can't change the model generated by Slint, but you can extract the tiles fro
 in a [`VecModel`](https://slint.dev/docs/rust/slint/struct.VecModel) which implements the `Model` trait.
 `VecModel` lets you make changes and you can use it to replace the static generated model.
 
-::::
-
-:::::
 
 Running this code opens a window that now shows a 4 by 4 grid of rectangles, which show or hide
 the icons when a player clicks on them.
 
 There's one last aspect missing now, the rules for the game.
 
-<video autoplay loop muted playsinline src="https://slint.dev/blog/memory-game-tutorial/creating-the-tiles-from-rust.mp4"></video> */}
+<video autoplay loop muted playsinline src="https://slint.dev/blog/memory-game-tutorial/creating-the-tiles-from-rust.mp4"></video>