From 43a7daf810aefbcaa731383fc87b1e8d67dc0f41 Mon Sep 17 00:00:00 2001
From: a8trejo <abel.trejo@roo.vet>
Date: Wed, 5 Mar 2025 20:33:54 -0800
Subject: [PATCH 1/4] Working draft in cypress cloud

---
 package-lock.json                | 176 ++++++++++++++++++++++++++++++-
 package.json                     |   3 +-
 src/components/CodeBlock.vue     |  19 +++-
 src/components/RequestPanel.vue  |  15 ++-
 src/components/ResponsePanel.vue |  15 ++-
 src/components/TitlePanel.vue    |  43 ++++++--
 6 files changed, 254 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d3e2062..3cd3099 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,7 +39,8 @@
         "standard-version": "^9.5.0",
         "tailwindcss": "^3.1.8",
         "typescript": "4.5.4",
-        "vite": "^3.1.4"
+        "vite": "^3.1.4",
+        "yalc": "^1.0.0-pre.53"
       },
       "peerDependencies": {
         "cypress": ">=10"
@@ -5014,6 +5015,15 @@
         "node": ">= 4"
       }
     },
+    "node_modules/ignore-walk": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.4.tgz",
+      "integrity": "sha512-PY6Ii8o1jMRA1z4F2hRkH/xN59ox43DavKvD3oDpfurRlOJyAHpifIwpbdv1n4jt4ov0jSpw3kQ4GhJnpBL6WQ==",
+      "dev": true,
+      "dependencies": {
+        "minimatch": "^3.0.4"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -6290,6 +6300,39 @@
         "node": "^12.13.0 || ^14.15.0 || >=16"
       }
     },
+    "node_modules/npm-bundled": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.2.tgz",
+      "integrity": "sha512-x5DHup0SuyQcmL3s7Rx/YQ8sbw/Hzg0rj48eN0dV7hf5cmQq5PXIeioroH3raV1QC1yh3uTYuMThvEQF3iKgGQ==",
+      "dev": true,
+      "dependencies": {
+        "npm-normalize-package-bin": "^1.0.1"
+      }
+    },
+    "node_modules/npm-normalize-package-bin": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz",
+      "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==",
+      "dev": true
+    },
+    "node_modules/npm-packlist": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-2.2.2.tgz",
+      "integrity": "sha512-Jt01acDvJRhJGthnUJVF/w6gumWOZxO7IkpY/lsX9//zqQgnF7OJaxgQXcerd4uQOLu7W5bkb4mChL9mdfm+Zg==",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.6",
+        "ignore-walk": "^3.0.3",
+        "npm-bundled": "^1.1.1",
+        "npm-normalize-package-bin": "^1.0.1"
+      },
+      "bin": {
+        "npm-packlist": "bin/index.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -11404,6 +11447,57 @@
         "node": ">=10"
       }
     },
+    "node_modules/yalc": {
+      "version": "1.0.0-pre.53",
+      "resolved": "https://registry.npmjs.org/yalc/-/yalc-1.0.0-pre.53.tgz",
+      "integrity": "sha512-tpNqBCpTXplnduzw5XC+FF8zNJ9L/UXmvQyyQj7NKrDNavbJtHvzmZplL5ES/RCnjX7JR7W9wz5GVDXVP3dHUQ==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.0",
+        "detect-indent": "^6.0.0",
+        "fs-extra": "^8.0.1",
+        "glob": "^7.1.4",
+        "ignore": "^5.0.4",
+        "ini": "^2.0.0",
+        "npm-packlist": "^2.1.5",
+        "yargs": "^16.1.1"
+      },
+      "bin": {
+        "yalc": "src/yalc.js"
+      }
+    },
+    "node_modules/yalc/node_modules/fs-extra": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^4.0.0",
+        "universalify": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=6 <7 || >=8"
+      }
+    },
+    "node_modules/yalc/node_modules/jsonfile": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+      "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+      "dev": true,
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/yalc/node_modules/universalify": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.0.0"
+      }
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -15225,6 +15319,15 @@
       "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
       "dev": true
     },
+    "ignore-walk": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.4.tgz",
+      "integrity": "sha512-PY6Ii8o1jMRA1z4F2hRkH/xN59ox43DavKvD3oDpfurRlOJyAHpifIwpbdv1n4jt4ov0jSpw3kQ4GhJnpBL6WQ==",
+      "dev": true,
+      "requires": {
+        "minimatch": "^3.0.4"
+      }
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -17841,6 +17944,33 @@
         }
       }
     },
+    "npm-bundled": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.2.tgz",
+      "integrity": "sha512-x5DHup0SuyQcmL3s7Rx/YQ8sbw/Hzg0rj48eN0dV7hf5cmQq5PXIeioroH3raV1QC1yh3uTYuMThvEQF3iKgGQ==",
+      "dev": true,
+      "requires": {
+        "npm-normalize-package-bin": "^1.0.1"
+      }
+    },
+    "npm-normalize-package-bin": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz",
+      "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==",
+      "dev": true
+    },
+    "npm-packlist": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-2.2.2.tgz",
+      "integrity": "sha512-Jt01acDvJRhJGthnUJVF/w6gumWOZxO7IkpY/lsX9//zqQgnF7OJaxgQXcerd4uQOLu7W5bkb4mChL9mdfm+Zg==",
+      "dev": true,
+      "requires": {
+        "glob": "^7.1.6",
+        "ignore-walk": "^3.0.3",
+        "npm-bundled": "^1.1.1",
+        "npm-normalize-package-bin": "^1.0.1"
+      }
+    },
     "npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -19850,6 +19980,50 @@
       "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
       "dev": true
     },
+    "yalc": {
+      "version": "1.0.0-pre.53",
+      "resolved": "https://registry.npmjs.org/yalc/-/yalc-1.0.0-pre.53.tgz",
+      "integrity": "sha512-tpNqBCpTXplnduzw5XC+FF8zNJ9L/UXmvQyyQj7NKrDNavbJtHvzmZplL5ES/RCnjX7JR7W9wz5GVDXVP3dHUQ==",
+      "dev": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "detect-indent": "^6.0.0",
+        "fs-extra": "^8.0.1",
+        "glob": "^7.1.4",
+        "ignore": "^5.0.4",
+        "ini": "^2.0.0",
+        "npm-packlist": "^2.1.5",
+        "yargs": "^16.1.1"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
+          "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        },
+        "jsonfile": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+          "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          }
+        },
+        "universalify": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
+          "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+          "dev": true
+        }
+      }
+    },
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
diff --git a/package.json b/package.json
index 2b475d2..8cb6a6e 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,8 @@
     "release": "standard-version",
     "release:minor": "standard-version --release-as minor",
     "release:patch": "standard-version --release-as patch",
-    "release:major": "standard-version --release-as major"
+    "release:major": "standard-version --release-as major",
+    "yalc:build": "npm run build && yalc publish"
   },
   "pre-commit": [
     "lint"
diff --git a/src/components/CodeBlock.vue b/src/components/CodeBlock.vue
index ceafa9e..14d1084 100644
--- a/src/components/CodeBlock.vue
+++ b/src/components/CodeBlock.vue
@@ -2,16 +2,18 @@
 <template>
   <div
     v-if="dataFormatted"
-    class="bg-cy-blue-darker"
+    class="bg-cy-blue-darker" style="display: block !important; visibility: visible !important; opacity: 1 !important;"
     :data-cy="selector"
   >
     <pre
-      class="hljs overflow-scroll no-scrollbar"
-      v-html="dataFormatted"
+      class="hljs overflow-scroll no-scrollbar" style="display: block !important; visibility: visible !important; opacity: 1 !important;"
+      v-html="dataFormatted" 
     />
   </div>
 </template>
 <script setup lang="ts">
+import { onMounted } from 'vue';
+
 defineProps({
   selector: {
     type: String
@@ -20,5 +22,14 @@ defineProps({
     default: '',
     type: String
   }
-})
+});
+
+// Force the component to be visible when mounted
+onMounted(() => {
+  // Make sure the code block is visible
+  setTimeout(() => {
+    const codeBlocks = document.querySelectorAll('pre.hljs');
+    codeBlocks.forEach(block => block.setAttribute('style', 'display: block !important; visibility: visible !important; opacity: 1 !important;'));
+  }, 50);
+});
 </script>
\ No newline at end of file
diff --git a/src/components/RequestPanel.vue b/src/components/RequestPanel.vue
index 04f12d9..5f0f164 100644
--- a/src/components/RequestPanel.vue
+++ b/src/components/RequestPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     data-cy="requestPanel"
-    class="col-span-1"
+    class="col-span-1" style="display: block !important; visibility: visible !important; opacity: 1 !important;"
   >
     <Title
       :method="item?.method"
@@ -97,6 +97,17 @@ defineProps({
   index: {
     type: [Number, String]
   }
-})
+});
+
+// Force the component to be visible when mounted
+import { onMounted } from 'vue';
+
+onMounted(() => {
+  // Make sure all CodeBlock components are visible
+  setTimeout(() => {
+    const panel = document.querySelector('[data-cy="requestPanel"]');
+    if (panel) panel.setAttribute('style', 'display: block !important; visibility: visible !important; opacity: 1 !important;');
+  }, 50);
+});
 
 </script>
\ No newline at end of file
diff --git a/src/components/ResponsePanel.vue b/src/components/ResponsePanel.vue
index a1c4ecf..9c6f123 100644
--- a/src/components/ResponsePanel.vue
+++ b/src/components/ResponsePanel.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     data-cy="responsePanel"
-    class="col-span-1"
+    class="col-span-1" style="display: block !important; visibility: visible !important; opacity: 1 !important;"
   >
     <Status
       :status="item?.status"
@@ -77,5 +77,16 @@ defineProps({
   index: {
     type: [Number, String]
   }
-})
+});
+
+// Force the component to be visible when mounted
+import { onMounted } from 'vue';
+
+onMounted(() => {
+  // Make sure all CodeBlock components are visible
+  setTimeout(() => {
+    const panel = document.querySelector('[data-cy="responsePanel"]');
+    if (panel) panel.setAttribute('style', 'display: block !important; visibility: visible !important; opacity: 1 !important;');
+  }, 50);
+});
 </script>
\ No newline at end of file
diff --git a/src/components/TitlePanel.vue b/src/components/TitlePanel.vue
index 695bf28..b7cf41b 100644
--- a/src/components/TitlePanel.vue
+++ b/src/components/TitlePanel.vue
@@ -1,25 +1,32 @@
 <template>
-  <div>
-    <div class="flex text-cy-gray rounded-sm bg-cy-blue-darkest py-1.5 border-slate-800 border mb-2">
+  <div data-cy="titlePanel">
+    <div class="flex text-cy-gray rounded-sm bg-cy-blue-darkest py-1.5 border-slate-800 border mb-2" 
+         style="display: flex !important; visibility: visible !important; opacity: 1 !important; align-items: center;">
       <p
         data-cy="method"
         class="mx-2 rounded-sm font-mono"
         :class="methodColor(method)"
+        style="display: inline-block !important; visibility: visible !important; opacity: 1 !important;"
       >
         {{ method }}
       </p>
-      <input
+      <!-- Replace input with span for better visibility -->
+      <span
         data-cy="url"
-        class="px-1 inline-block font-mono bg-cy-blue-darkest w-full outline-0"
-        :value="url"
-        readonly
+        class="px-1 inline-block font-mono bg-cy-blue-darkest w-full outline-0 text-cy-gray-light" 
+        style="display: inline-block !important; visibility: visible !important; opacity: 1 !important;"
       >
+        {{ url }}
+      </span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-  defineProps({
+import { onMounted } from 'vue';
+import { getState } from '../utils/getState';
+
+  const props = defineProps({
     method: {
       default: '',
       type: String
@@ -42,4 +49,26 @@
     return methods[method as keyof typeof methods]
   }
 
+  onMounted(() => {
+    // Use the same document reference that the plugin is using
+    const { doc } = getState();
+      
+    const applyStyles = () => {
+      // Explicitly target the URL element
+      const urlElements = doc.querySelectorAll('[data-cy="url"]');
+      urlElements.forEach(element => {
+        // Apply styling using the cy-gray-light color from tailwind config
+        element.setAttribute('style', 'display: inline-block !important; visibility: visible !important; opacity: 1 !important;');
+        element.classList.add('text-cy-gray-light');
+        
+        // Set text content for span element
+        if (props.url) {
+          element.textContent = props.url;
+        }
+      });
+    };
+
+    setTimeout(applyStyles, 100);
+  });
+
 </script>
\ No newline at end of file

From 0fc138f1b17f26c40d9dfbe05517ff32bce279ed Mon Sep 17 00:00:00 2001
From: a8trejo <abel.trejo@roo.vet>
Date: Thu, 6 Mar 2025 11:07:53 -0800
Subject: [PATCH 2/4] Moving new force visible styles to styles file

---
 src/components/CodeBlock.vue     |  6 +++---
 src/components/RequestPanel.vue  |  4 ++--
 src/components/ResponsePanel.vue |  4 ++--
 src/components/TitlePanel.vue    | 13 +++++--------
 src/style.css                    | 24 ++++++++++++++++++++++++
 5 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/components/CodeBlock.vue b/src/components/CodeBlock.vue
index 14d1084..f4bd413 100644
--- a/src/components/CodeBlock.vue
+++ b/src/components/CodeBlock.vue
@@ -2,11 +2,11 @@
 <template>
   <div
     v-if="dataFormatted"
-    class="bg-cy-blue-darker" style="display: block !important; visibility: visible !important; opacity: 1 !important;"
+    class="bg-cy-blue-darker cy-force-visible"
     :data-cy="selector"
   >
     <pre
-      class="hljs overflow-scroll no-scrollbar" style="display: block !important; visibility: visible !important; opacity: 1 !important;"
+      class="hljs overflow-scroll no-scrollbar cy-force-visible"
       v-html="dataFormatted" 
     />
   </div>
@@ -29,7 +29,7 @@ onMounted(() => {
   // Make sure the code block is visible
   setTimeout(() => {
     const codeBlocks = document.querySelectorAll('pre.hljs');
-    codeBlocks.forEach(block => block.setAttribute('style', 'display: block !important; visibility: visible !important; opacity: 1 !important;'));
+    codeBlocks.forEach(block => block.classList.add('cy-force-visible'));
   }, 50);
 });
 </script>
\ No newline at end of file
diff --git a/src/components/RequestPanel.vue b/src/components/RequestPanel.vue
index 5f0f164..19e0cbe 100644
--- a/src/components/RequestPanel.vue
+++ b/src/components/RequestPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     data-cy="requestPanel"
-    class="col-span-1" style="display: block !important; visibility: visible !important; opacity: 1 !important;"
+    class="col-span-1 cy-force-visible"
   >
     <Title
       :method="item?.method"
@@ -106,7 +106,7 @@ onMounted(() => {
   // Make sure all CodeBlock components are visible
   setTimeout(() => {
     const panel = document.querySelector('[data-cy="requestPanel"]');
-    if (panel) panel.setAttribute('style', 'display: block !important; visibility: visible !important; opacity: 1 !important;');
+    if (panel) panel.classList.add('cy-force-visible');
   }, 50);
 });
 
diff --git a/src/components/ResponsePanel.vue b/src/components/ResponsePanel.vue
index 9c6f123..f1afcbd 100644
--- a/src/components/ResponsePanel.vue
+++ b/src/components/ResponsePanel.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     data-cy="responsePanel"
-    class="col-span-1" style="display: block !important; visibility: visible !important; opacity: 1 !important;"
+    class="col-span-1 cy-force-visible"
   >
     <Status
       :status="item?.status"
@@ -86,7 +86,7 @@ onMounted(() => {
   // Make sure all CodeBlock components are visible
   setTimeout(() => {
     const panel = document.querySelector('[data-cy="responsePanel"]');
-    if (panel) panel.setAttribute('style', 'display: block !important; visibility: visible !important; opacity: 1 !important;');
+    if (panel) panel.classList.add('cy-force-visible');
   }, 50);
 });
 </script>
\ No newline at end of file
diff --git a/src/components/TitlePanel.vue b/src/components/TitlePanel.vue
index b7cf41b..4f49014 100644
--- a/src/components/TitlePanel.vue
+++ b/src/components/TitlePanel.vue
@@ -1,20 +1,17 @@
 <template>
   <div data-cy="titlePanel">
-    <div class="flex text-cy-gray rounded-sm bg-cy-blue-darkest py-1.5 border-slate-800 border mb-2" 
-         style="display: flex !important; visibility: visible !important; opacity: 1 !important; align-items: center;">
-      <p
+    <div class="flex text-cy-gray rounded-sm bg-cy-blue-darkest py-1.5 border-slate-800 border mb-2 cy-force-visible-flex cy-flex-center">
+     <p
         data-cy="method"
         class="mx-2 rounded-sm font-mono"
-        :class="methodColor(method)"
-        style="display: inline-block !important; visibility: visible !important; opacity: 1 !important;"
+        :class="[methodColor(method), 'cy-force-visible-inline']"
       >
         {{ method }}
       </p>
       <!-- Replace input with span for better visibility -->
       <span
         data-cy="url"
-        class="px-1 inline-block font-mono bg-cy-blue-darkest w-full outline-0 text-cy-gray-light" 
-        style="display: inline-block !important; visibility: visible !important; opacity: 1 !important;"
+        class="px-1 inline-block font-mono bg-cy-blue-darkest w-full outline-0 text-cy-gray-light cy-force-visible-inline"
       >
         {{ url }}
       </span>
@@ -58,7 +55,7 @@ import { getState } from '../utils/getState';
       const urlElements = doc.querySelectorAll('[data-cy="url"]');
       urlElements.forEach(element => {
         // Apply styling using the cy-gray-light color from tailwind config
-        element.setAttribute('style', 'display: inline-block !important; visibility: visible !important; opacity: 1 !important;');
+        element.classList.add('cy-force-visible-inline');
         element.classList.add('text-cy-gray-light');
         
         // Set text content for span element
diff --git a/src/style.css b/src/style.css
index 88010cf..1010467 100644
--- a/src/style.css
+++ b/src/style.css
@@ -187,4 +187,28 @@ details:not([open]) {
     text-align: center;
     letter-spacing: 5px;
     @apply text-cy-blue-dark block md:hidden -my-6;
+}
+
+/* Utility classes for forcing element visibility in Cypress Cloud */
+.cy-force-visible {
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+.cy-force-visible-inline {
+  display: inline-block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+.cy-force-visible-flex {
+  display: flex !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+}
+
+/* Additional utility for flex alignment */
+.cy-flex-center {
+  align-items: center !important;
 }
\ No newline at end of file

From bf82b16ae158a7b9e7d93626da3d1fcfa445f4d1 Mon Sep 17 00:00:00 2001
From: a8trejo <abel.trejo@roo.vet>
Date: Tue, 11 Mar 2025 20:40:30 -0700
Subject: [PATCH 3/4] Updating readme with local testing steps

---
 README.md | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index f56af19..2879d4a 100644
--- a/README.md
+++ b/README.md
@@ -151,4 +151,18 @@ Come to my upcoming "Testing API with Cypress" workshop. We’ll be using this p
 <hr>
 <p align="center">
 ...powered by coffee and love ❤️  <a href="https://filiphric.com">Filip Hric
-</p>
\ No newline at end of file
+</p>
+
+## Testing Local Changes in Another Repository
+
+You can use [yalc](https://github.com/wclr/yalc) to use your local changes to the package in another repo (for instance `Roo-React`) without needing to publish to NPM. To do this:
+
+1. Install yalc globally with `npm i yalc -g`.
+
+2. Run `npm run yalc:build` in the root of your local `cypress-plugin-api` repository (and do this every time you want to make your latest changes available).
+
+3. Run `yalc link cypress-plugin-api` in the root of your local automation repository (only necessary to do this once).
+
+4. To constantly pull the latest local api plugin changes into your local automation repository, run `yalc update` from the root.
+
+5. If you want to stop using yalc, type `yalc retreat --all` in the root of automation repository. And if you want to start using it again, type `yalc restore --all`.
\ No newline at end of file

From bdef944a0c40a96d4bdfb5b09b5b55a4be800adb Mon Sep 17 00:00:00 2001
From: a8trejo <abel.trejo@roo.vet>
Date: Tue, 11 Mar 2025 20:45:29 -0700
Subject: [PATCH 4/4] Updating readme

---
 README.md | 32 ++++++++++++++++++--------------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 2879d4a..8080faf 100644
--- a/README.md
+++ b/README.md
@@ -142,20 +142,11 @@ This will add types for `cy.api()` command, it’s returned values as well as `e
 ### Issues
 All the issues can be found on [issues page](https://github.com/filiphric/cypress-plugin-api/issues), feel free to open any new ones or contribute with your own code.
 
-<!-- ### Want to learn more?
-Come to my upcoming "Testing API with Cypress" workshop. We’ll be using this plugin and learning different ways of testing API.
-
-[Register here](https://filiphric.com/cypress-api-testing-workshop)
-
-![Testing API with Cypress workshop](./images/apiWorkshop.png) -->
-<hr>
-<p align="center">
-...powered by coffee and love ❤️  <a href="https://filiphric.com">Filip Hric
-</p>
-
-## Testing Local Changes in Another Repository
+### Testing Local Changes in Another Repository
+You can use [yalc](https://github.com/wclr/yalc) to use your local changes as the package in another repository without needing to publish to NPM.
 
-You can use [yalc](https://github.com/wclr/yalc) to use your local changes to the package in another repo (for instance `Roo-React`) without needing to publish to NPM. To do this:
+<details>
+<summary>Using yalc</summary>
 
 1. Install yalc globally with `npm i yalc -g`.
 
@@ -165,4 +156,17 @@ You can use [yalc](https://github.com/wclr/yalc) to use your local changes to th
 
 4. To constantly pull the latest local api plugin changes into your local automation repository, run `yalc update` from the root.
 
-5. If you want to stop using yalc, type `yalc retreat --all` in the root of automation repository. And if you want to start using it again, type `yalc restore --all`.
\ No newline at end of file
+5. If you want to stop using yalc, type `yalc retreat --all` in the root of automation repository. And if you want to start using it again, type `yalc restore --all`.
+
+</details>
+
+<!-- ### Want to learn more?
+Come to my upcoming "Testing API with Cypress" workshop. We’ll be using this plugin and learning different ways of testing API.
+
+[Register here](https://filiphric.com/cypress-api-testing-workshop)
+
+![Testing API with Cypress workshop](./images/apiWorkshop.png) -->
+<hr>
+<p align="center">
+...powered by coffee and love ❤️  <a href="https://filiphric.com">Filip Hric
+</p>
\ No newline at end of file