Corrige superposición de certificados en móvil

Author: IAZARA

css/xp-apps.css

@@ -1012,13 +1012,17 @@
         overflow-x: auto;
         overflow-y: hidden;
         scroll-snap-type: x proximity;
+        overscroll-behavior-x: contain;
     }
 
     .xp-certificate-item {
-        width: 214px;
-        min-width: 214px;
+        box-sizing: border-box;
+        width: clamp(232px, 76vw, 280px);
+        min-width: clamp(232px, 76vw, 280px);
+        height: 83px;
         min-height: 83px;
         grid-template-columns: 78px minmax(0, 1fr);
+        overflow: hidden;
         scroll-snap-align: start;
     }
 
@@ -1031,6 +1035,30 @@
         height: 60px;
     }
 
+    .xp-certificate-item-copy {
+        max-height: 69px;
+        display: grid;
+        grid-template-rows: minmax(0, auto) auto auto;
+        gap: 1px;
+        overflow: hidden;
+    }
+
+    .xp-certificate-item-copy strong {
+        display: -webkit-box;
+        margin-bottom: 1px;
+        overflow: hidden;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+    }
+
+    .xp-certificate-item-copy span,
+    .xp-certificate-item-copy time {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
     .xp-certificate-detail {
         grid-template-rows: minmax(140px, 0.82fr) minmax(185px, 1.18fr);
     }

index.html

@@ -142,7 +142,7 @@
     <link rel="stylesheet" href="css/about-me.css">
     <link rel="stylesheet" href="css/contacto.css">
     <link rel="stylesheet" href="css/proyectos-explorer.css?v=zaratexp-20260712-i18n2">
-    <link rel="stylesheet" href="css/xp-apps.css?v=zaratexp-20260820-mobile-home1">
+    <link rel="stylesheet" href="css/xp-apps.css?v=zaratexp-20260820-mobile-certificates2">
     <link rel="stylesheet" href="css/clippy.css?v=zaratexp-20260712-clippy-mobile1">
     <link rel="stylesheet" href="css/crtEffect.css">
 

scripts/smoke-playwright.mjs

@@ -431,27 +431,57 @@ async function exerciseCertificates(page) {
   await waitForWindowAnimation(page, 'certificates');
   const mobileRoot = appWindow.locator('[data-certificates-root]');
   await mobileRoot.locator('[data-certificate-preview]').waitFor({ state: 'visible' });
+  await mobileRoot.locator('[data-certificate-filter="security"]').click();
+  await mobileRoot.locator('[data-certificate-id="asis-security-defense"]').click();
+  await page.waitForFunction(() => {
+    const detail = document.querySelector('.window[data-window-id="certificates"] [data-certificate-detail]');
+    return detail && detail.getAnimations({ subtree: true }).every((animation) => animation.playState === 'finished');
+  });
   const mobile = await mobileRoot.evaluate((rootNode) => {
     const appRect = rootNode.getBoundingClientRect();
     const filters = rootNode.querySelector('.xp-certificate-filters');
+    const list = rootNode.querySelector('.xp-certificate-list');
     const detail = rootNode.querySelector('[data-certificate-detail]');
     const preview = rootNode.querySelector('[data-certificate-preview]');
     const caption = rootNode.querySelector('.xp-certificate-preview figcaption');
     const actions = Array.from(rootNode.querySelectorAll('.xp-certificate-actions a:not([hidden])'));
+    const visibleItems = Array.from(rootNode.querySelectorAll('[data-certificate-id]'))
+      .filter((item) => getComputedStyle(item).display !== 'none');
     const previewRect = preview.getBoundingClientRect();
     const captionRect = caption.getBoundingClientRect();
     const detailRect = detail.getBoundingClientRect();
+    const listRect = list.getBoundingClientRect();
+    const cardsContained = visibleItems.every((item) => {
+      const itemRect = item.getBoundingClientRect();
+      const copyRect = item.querySelector('.xp-certificate-item-copy').getBoundingClientRect();
+      return itemRect.top >= listRect.top - 1
+        && itemRect.bottom <= listRect.bottom + 1
+        && copyRect.top >= itemRect.top - 1
+        && copyRect.bottom <= itemRect.bottom + 1
+        && getComputedStyle(item).overflow === 'hidden';
+    });
     return {
       noPageOverflow: document.documentElement.scrollWidth <= window.innerWidth + 1,
       appContained: appRect.left >= -1 && appRect.right <= window.innerWidth + 1,
       appRect: { left: appRect.left, right: appRect.right, width: appRect.width, viewport: window.innerWidth },
       filtersScrollable: filters.scrollWidth >= filters.clientWidth,
+      securityCards: visibleItems.length,
+      cardsContained,
+      listSeparated: listRect.bottom <= detailRect.top + 1,
       previewContained: previewRect.left >= detailRect.left - 1 && previewRect.right <= detailRect.right + 1,
       captionSeparated: previewRect.bottom <= captionRect.top + 0.5 && captionRect.height >= 23.5,
       actionsReachable: actions.every((action) => action.getBoundingClientRect().height >= 39.5)
     };
   });
-  ensure(mobile.noPageOverflow && mobile.appContained && mobile.filtersScrollable && mobile.previewContained && mobile.captionSeparated && mobile.actionsReachable, `Certificados no se adaptó al viewport móvil (${JSON.stringify(mobile)})`);
+  ensure(mobile.noPageOverflow
+    && mobile.appContained
+    && mobile.filtersScrollable
+    && mobile.securityCards === 2
+    && mobile.cardsContained
+    && mobile.listSeparated
+    && mobile.previewContained
+    && mobile.captionSeparated
+    && mobile.actionsReachable, `Certificados no se adaptó al viewport móvil (${JSON.stringify(mobile)})`);
 
   await page.evaluate(() => window.zarateXP.windowManager.closeWindow('certificates'));
   await appWindow.waitFor({ state: 'detached' });