Fix: Copy button functionality and Add: Fixed height with scrollbar for story content

Author: Matteo-it

examples/bedtime-story-teller/assets/app.js

@@ -444,19 +444,26 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     document.getElementById('copy-story-button').addEventListener('click', () => {
-        const storyText = document.getElementById('story-response').textContent;
-        navigator.clipboard.writeText(storyText).then(() => {
-            const copyButton = document.getElementById('copy-story-button');
-            const originalHTML = copyButton.innerHTML;
+        const storyText = document.getElementById('story-response').innerText;
+        const copyButton = document.getElementById('copy-story-button');
+        const originalHTML = copyButton.innerHTML;
+        const textarea = document.createElement('textarea');
+        textarea.value = storyText;
+        document.body.appendChild(textarea);
+        textarea.select();
+        try {
+            document.execCommand('copy');
             copyButton.textContent = 'Copied!';
             copyButton.disabled = true;
-            setTimeout(() => {
-                copyButton.innerHTML = originalHTML;
-                copyButton.disabled = false;
-            }, 2000);
-        }, (err) => {
+        } catch (err) {
             console.error('Could not copy text: ', err);
-        });
+        }
+        document.body.removeChild(textarea);
+
+        setTimeout(() => {
+            copyButton.innerHTML = originalHTML;
+            copyButton.disabled = false;
+        }, 2000);
     });
 
     document.getElementById('generate-randomly-button').addEventListener('click', () => {

examples/bedtime-story-teller/assets/style.css

@@ -639,6 +639,7 @@ body {
     line-height: 1.6;
     white-space: pre-wrap;
     overflow-y: auto;
+    max-height: 60vh; /* Added for fixed height and scrollbar */
 }
 
 #prompt-display strong {