Stabilize video modal two-column layout

css/tailwind.generated.css

@@ -5,4 +5,4 @@
       --player-modal-inline-padding,clamp(var(--space-md-plus),4vw,var(--space-2xl))
     );overflow:visible}#playerModal .video-modal__primary>.watch-container:first-child{padding-block-start:var(--player-modal-vertical-padding)}#playerModal .video-modal__secondary>.watch-container:last-child{padding-block-end:var(--player-modal-vertical-padding)}#playerModal .modal-nav .watch-container{max-width:none;margin-inline:0}#playerModal .modal-info-panel{display:flex;flex-direction:column;gap:var(--space-lg)}#playerModal h2#videoTitle{margin:0;font-size:clamp(var(--font-size-xl),calc(var(--font-size-modal-title-base) + .5vw),var(--font-size-xl-plus));font-weight:600;line-height:1.3;color:var(--color-text)}#playerModal .modal-meta{font-size:var(--font-size-sm);line-height:1.4;color:var(--color-text-muted)}#playerModal .modal-view-count{font-weight:600;color:var(--color-text)}#playerModal .channel-card{align-items:center;padding:var(--space-md-plus) var(--space-lg)}#playerModal .channel-card,#playerModal .player-modal__module{display:flex;gap:var(--space-md);border-radius:var(--radius-xl);border:var(--border-width-hairline) solid var(--color-border-translucent);background-color:var(--color-surface);box-shadow:var(--shadow-sm)}#playerModal .player-modal__module{flex-direction:column;width:100%;padding:clamp(var(--space-md-plus),3vw,var(--space-2xl))}#playerModal .player-modal__module-title{margin:0;font-size:var(--font-size-lg);font-weight:600;line-height:1.3;color:var(--color-text)}#playerModal .player-modal__module-list{display:flex;flex-direction:column;gap:var(--space-sm);width:100%;margin:0;padding:0;list-style:none}#playerModal .player-modal__module-scroll{max-height:clamp(14rem,calc(100vh - var(--player-modal-vertical-padding)*2 - var(--space-2xl)),28rem);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-inline-end:var(--space-2xs)}#playerModal .player-modal__module-scroll>li{scroll-margin-block:var(--space-xs)}@media (max-width:30rem){#playerModal .modal-nav .icon-button{width:var(--space-xl);height:var(--space-xl);min-width:var(--space-xl);min-height:var(--space-xl)}#playerModal .watch-container{padding-inline:var(--space-sm)}#playerModal .channel-card{gap:var(--space-sm);padding:var(--space-sm) var(--space-md)}}#playerModal .channel-card__avatar{flex-shrink:0;width:var(--avatar-size-lg);height:var(--avatar-size-lg);border-radius:var(--radius-full);overflow:hidden;background-color:var(--color-border-subtle)}#playerModal .channel-card__avatar img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}#playerModal .channel-card__name{margin:0;font-size:var(--font-size-lg);font-weight:600;color:var(--color-text)}#playerModal .channel-card__npub{margin:0;font-size:var(--font-size-sm);color:var(--color-text-muted)}#playerModal .description-panel{padding:var(--space-md-plus) var(--space-lg);border-radius:var(--radius-xl);border:var(--border-width-hairline) solid var(--color-border-translucent);background-color:var(--color-surface);box-shadow:var(--shadow-sm)}#playerModal .description-panel p{margin:0;font-size:var(--font-size-sm);line-height:1.6;color:var(--color-text)}.player-modal__content{position:relative;z-index:var(--z-modal-content);display:flex;flex:1 1 auto;width:100%;min-height:100%;flex-direction:column;overflow:visible;padding:0;margin:0;border:none;border-radius:0;background-color:var(--color-surface);box-shadow:none}@media (prefers-reduced-motion:reduce){.player-modal__content{transition-property:none}}#playerModal .modal-nav{position:sticky;top:0;z-index:var(--z-overlay-nav);--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;background-color:var(--color-overlay-darker);background-image:linear-gradient(180deg,var(--color-overlay-panel-gradient-start) 0,var(--color-overlay-panel-gradient-end) 100%);border-bottom:var(--border-width-hairline) solid var(--color-border-translucent);backdrop-filter:blur(var(--modal-nav-backdrop-blur));-webkit-backdrop-filter:blur(var(--modal-nav-backdrop-blur))}#playerModal#playerModal .modal-nav__bar{display:block}#playerModal .modal-nav__bar{display:flex;width:100%;align-items:center;gap:.75rem;padding:.5rem}@media (min-width:640px){#playerModal .modal-nav__bar{padding-left:1rem;padding-right:1rem}}#playerModal .modal-nav__bar{padding-inline:var(
       --player-modal-inline-padding,clamp(var(--space-md-plus),4vw,var(--space-2xl))
-    )}#playerModal#playerModal .modal-nav .modal-actions{display:block}#playerModal .modal-nav .modal-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}#playerModal .modal-nav .icon-button{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);color:var(--text-muted);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1);width:var(--icon-size-lg);height:var(--icon-size-lg);background:var(--color-surface-tint-subtle);border:var(--border-width-hairline) solid var(--color-border-translucent-medium);color:var(--color-text-muted)}#playerModal .modal-nav .icon-button:focus-visible,#playerModal .modal-nav .icon-button:hover{background:var(--color-border-translucent-bright);border-color:var(--color-border-translucent-strong);color:var(--color-text)}.modal-nav--hidden{--tw-translate-y:-100%}.modal-nav--hidden,.modal-nav--visible{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.modal-nav--visible{--tw-translate-y:0px}.video-modal__layout{--video-modal-secondary-size:clamp(var(--video-modal-secondary-min),38vw,var(--video-modal-secondary-max));display:grid;gap:1.5rem}@media (min-width:1024px){.video-modal__layout{gap:2rem}}.video-modal__layout{width:min(100%,var(--video-modal-layout-max));margin-inline:auto;grid-template-columns:minmax(0,1fr);grid-template-areas:"primary" "secondary";align-items:start}@media (min-width:1024px){.video-modal__layout{--video-modal-secondary-size:clamp(var(--video-modal-secondary-min),32vw,var(--video-modal-secondary-max));grid-template-columns:minmax(0,1fr) minmax(var(--video-modal-secondary-min),var(--video-modal-secondary-size));grid-template-areas:"primary secondary";align-items:start;grid-auto-flow:column}.video-modal__primary{min-width:0;min-height:0;grid-area:primary}.video-modal__secondary{min-width:var(--video-modal-secondary-min);min-height:0;max-width:var(--video-modal-secondary-size);grid-area:secondary}#playerModal .video-modal__layout .watch-container{max-width:none;margin-inline:0;width:100%}}@media (min-width:1280px){.video-modal__layout{--video-modal-secondary-size:clamp(var(--video-modal-secondary-min),28vw,var(--video-modal-secondary-max))}}.revert-modal__layout{display:grid;gap:1.5rem}@media (min-width:1024px){.revert-modal__layout{grid-template-columns:minmax(var(--revert-modal-sidebar-min),var(--revert-modal-sidebar-width)) minmax(0,1fr)}}#playerModal.video-modal__primary{display:block}.video-modal__primary{display:flex;flex-direction:column;gap:1.5rem;min-width:0;min-height:0}#playerModal.video-modal__secondary{display:block}.video-modal__secondary{display:flex;flex-direction:column;gap:1rem;min-width:0;min-height:0;width:100%;align-self:stretch}.video-modal__similar{display:none}@media (min-width:1024px){#playerModal.video-modal__similar{display:block}.video-modal__similar{display:flex;flex-direction:column;gap:1.5rem;align-self:stretch}}#playerModal .player-modal__module-item{width:100%}#playerModal#playerModal .player-modal__module-item>.card{display:block}#playerModal .player-modal__module-item>.card{display:flex;width:100%;flex-direction:row;align-items:flex-start;gap:var(--space-md)}#playerModal#playerModal .player-modal__module-item>.\!card{display:block}#playerModal .player-modal__module-item>.\!card{display:flex;width:100%;flex-direction:row;align-items:flex-start;gap:var(--space-md)}#playerModal .player-modal__module-item>.\!card .video-card__media,#playerModal .player-modal__module-item>.card .video-card__media{flex-shrink:0}#playerModal#playerModal .player-modal__module-item>.card .video-card__content{display:block}#playerModal .player-modal__module-item>.card .video-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column;gap:var(--space-sm)}#playerModal#playerModal .player-modal__module-item>.\!card .video-card__content{display:block}#playerModal .player-modal__module-item>.\!card .video-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column;gap:var(--space-sm)}#playerModal#playerModal .player-modal__module-item>.card .video-card__meta{display:block}#playerModal .player-modal__module-item>.card .video-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);color:var(--text-muted-strong)}#playerModal#playerModal .player-modal__module-item>.\!card .video-card__meta{display:block}#playerModal .player-modal__module-item>.\!card .video-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);color:var(--text-muted-strong)}.video-modal__stage{position:relative;isolaLine truncated
+    )}#playerModal#playerModal .modal-nav .modal-actions{display:block}#playerModal .modal-nav .modal-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}#playerModal .modal-nav .icon-button{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);color:var(--text-muted);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1);width:var(--icon-size-lg);height:var(--icon-size-lg);background:var(--color-surface-tint-subtle);border:var(--border-width-hairline) solid var(--color-border-translucent-medium);color:var(--color-text-muted)}#playerModal .modal-nav .icon-button:focus-visible,#playerModal .modal-nav .icon-button:hover{background:var(--color-border-translucent-bright);border-color:var(--color-border-translucent-strong);color:var(--color-text)}.modal-nav--hidden{--tw-translate-y:-100%}.modal-nav--hidden,.modal-nav--visible{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.modal-nav--visible{--tw-translate-y:0px}.video-modal__layout{--video-modal-secondary-size:clamp(var(--video-modal-secondary-min),38vw,var(--video-modal-secondary-max));display:grid;gap:1.5rem}@media (min-width:1024px){.video-modal__layout{gap:2rem}}.video-modal__layout{width:min(100%,var(--video-modal-layout-max));margin-inline:auto;grid-template-columns:minmax(0,1fr);grid-template-areas:"primary" "secondary";align-items:start}@media (min-width:1024px){.video-modal__layout{--video-modal-secondary-size:clamp(var(--video-modal-secondary-min),32vw,var(--video-modal-secondary-max));grid-template-columns:minmax(0,1fr) minmax(var(--video-modal-secondary-min),var(--video-modal-secondary-size));grid-template-areas:"primary secondary";align-items:start;grid-auto-flow:column}.video-modal__primary{min-width:0;min-height:0;grid-area:primary}.video-modal__secondary{min-width:var(--video-modal-secondary-min);min-height:0;max-width:var(--video-modal-secondary-size);grid-area:secondary}#playerModal .video-modal__layout .watch-container{max-width:none;margin-inline:0;width:100%}}@media (min-width:1280px){.video-modal__layout{--video-modal-secondary-size:clamp(var(--video-modal-secondary-min),28vw,var(--video-modal-secondary-max))}}#playerModal .video-modal__layout{display:grid}@media (min-width:1024px){#playerModal .video-modal__layout{grid-template-columns:minmax(0,1fr) minmax(var(--video-modal-secondary-min),var(--video-modal-secondary-size));grid-template-areas:"primary secondary";align-items:start;grid-auto-flow:column}#playerModal .video-modal__primary{grid-area:primary}#playerModal .video-modal__secondary{grid-area:secondary}}.revert-modal__layout{display:grid;gap:1.5rem}@media (min-width:1024px){.revert-modal__layout{grid-template-columns:minmax(var(--revert-modal-sidebar-min),var(--revert-modal-sidebar-width)) minmax(0,1fr)}}#playerModal.video-modal__primary{display:block}.video-modal__primary{display:flex;flex-direction:column;gap:1.5rem;min-width:0;min-height:0}#playerModal.video-modal__secondary{display:block}.video-modal__secondary{display:flex;flex-direction:column;gap:1rem;min-width:0;min-height:0;width:100%;align-self:stretch}.video-modal__similar{display:none}@media (min-width:1024px){#playerModal.video-modal__similar{display:block}.video-modal__similar{display:flex;flex-direction:column;gap:1.5rem;align-self:stretch}}#playerModal .player-modal__module-item{width:100%}#playerModal#playerModal .player-modal__module-item>.card{display:block}#playerModal .player-modal__module-item>.card{display:flex;width:100%;flex-direction:row;align-items:flex-start;gap:var(--space-md)}#playerModal#playerModal .player-modal__module-item>.\!card{display:block}#playerModal .player-modal__module-item>.\!card{display:flex;width:100%;flex-direction:row;align-items:flex-start;gap:var(--space-md)}#playerModal .player-modal__module-item>.\!card .video-card__media,#playerModal .player-modal__module-item>.card .video-card__media{flex-shrink:0}#playerModal#playerModal .player-modal__module-item>.card .video-card__content{display:block}#playerModal .player-modal__module-item>.card .video-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column;gap:var(--space-sm)}#playerModal#playerModal .player-modal__module-item>.\!card .video-card__content{display:block}#playerModal .player-modal__module-item>.\!card .video-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column;gap:var(--space-sm)}#playerModal#playerModal .player-modal__module-item>.card .video-card__meta{display:block}#playerModal .player-modal__module-item>.card .video-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--font-size-xs);line-height:varLine truncated

css/tailwind.source.css

@@ -1729,6 +1729,32 @@
     }
   }
 
+  #playerModal .video-modal__layout {
+    display: grid;
+  }
+
+  @media (min-width: theme('screens.lg')) {
+    #playerModal .video-modal__layout {
+      grid-template-columns:
+        minmax(0, 1fr)
+        minmax(
+          var(--video-modal-secondary-min),
+          var(--video-modal-secondary-size)
+        );
+      grid-template-areas: "primary secondary";
+      align-items: start;
+      grid-auto-flow: column;
+    }
+
+    #playerModal .video-modal__primary {
+      grid-area: primary;
+    }
+
+    #playerModal .video-modal__secondary {
+      grid-area: secondary;
+    }
+  }
+
   .revert-modal__layout {
     @apply grid gap-6;
   }

js/ui/components/VideoModal.js

@@ -95,6 +95,10 @@ export class VideoModal {
     this.similarContentCards = [];
     this.similarContentViewCountSubscriptions = [];
     this.pendingSimilarContent = null;
+    this.similarContentVisible = false;
+    this.similarContentMediaQuery = null;
+    this.handleSimilarContentMediaChange =
+      this.handleSimilarContentMediaChange.bind(this);
 
     this.modalAccessibility = null;
     this.modalNavScrollHandler = null;
@@ -311,6 +315,7 @@ export class VideoModal {
     this.modalBackdrop = playerModal.querySelector("[data-dismiss]") || null;
     this.scrollRegion = this.modalPanel || playerModal;
 
+    this.teardownSimilarContentMediaQuery();
     const nextVideoTagsRoot = playerModal.querySelector("#videoTags") || null;
     if (this.videoTagsRoot && this.videoTagsRoot !== nextVideoTagsRoot) {
       this.cleanupVideoTags(this.videoTagsRoot);
@@ -341,6 +346,8 @@ export class VideoModal {
     this.similarContentList = similarList;
     this.similarContentContainer = similarContainer;
 
+    this.setupSimilarContentMediaQuery();
+
     if (similarList && similarList.children.length) {
       this.toggleSimilarContentVisibility(true);
     } else {
@@ -2500,38 +2507,102 @@ export class VideoModal {
   }
 
   toggleSimilarContentVisibility(isVisible) {
-    const container = this.similarContentContainer;
-    if (container) {
-      if (isVisible) {
-        container.removeAttribute("hidden");
-        container.setAttribute("aria-hidden", "false");
-      } else {
-        container.setAttribute("hidden", "");
-        container.setAttribute("aria-hidden", "true");
+    this.similarContentVisible = Boolean(isVisible);
+    this.refreshSimilarContentVisibility();
+  }
+
+  refreshSimilarContentVisibility() {
+    const shouldShow =
+      this.similarContentVisible && this.matchesSimilarContentDesktop();
+
+    this.setElementVisibility(this.similarContentContainer, shouldShow);
+    this.setElementVisibility(this.similarContentHeading, shouldShow);
+    this.setElementVisibility(this.similarContentList, shouldShow);
+  }
+
+  setElementVisibility(element, shouldShow) {
+    if (!element) {
+      return;
+    }
+
+    if (shouldShow) {
+      element.removeAttribute("hidden");
+      element.setAttribute("aria-hidden", "false");
+    } else {
+      element.setAttribute("hidden", "");
+      element.setAttribute("aria-hidden", "true");
+    }
+  }
+
+  matchesSimilarContentDesktop() {
+    if (this.similarContentMediaQuery) {
+      return this.similarContentMediaQuery.matches;
+    }
+
+    const win = this.window;
+    if (!win || typeof win.matchMedia !== "function") {
+      return true;
+    }
+
+    try {
+      return win.matchMedia("(min-width: 1024px)").matches;
+    } catch (error) {
+      this.log(
+        "[VideoModal] Failed to evaluate similar content media query",
+        error
+      );
+      return true;
+    }
+  }
+
+  setupSimilarContentMediaQuery() {
+    const win = this.window;
+    if (!win || typeof win.matchMedia !== "function") {
+      this.similarContentMediaQuery = null;
+      this.refreshSimilarContentVisibility();
+      return;
+    }
+
+    const query = win.matchMedia("(min-width: 1024px)");
+    if (this.similarContentMediaQuery === query) {
+      this.refreshSimilarContentVisibility();
+      return;
+    }
+
+    this.teardownSimilarContentMediaQuery();
+    this.similarContentMediaQuery = query;
+
+    if (query) {
+      if (typeof query.addEventListener === "function") {
+        query.addEventListener("change", this.handleSimilarContentMediaChange);
+      } else if (typeof query.addListener === "function") {
+        query.addListener(this.handleSimilarContentMediaChange);
       }
     }
 
-    const heading = this.similarContentHeading;
-    if (heading) {
-      if (isVisible) {
-        heading.removeAttribute("hidden");
-        heading.setAttribute("aria-hidden", "false");
-      } else {
-        heading.setAttribute("hidden", "");
-        heading.setAttribute("aria-hidden", "true");
-      }
+    this.refreshSimilarContentVisibility();
+  }
+
+  teardownSimilarContentMediaQuery() {
+    const query = this.similarContentMediaQuery;
+    if (!query) {
+      return;
     }
 
-    const list = this.similarContentList;
-    if (list) {
-      if (isVisible) {
-        list.removeAttribute("hidden");
-        list.setAttribute("aria-hidden", "false");
-      } else {
-        list.setAttribute("hidden", "");
-        list.setAttribute("aria-hidden", "true");
-      }
+    if (typeof query.removeEventListener === "function") {
+      query.removeEventListener(
+        "change",
+        this.handleSimilarContentMediaChange
+      );
+    } else if (typeof query.removeListener === "function") {
+      query.removeListener(this.handleSimilarContentMediaChange);
     }
+
+    this.similarContentMediaQuery = null;
+  }
+
+  handleSimilarContentMediaChange() {
+    this.refreshSimilarContentVisibility();
   }
 
   normalizeSimilarPointerInfo(entry, video) {