From 8f225a76ee9f60a22c6861ff7f7a145d794db865 Mon Sep 17 00:00:00 2001
From: Sudev Kiyada <sudev.kiyada@thomsonreuters.com>
Date: Mon, 12 Jan 2026 14:31:38 +0530
Subject: [PATCH] tweaks height for ScrollerBase example

---
 src/components/Lottie/Lottie.mdx                   | 4 ++--
 src/components/Lottie/demo/withScrollerBase.svelte | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Lottie/Lottie.mdx b/src/components/Lottie/Lottie.mdx
index b574640f..6c0029bf 100644
--- a/src/components/Lottie/Lottie.mdx
+++ b/src/components/Lottie/Lottie.mdx
@@ -198,7 +198,7 @@ You can set multiple themes and switch between them dynamically -- for example,
 <Lottie
   src={MyLottie}
   bind:progress
-  themeId={progress < 0.33 ? 'water'
+  themeId={progress < 0.33 ? 'Water'
   : progress < 0.66 ? 'air'
   : 'earth'}
   autoplay
@@ -222,7 +222,7 @@ The `Lottie` component can be used with the `ScrollerBase` component to create a
 <ScrollerBase bind:progress query="div.step-foreground-container">
   {#snippet backgroundSnippet()}
     <!-- Pass bindable prop `progress` as `progress` -->
-    <Lottie src={MyLottie} {progress} showDebugInfo />
+    <Lottie src={MyLottie} {progress} height="100lvh" showDebugInfo />
   {/snippet}
   {#snippet foregroundSnippet()}
     <div class="step-foreground-container">
diff --git a/src/components/Lottie/demo/withScrollerBase.svelte b/src/components/Lottie/demo/withScrollerBase.svelte
index 5b792e89..483626d1 100644
--- a/src/components/Lottie/demo/withScrollerBase.svelte
+++ b/src/components/Lottie/demo/withScrollerBase.svelte
@@ -31,7 +31,7 @@
   query="div.step-foreground-container"
 >
   {#snippet backgroundSnippet()}
-    <Lottie src={LottieSample} {progress} showDebugInfo />
+    <Lottie src={LottieSample} {progress} height="100lvh" showDebugInfo />
   {/snippet}
   {#snippet foregroundSnippet()}
     <div class="step-foreground-container"><h3>Step 1</h3></div>