cubing 0.34.4 → 0.34.6

package/dist/esm/twisty/index.js

@@ -5327,9 +5327,7 @@ var twizzleLinkCSS = new CSSSource(
   `
 .wrapper {
   background: rgb(255, 245, 235);
-  display: grid;
   border: 1px solid rgba(0, 0, 0, 0.25);
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
 }
 
 .setup-alg, twisty-alg-viewer {
@@ -5340,8 +5338,6 @@ var twizzleLinkCSS = new CSSSource(
   background: rgba(255, 230, 210, 1);
   font-weight: bold;
   padding: 0.25em 0.5em;
-  display: grid;
-  grid-template-columns: 1fr auto;
 }
 
 .heading.title {
@@ -5357,7 +5353,8 @@ var twizzleLinkCSS = new CSSSource(
 
 twisty-player {
   width: 100%;
-  height: 100%;
+  min-height: 128px;
+  height: 288px;
   resize: vertical;
   overflow-y: hidden;
 }
@@ -5370,17 +5367,51 @@ twisty-alg-viewer {
   display: inline-block;
 }
 
-.wrapper:fullscreen {
+.wrapper {
+  container-type: inline-size;
+}
+
+.scrollable-region {
+  border-top: 1px solid rgba(0, 0, 0, 0.25);
+}
+
+.scrollable-region {
+  max-height: 18em;
+  overflow-y: auto;
+}
+
+@container (min-width: 512px) {
+  .responsive-wrapper {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+  twisty-player {
+    height: 320px
+  }
+  .scrollable-region {
+    border-top: none;
+    border-left: 1px solid rgba(0, 0, 0, 0.25);
+    contain: strict;
+    max-height: 100cqh;
+  }
+}
+
+.wrapper:fullscreen,
+.wrapper:fullscreen .responsive-wrapper {
   width: 100%;
   height: 100%;
-  display: grid;
-  grid-template-rows: 1fr 1fr;
 }
 
 .wrapper:fullscreen twisty-player,
 .wrapper:fullscreen .scrollable-region {
-  height: unset;
-  max-height: unset
+  height: 50%;
+}
+
+@container (min-width: 512px) {
+  .wrapper:fullscreen twisty-player,
+  .wrapper:fullscreen .scrollable-region {
+    height: 100%;
+  }
 }
 `
 );
@@ -5394,7 +5425,6 @@ var twizzleLinkForumTweaksCSS = new CSSSource(`
 }
 
 .scrollable-region {
-  max-height: 280px;
   overflow-y: auto;
 }
 
@@ -5464,7 +5494,10 @@ var TwizzleLink = class extends ManagedCustomElement {
   #cssElem;
   #cssCDNForumTweaksElem;
   #scrollableRegion;
+  #responsiveWrapper;
   async connectedCallback() {
+    this.#responsiveWrapper = this.addElement(document.createElement("div"));
+    this.#responsiveWrapper.classList.add("responsive-wrapper");
     if (this.options?.darkMode) {
       this.contentWrapper.classList.add("dark-mode");
     }
@@ -5490,7 +5523,7 @@ var TwizzleLink = class extends ManagedCustomElement {
         delete config.puzzle;
         config.experimentalPuzzleDescription = puzzleDescription;
       }
-      this.twistyPlayer = this.addElement(
+      this.twistyPlayer = this.#responsiveWrapper.appendChild(
         new TwistyPlayer({
           background: this.options?.cdnForumTweaks ? "checkered-transparent" : "checkered",
           darkMode: this.options?.darkMode ? "dark" : "light",
@@ -5502,7 +5535,9 @@ var TwizzleLink = class extends ManagedCustomElement {
       if (config.experimentalTitle) {
         this.twistyPlayer.experimentalTitle = config.experimentalTitle;
       }
-      this.#scrollableRegion = this.addElement(document.createElement("div"));
+      this.#scrollableRegion = this.#responsiveWrapper.appendChild(
+        document.createElement("div")
+      );
       this.#scrollableRegion.classList.add("scrollable-region");
       if (config.experimentalTitle) {
         this.addHeading(config.experimentalTitle).classList.add("title");