Fixed Lab 2

src/components/labs/LabContent.tsx

@@ -120,6 +120,51 @@ function ensureCopyButton(pre: HTMLPreElement, label: string) {
   pre.appendChild(copyButton);
 }
 
+async function copyTextToClipboard(text: string) {
+  if (window.isSecureContext && navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+    return;
+  }
+
+  const activeElement = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  const selection = document.getSelection();
+  const previousRanges =
+    selection && selection.rangeCount > 0
+      ? Array.from({ length: selection.rangeCount }, (_, index) => selection.getRangeAt(index).cloneRange())
+      : [];
+
+  const textarea = document.createElement("textarea");
+  textarea.value = text;
+  textarea.setAttribute("readonly", "");
+  textarea.setAttribute("aria-hidden", "true");
+  textarea.style.position = "fixed";
+  textarea.style.top = "0";
+  textarea.style.left = "-9999px";
+  textarea.style.opacity = "0";
+  textarea.style.pointerEvents = "none";
+
+  document.body.appendChild(textarea);
+  textarea.focus();
+  textarea.select();
+  textarea.setSelectionRange(0, textarea.value.length);
+
+  try {
+    const didCopy = document.execCommand("copy");
+    if (!didCopy) {
+      throw new Error("Copy command was rejected");
+    }
+  } finally {
+    document.body.removeChild(textarea);
+    if (selection) {
+      selection.removeAllRanges();
+      for (const range of previousRanges) {
+        selection.addRange(range);
+      }
+    }
+    activeElement?.focus();
+  }
+}
+
 export function LabContent({ className, html }: LabContentProps) {
   const containerRef = useRef<HTMLElement>(null);
   const [zoomedImage, setZoomedImage] = useState<ZoomedImageState | null>(null);
@@ -158,7 +203,7 @@ export function LabContent({ className, html }: LabContentProps) {
         if (!commandText) return;
         const defaultLabel = button.dataset.defaultLabel ?? "Copy";
 
-        void navigator.clipboard.writeText(commandText).then(() => {
+        void copyTextToClipboard(commandText).then(() => {
           button.textContent = "Copied";
           button.classList.add("is-copied");
           window.setTimeout(() => {

src/styles/globals.css

@@ -249,13 +249,13 @@ ol {
 .lab-content pre.lab-cli-shell {
   position: relative;
   margin: 1rem 0;
-  padding: 1rem 1rem 0.85rem;
+  padding: 0.9rem 1rem 0.85rem;
   border: 1px solid #c8d9e8;
   border-left: 5px solid #004e78;
   border-radius: 10px;
   background: #f4f9ff;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
-  overflow: auto;
+  overflow: hidden;
 }
 
 .lab-content pre.lab-cli-shell::before {
@@ -271,7 +271,9 @@ ol {
 
 .lab-content pre.lab-cli-shell code {
   display: block;
-  margin-top: 0.45rem;
+  margin-top: 1.1rem;
+  overflow-x: auto;
+  overflow-y: hidden;
   font-size: 0.9rem;
   line-height: 1.38;
 }
@@ -280,6 +282,7 @@ ol {
   position: absolute;
   top: 0.36rem;
   right: 0.4rem;
+  z-index: 1;
   border: 1px solid #c3d4e5;
   border-radius: 8px;
   background: #ffffff;
@@ -304,13 +307,13 @@ ol {
 .lab-content pre.lab-prompt-card {
   position: relative;
   margin: 1rem 0;
-  padding: 1rem 1rem 0.92rem;
+  padding: 0.92rem 1rem 0.92rem;
   border: 1px solid #d7c7a7;
   border-left: 5px solid #b77400;
   border-radius: 10px;
   background: #fffaf2;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
-  overflow: auto;
+  overflow: hidden;
 }
 
 .lab-content pre.lab-prompt-card::before {
@@ -326,7 +329,9 @@ ol {
 
 .lab-content pre.lab-prompt-card code {
   display: block;
-  margin-top: 0.82rem;
+  margin-top: 1.15rem;
+  overflow-x: auto;
+  overflow-y: hidden;
   font-size: 0.9rem;
   line-height: 1.4;
   white-space: pre-wrap;
@@ -336,6 +341,7 @@ ol {
   position: absolute;
   top: 0.34rem;
   right: 0.4rem;
+  z-index: 1;
   border: 1px solid #9b5a00;
   border-radius: 999px;
   background: linear-gradient(180deg, #ffd18d, #f3a743);