Fix Furo's responsiveness for qiskit-card and qiskit-call-to-action-item (Cherry-pick of #447)

example_docs/docs/sphinx_guide/custom_directives.rst

@@ -8,16 +8,16 @@ qiskit-call-to-action-item
 .. qiskit-call-to-action-grid::
 
     .. qiskit-call-to-action-item::
-       :header: Go back to qiskit.org!
-       :description: That's a cool site too :)
+       :header: Go back to qiskit.org! Some more long text for overflow.
+       :description: That's a cool site too :) Some long text to see what happens with overflowing!
        :button_link:  https://qiskit.org
-       :button_text: qiskit.org
+       :button_text: Really long text that overwraps on mobile
 
     .. qiskit-call-to-action-item::
        :header: CTA #2
        :description: Call me, maybe?
        :button_link:  https://qiskit.org
-       :button_text: qiskit.org
+       :button_text: Buttons are fun
 
     .. qiskit-call-to-action-item::
        :header: CTA #3
@@ -30,8 +30,8 @@ qiskit-card
 ===========
 
 .. qiskit-card::
-  :header: IBM Quantum Lab
-  :card_description: Build quantum applications and experiments with Qiskit in a cloud programming environment.
+  :header: IBM Quantum Lab is the best lab around! Utility FTW.
+  :card_description: Build quantum applications and experiments with Qiskit in a cloud programming environment. Some more text to try out wrapping.
   :image: ../_static/ibm_qlab.png
   :link: https://quantum-computing.ibm.com/
 

src/qiskit_sphinx_theme/assets/styles/_custom-directives.scss

@@ -20,7 +20,8 @@
   position: relative;  // Needed for `.qiskit-card::after`.
   display: flex;
   justify-content: space-between;
-  height: 12rem;
+  align-items: flex-start;
+  min-height: 12rem;
   margin-bottom: 1.875rem;
 
   border: 1px solid var(--color-table-border);
@@ -73,13 +74,23 @@
 
   opacity: 0.7;
 
+  @media (max-width: 67em) {
+    width: 15rem;
+  }
+
+  @media (max-width: 40em) {
+    width: 10rem;
+  }
+
   // Float the image to the right of the container.
+  // Center it vertically if the image isn't tall enough.
   display: flex;
+  align-self: center;
   align-items: center;
   justify-content: flex-end;
 
   img {
-    max-height: 100%;
+    object-fit: contain;
     max-width: 100%;
   }
 }
@@ -101,6 +112,14 @@
   position: relative;
   width: 100%;
   margin-bottom: 2rem;
+  padding-right: 3rem;
+
+  // On mobile, only display one CAT per row.
+  @media (max-width: 67em) {
+    flex-basis: 100%;
+    max-width: 100%;
+    padding-right: 0;
+  }
 
   p {
     color: var(--color-sidebar-link-text);
@@ -117,7 +136,6 @@
 
     position: relative;
     display: inline-block;
-    white-space: nowrap;
     padding: 0.375rem 0.75rem;
     padding-right: 2em;
 

tests/js/snapshots.test.js

@@ -56,10 +56,15 @@ const isVisibleInViewport = async (page, selector) => {
 /* If the content is too big for the viewport, the Qiskit top nav bar will hide the content. That
  *  has for some reason caused some flakes in CI, that the nav bar very minorly changes its
  *  position. And it's generally annoying to hide the content we care about. */
-const hideTopNavBar = async (page) => {
+const hideTopNavBar = async (page, mobile = false) => {
   await page
     .locator("qiskit-ui-shell")
     .evaluate((el) => (el.style.display = "none"));
+  if (mobile) {
+    await page
+      .locator(".mobile-header")
+      .evaluate((el) => (el.style.display = "none"));
+  }
 };
 
 // -----------------------------------------------------------------------
@@ -289,10 +294,16 @@ test("Jupyter works with copybutton", async ({ page }) => {
 
 test("custom directives", async ({ page }) => {
   await page.goto("sphinx_guide/custom_directives.html");
+  await hideTopNavBar(page, true);
+
   const cards = page.locator("section#qiskit-card");
   await cards.hover();
   await expect(cards).toHaveScreenshot();
 
   const callToActions = page.locator("section#qiskit-call-to-action-item");
   await expect(callToActions).toHaveScreenshot();
+
+  await setMobile(page);
+  await expect(cards).toHaveScreenshot();
+  await expect(callToActions).toHaveScreenshot();
 });