phosphor-ui 0.3.39 → 0.3.40

package/dist/esm/styles/components.css

@@ -2599,19 +2599,25 @@ a.PostMeta-module_tag__3lRu-:hover {
   display: block;
   position: relative;
   width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
   text-align: center;
   text-decoration: none;
   color: inherit;
   background: none;
-  max-width: 100%;
-  overflow: visible;
+  overflow: hidden;
+  container-type: inline-size;
 }
 
 .AsciiBanner-module_bannerFrame__esMb7 {
   width: 100%;
+  max-width: 100%;
+  min-width: 0;
   height: var(--ascii-height, auto);
   min-height: 1px;
-  overflow: visible;
+  box-sizing: border-box;
+  overflow: hidden;
   text-align: center;
 }
 
@@ -2641,6 +2647,11 @@ a.PostMeta-module_tag__3lRu-:hover {
   will-change: transform, opacity, text-shadow;
 }
 
+@supports (font-size: 1cqw) {
+  .AsciiBanner-module_banner__0vW6g {
+    font-size: clamp(8px, 1.4cqw, 16px);
+  }
+}
 .AsciiBanner-module_fallback__Ya7H0 {
   position: absolute;
   width: 1px;
@@ -2725,6 +2736,7 @@ a.PostMeta-module_tag__3lRu-:hover {
 .HeaderNav-module_nav__1kFIH {
   font-family: var(--pho-font-heading);
   min-width: 0;
+  max-width: 100%;
 }
 
 .HeaderNav-module_list__mY2Ex {
@@ -2735,6 +2747,7 @@ a.PostMeta-module_tag__3lRu-:hover {
   list-style: none;
   margin: 0;
   min-width: 0;
+  max-width: 100%;
   padding: 0;
 }
 
@@ -2750,6 +2763,7 @@ a.PostMeta-module_tag__3lRu-:hover {
   gap: 0.18rem;
   min-height: 2rem;
   min-width: 0;
+  max-width: 100%;
   padding: 0.24rem 0.42rem;
   text-decoration: none;
   text-transform: uppercase;
@@ -2824,9 +2838,10 @@ a.PostMeta-module_tag__3lRu-:hover {
   background: rgba(44, 255, 122, 0.04);
   border: 1px solid var(--pho-color-primary-faint);
   max-width: 100%;
+  min-width: 0;
   overflow-x: auto;
   scrollbar-width: none;
-  width: fit-content;
+  width: 100%;
 }
 
 .HeaderNav-module_tabs__ibOCT .HeaderNav-module_list__mY2Ex::-webkit-scrollbar {
@@ -5198,6 +5213,11 @@ a.List-module_title__ZtmvP:focus-visible {
 }
 .HeroFrame-module_frame__pJTcJ {
   position: relative;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  container-type: inline-size;
   border: 1px solid var(--pho-color-primary);
   background: radial-gradient(ellipse 120% 70% at 50% 0%, rgba(44, 255, 122, 0.08) 0%, transparent 70%), var(--pho-color-background);
   box-shadow: 0 0 0 1px var(--pho-color-primary-faint) inset, 0 0 24px rgba(44, 255, 122, 0.18), 0 0 60px rgba(44, 255, 122, 0.06);
@@ -5209,6 +5229,10 @@ a.List-module_title__ZtmvP:focus-visible {
   display: flex;
   align-items: center;
   gap: 0.6rem;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
   padding: 0.35rem 0.7rem;
   font-family: var(--pho-font-terminal);
   font-size: var(--pho-type-control-sm-size);
@@ -5230,20 +5254,27 @@ a.List-module_title__ZtmvP:focus-visible {
   color: var(--pho-color-primary);
   text-shadow: var(--pho-glow-primary);
   font-weight: 700;
+  min-width: 0;
 }
 
 .HeroFrame-module_spacer__t-esZ {
   flex: 1 1 auto;
+  min-width: 0;
 }
 
 .HeroFrame-module_text__vlz6A {
   color: var(--pho-color-primary-muted);
   font-variant-numeric: tabular-nums;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .HeroFrame-module_bars__n4r3j {
   color: var(--pho-color-primary);
   text-shadow: var(--pho-glow-primary);
+  flex: 0 0 auto;
 }
 
 .HeroFrame-module_led__hJV5N {
@@ -5252,6 +5283,7 @@ a.List-module_title__ZtmvP:focus-visible {
   border-radius: 50%;
   box-shadow: 0 0 4px currentColor, 0 0 10px currentColor;
   display: inline-block;
+  flex: 0 0 auto;
 }
 
 .HeroFrame-module_ledRec__KVd-z {
@@ -5269,6 +5301,7 @@ a.List-module_title__ZtmvP:focus-visible {
 .HeroFrame-module_tape__eXrHW {
   flex: 1 1 auto;
   min-width: 0;
+  max-width: 100%;
   overflow: hidden;
   border-left: 1px dashed var(--pho-color-primary-faint);
   border-right: 1px dashed var(--pho-color-primary-faint);
@@ -5284,7 +5317,12 @@ a.List-module_title__ZtmvP:focus-visible {
 }
 
 .HeroFrame-module_artWrap__ZpaCe {
+  --pho-hero-art-scale: 1;
   position: relative;
+  max-width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  container-type: inline-size;
   padding: 1.4rem 1rem;
   display: flex;
   justify-content: center;
@@ -5297,9 +5335,11 @@ a.List-module_title__ZtmvP:focus-visible {
 .HeroFrame-module_art__cIW-I {
   font-family: var(--pho-font-heading);
   font-weight: 700;
-  font-size: clamp(4px, 0.85vw, 8px);
+  font-size: calc(clamp(4px, 0.85vw, 8px) * var(--pho-hero-art-scale, 1));
   line-height: 1.15;
   margin: 0;
+  max-width: 100%;
+  min-width: 0;
   white-space: pre;
   color: var(--pho-color-primary-strong);
   text-shadow: 0 0 1px var(--pho-color-primary), 0 0 8px rgba(44, 255, 122, 0.55), 0 0 20px rgba(44, 255, 122, 0.25);
@@ -5308,6 +5348,11 @@ a.List-module_title__ZtmvP:focus-visible {
   z-index: 1;
 }
 
+@supports (font-size: 1cqw) {
+  .HeroFrame-module_art__cIW-I {
+    font-size: calc(clamp(4px, 0.85cqw, 8px) * var(--pho-hero-art-scale, 1));
+  }
+}
 @media (max-width: 640px) {
   .HeroFrame-module_hud__HN8Wp {
     flex-wrap: wrap;
@@ -5327,7 +5372,14 @@ a.List-module_title__ZtmvP:focus-visible {
     padding: 1rem 0.6rem;
   }
   .HeroFrame-module_art__cIW-I {
-    font-size: clamp(3.2px, 1.4vw, 6px);
+    font-size: calc(clamp(3.2px, 1.4vw, 6px) * var(--pho-hero-art-scale, 1));
+  }
+}
+@supports (font-size: 1cqw) {
+  @media (max-width: 640px) {
+    .HeroFrame-module_art__cIW-I {
+      font-size: calc(clamp(3.2px, 1.4cqw, 6px) * var(--pho-hero-art-scale, 1));
+    }
   }
 }
 .HeroFrame-module_scanline__KU7MT {
@@ -6197,7 +6249,11 @@ a.List-module_title__ZtmvP:focus-visible {
 .Footer-module_footer__ghpRx {
   --footer-fg: var(--pho-color-primary-muted);
   --footer-accent: var(--pho-color-primary);
+  --pho-footer-max-width: 100%;
   width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
   margin-top: 3rem;
   padding: 1rem clamp(0.8rem, 3vw, 2rem);
   font-family: var(--pho-font-code);
@@ -6221,10 +6277,11 @@ a.List-module_title__ZtmvP:focus-visible {
 
 .Footer-module_row__cfHsO {
   display: grid;
-  grid-template-columns: 1fr auto 1fr;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: center;
   gap: 0.6rem 1.4rem;
-  max-width: 1280px;
+  max-width: var(--pho-footer-max-width);
+  min-width: 0;
   margin: 0 auto;
 }
 
@@ -6236,6 +6293,7 @@ a.List-module_title__ZtmvP:focus-visible {
   display: flex;
   align-items: center;
   gap: 0.6rem;
+  min-width: 0;
   font-family: var(--pho-font-terminal);
   letter-spacing: 0.2em;
   text-transform: uppercase;
@@ -6247,6 +6305,7 @@ a.List-module_title__ZtmvP:focus-visible {
 .Footer-module_led__hHsh- {
   width: 7px;
   height: 7px;
+  flex: 0 0 auto;
   border-radius: 50%;
   background: var(--footer-accent);
   box-shadow: 0 0 4px var(--footer-accent), 0 0 10px var(--footer-accent);
@@ -6262,6 +6321,7 @@ a.List-module_title__ZtmvP:focus-visible {
 .Footer-module_links__Ez8sZ {
   list-style: none;
   margin: 0;
+  min-width: 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
@@ -6296,6 +6356,7 @@ a.List-module_title__ZtmvP:focus-visible {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
+  min-width: 0;
 }
 
 .Footer-module_status__XGoA2 b {
@@ -6305,7 +6366,8 @@ a.List-module_title__ZtmvP:focus-visible {
 }
 
 .Footer-module_prompt__rw6Sh {
-  max-width: 1280px;
+  max-width: var(--pho-footer-max-width);
+  min-width: 0;
   margin: 0.8rem auto 0;
   font-family: var(--pho-font-terminal);
   font-size: var(--pho-type-caption-size);
@@ -6337,7 +6399,8 @@ a.List-module_title__ZtmvP:focus-visible {
 }
 
 .Footer-module_meta__-Y4I8 {
-  max-width: 1280px;
+  max-width: var(--pho-footer-max-width);
+  min-width: 0;
   margin: 0.45rem auto 0;
   color: var(--pho-color-text-faint);
   font-family: var(--pho-font-code);
@@ -6362,7 +6425,8 @@ a.List-module_title__ZtmvP:focus-visible {
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .Footer-module_led__hHsh-, .Footer-module_prompt__rw6Sh .Footer-module_cursor__5W1ot {
+  .Footer-module_led__hHsh-,
+  .Footer-module_prompt__rw6Sh .Footer-module_cursor__5W1ot {
     animation: none;
   }
 }
@@ -10214,6 +10278,8 @@ video::-webkit-media-text-track-display {
   border: var(--pho-border-line);
   padding: 1.6rem;
   min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
   position: relative;
 }
 
@@ -10362,6 +10428,9 @@ video::-webkit-media-text-track-display {
   background: linear-gradient(180deg, rgba(44, 255, 122, 0.05), rgba(44, 255, 122, 0.015)), var(--pho-color-background-deep);
   border: var(--pho-border-dashed);
   min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  container-type: inline-size;
   padding: 1rem;
 }
 
@@ -10369,6 +10438,8 @@ video::-webkit-media-text-track-display {
   border-bottom: var(--pho-border-dashed);
   margin-bottom: 1rem;
   min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
   padding-bottom: 0.9rem;
   position: relative;
 }
@@ -10385,10 +10456,17 @@ video::-webkit-media-text-track-display {
   font-size: clamp(1.45rem, 3vw, 2.1rem);
   line-height: 1;
   margin: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
   text-shadow: var(--pho-glow-primary);
   text-transform: uppercase;
 }
 
+@supports (font-size: 1cqw) {
+  .ContentEditor-module_previewTitle__9LkOu {
+    font-size: clamp(1.25rem, 8cqw, 2.1rem);
+  }
+}
 .ContentEditor-module_previewStatus__rlDjo {
   border: 1px solid var(--pho-color-primary-faint);
   color: var(--pho-color-primary-muted);
@@ -10405,7 +10483,7 @@ video::-webkit-media-text-track-display {
 .ContentEditor-module_previewGrid__UboMn {
   display: grid;
   gap: 0.75rem;
-  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
   min-width: 0;
 }
 

package/dist/styles/components.css

@@ -2599,19 +2599,25 @@ a.PostMeta-module_tag__3lRu-:hover {
   display: block;
   position: relative;
   width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
   text-align: center;
   text-decoration: none;
   color: inherit;
   background: none;
-  max-width: 100%;
-  overflow: visible;
+  overflow: hidden;
+  container-type: inline-size;
 }
 
 .AsciiBanner-module_bannerFrame__esMb7 {
   width: 100%;
+  max-width: 100%;
+  min-width: 0;
   height: var(--ascii-height, auto);
   min-height: 1px;
-  overflow: visible;
+  box-sizing: border-box;
+  overflow: hidden;
   text-align: center;
 }
 
@@ -2641,6 +2647,11 @@ a.PostMeta-module_tag__3lRu-:hover {
   will-change: transform, opacity, text-shadow;
 }
 
+@supports (font-size: 1cqw) {
+  .AsciiBanner-module_banner__0vW6g {
+    font-size: clamp(8px, 1.4cqw, 16px);
+  }
+}
 .AsciiBanner-module_fallback__Ya7H0 {
   position: absolute;
   width: 1px;
@@ -2725,6 +2736,7 @@ a.PostMeta-module_tag__3lRu-:hover {
 .HeaderNav-module_nav__1kFIH {
   font-family: var(--pho-font-heading);
   min-width: 0;
+  max-width: 100%;
 }
 
 .HeaderNav-module_list__mY2Ex {
@@ -2735,6 +2747,7 @@ a.PostMeta-module_tag__3lRu-:hover {
   list-style: none;
   margin: 0;
   min-width: 0;
+  max-width: 100%;
   padding: 0;
 }
 
@@ -2750,6 +2763,7 @@ a.PostMeta-module_tag__3lRu-:hover {
   gap: 0.18rem;
   min-height: 2rem;
   min-width: 0;
+  max-width: 100%;
   padding: 0.24rem 0.42rem;
   text-decoration: none;
   text-transform: uppercase;
@@ -2824,9 +2838,10 @@ a.PostMeta-module_tag__3lRu-:hover {
   background: rgba(44, 255, 122, 0.04);
   border: 1px solid var(--pho-color-primary-faint);
   max-width: 100%;
+  min-width: 0;
   overflow-x: auto;
   scrollbar-width: none;
-  width: fit-content;
+  width: 100%;
 }
 
 .HeaderNav-module_tabs__ibOCT .HeaderNav-module_list__mY2Ex::-webkit-scrollbar {
@@ -5198,6 +5213,11 @@ a.List-module_title__ZtmvP:focus-visible {
 }
 .HeroFrame-module_frame__pJTcJ {
   position: relative;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  container-type: inline-size;
   border: 1px solid var(--pho-color-primary);
   background: radial-gradient(ellipse 120% 70% at 50% 0%, rgba(44, 255, 122, 0.08) 0%, transparent 70%), var(--pho-color-background);
   box-shadow: 0 0 0 1px var(--pho-color-primary-faint) inset, 0 0 24px rgba(44, 255, 122, 0.18), 0 0 60px rgba(44, 255, 122, 0.06);
@@ -5209,6 +5229,10 @@ a.List-module_title__ZtmvP:focus-visible {
   display: flex;
   align-items: center;
   gap: 0.6rem;
+  min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
   padding: 0.35rem 0.7rem;
   font-family: var(--pho-font-terminal);
   font-size: var(--pho-type-control-sm-size);
@@ -5230,20 +5254,27 @@ a.List-module_title__ZtmvP:focus-visible {
   color: var(--pho-color-primary);
   text-shadow: var(--pho-glow-primary);
   font-weight: 700;
+  min-width: 0;
 }
 
 .HeroFrame-module_spacer__t-esZ {
   flex: 1 1 auto;
+  min-width: 0;
 }
 
 .HeroFrame-module_text__vlz6A {
   color: var(--pho-color-primary-muted);
   font-variant-numeric: tabular-nums;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .HeroFrame-module_bars__n4r3j {
   color: var(--pho-color-primary);
   text-shadow: var(--pho-glow-primary);
+  flex: 0 0 auto;
 }
 
 .HeroFrame-module_led__hJV5N {
@@ -5252,6 +5283,7 @@ a.List-module_title__ZtmvP:focus-visible {
   border-radius: 50%;
   box-shadow: 0 0 4px currentColor, 0 0 10px currentColor;
   display: inline-block;
+  flex: 0 0 auto;
 }
 
 .HeroFrame-module_ledRec__KVd-z {
@@ -5269,6 +5301,7 @@ a.List-module_title__ZtmvP:focus-visible {
 .HeroFrame-module_tape__eXrHW {
   flex: 1 1 auto;
   min-width: 0;
+  max-width: 100%;
   overflow: hidden;
   border-left: 1px dashed var(--pho-color-primary-faint);
   border-right: 1px dashed var(--pho-color-primary-faint);
@@ -5284,7 +5317,12 @@ a.List-module_title__ZtmvP:focus-visible {
 }
 
 .HeroFrame-module_artWrap__ZpaCe {
+  --pho-hero-art-scale: 1;
   position: relative;
+  max-width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  container-type: inline-size;
   padding: 1.4rem 1rem;
   display: flex;
   justify-content: center;
@@ -5297,9 +5335,11 @@ a.List-module_title__ZtmvP:focus-visible {
 .HeroFrame-module_art__cIW-I {
   font-family: var(--pho-font-heading);
   font-weight: 700;
-  font-size: clamp(4px, 0.85vw, 8px);
+  font-size: calc(clamp(4px, 0.85vw, 8px) * var(--pho-hero-art-scale, 1));
   line-height: 1.15;
   margin: 0;
+  max-width: 100%;
+  min-width: 0;
   white-space: pre;
   color: var(--pho-color-primary-strong);
   text-shadow: 0 0 1px var(--pho-color-primary), 0 0 8px rgba(44, 255, 122, 0.55), 0 0 20px rgba(44, 255, 122, 0.25);
@@ -5308,6 +5348,11 @@ a.List-module_title__ZtmvP:focus-visible {
   z-index: 1;
 }
 
+@supports (font-size: 1cqw) {
+  .HeroFrame-module_art__cIW-I {
+    font-size: calc(clamp(4px, 0.85cqw, 8px) * var(--pho-hero-art-scale, 1));
+  }
+}
 @media (max-width: 640px) {
   .HeroFrame-module_hud__HN8Wp {
     flex-wrap: wrap;
@@ -5327,7 +5372,14 @@ a.List-module_title__ZtmvP:focus-visible {
     padding: 1rem 0.6rem;
   }
   .HeroFrame-module_art__cIW-I {
-    font-size: clamp(3.2px, 1.4vw, 6px);
+    font-size: calc(clamp(3.2px, 1.4vw, 6px) * var(--pho-hero-art-scale, 1));
+  }
+}
+@supports (font-size: 1cqw) {
+  @media (max-width: 640px) {
+    .HeroFrame-module_art__cIW-I {
+      font-size: calc(clamp(3.2px, 1.4cqw, 6px) * var(--pho-hero-art-scale, 1));
+    }
   }
 }
 .HeroFrame-module_scanline__KU7MT {
@@ -6197,7 +6249,11 @@ a.List-module_title__ZtmvP:focus-visible {
 .Footer-module_footer__ghpRx {
   --footer-fg: var(--pho-color-primary-muted);
   --footer-accent: var(--pho-color-primary);
+  --pho-footer-max-width: 100%;
   width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
   margin-top: 3rem;
   padding: 1rem clamp(0.8rem, 3vw, 2rem);
   font-family: var(--pho-font-code);
@@ -6221,10 +6277,11 @@ a.List-module_title__ZtmvP:focus-visible {
 
 .Footer-module_row__cfHsO {
   display: grid;
-  grid-template-columns: 1fr auto 1fr;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: center;
   gap: 0.6rem 1.4rem;
-  max-width: 1280px;
+  max-width: var(--pho-footer-max-width);
+  min-width: 0;
   margin: 0 auto;
 }
 
@@ -6236,6 +6293,7 @@ a.List-module_title__ZtmvP:focus-visible {
   display: flex;
   align-items: center;
   gap: 0.6rem;
+  min-width: 0;
   font-family: var(--pho-font-terminal);
   letter-spacing: 0.2em;
   text-transform: uppercase;
@@ -6247,6 +6305,7 @@ a.List-module_title__ZtmvP:focus-visible {
 .Footer-module_led__hHsh- {
   width: 7px;
   height: 7px;
+  flex: 0 0 auto;
   border-radius: 50%;
   background: var(--footer-accent);
   box-shadow: 0 0 4px var(--footer-accent), 0 0 10px var(--footer-accent);
@@ -6262,6 +6321,7 @@ a.List-module_title__ZtmvP:focus-visible {
 .Footer-module_links__Ez8sZ {
   list-style: none;
   margin: 0;
+  min-width: 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
@@ -6296,6 +6356,7 @@ a.List-module_title__ZtmvP:focus-visible {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
+  min-width: 0;
 }
 
 .Footer-module_status__XGoA2 b {
@@ -6305,7 +6366,8 @@ a.List-module_title__ZtmvP:focus-visible {
 }
 
 .Footer-module_prompt__rw6Sh {
-  max-width: 1280px;
+  max-width: var(--pho-footer-max-width);
+  min-width: 0;
   margin: 0.8rem auto 0;
   font-family: var(--pho-font-terminal);
   font-size: var(--pho-type-caption-size);
@@ -6337,7 +6399,8 @@ a.List-module_title__ZtmvP:focus-visible {
 }
 
 .Footer-module_meta__-Y4I8 {
-  max-width: 1280px;
+  max-width: var(--pho-footer-max-width);
+  min-width: 0;
   margin: 0.45rem auto 0;
   color: var(--pho-color-text-faint);
   font-family: var(--pho-font-code);
@@ -6362,7 +6425,8 @@ a.List-module_title__ZtmvP:focus-visible {
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .Footer-module_led__hHsh-, .Footer-module_prompt__rw6Sh .Footer-module_cursor__5W1ot {
+  .Footer-module_led__hHsh-,
+  .Footer-module_prompt__rw6Sh .Footer-module_cursor__5W1ot {
     animation: none;
   }
 }
@@ -10214,6 +10278,8 @@ video::-webkit-media-text-track-display {
   border: var(--pho-border-line);
   padding: 1.6rem;
   min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
   position: relative;
 }
 
@@ -10362,6 +10428,9 @@ video::-webkit-media-text-track-display {
   background: linear-gradient(180deg, rgba(44, 255, 122, 0.05), rgba(44, 255, 122, 0.015)), var(--pho-color-background-deep);
   border: var(--pho-border-dashed);
   min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
+  container-type: inline-size;
   padding: 1rem;
 }
 
@@ -10369,6 +10438,8 @@ video::-webkit-media-text-track-display {
   border-bottom: var(--pho-border-dashed);
   margin-bottom: 1rem;
   min-width: 0;
+  max-width: 100%;
+  box-sizing: border-box;
   padding-bottom: 0.9rem;
   position: relative;
 }
@@ -10385,10 +10456,17 @@ video::-webkit-media-text-track-display {
   font-size: clamp(1.45rem, 3vw, 2.1rem);
   line-height: 1;
   margin: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
   text-shadow: var(--pho-glow-primary);
   text-transform: uppercase;
 }
 
+@supports (font-size: 1cqw) {
+  .ContentEditor-module_previewTitle__9LkOu {
+    font-size: clamp(1.25rem, 8cqw, 2.1rem);
+  }
+}
 .ContentEditor-module_previewStatus__rlDjo {
   border: 1px solid var(--pho-color-primary-faint);
   color: var(--pho-color-primary-muted);
@@ -10405,7 +10483,7 @@ video::-webkit-media-text-track-display {
 .ContentEditor-module_previewGrid__UboMn {
   display: grid;
   gap: 0.75rem;
-  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
   min-width: 0;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phosphor-ui",
-  "version": "0.3.39",
+  "version": "0.3.40",
   "description": "Phosphor UI — single-channel green-phosphor React component library. Retro/military/cyberpunk CRT aesthetic.",
   "keywords": [
     "react",
@@ -139,6 +139,7 @@
   },
   "dependencies": {
     "figlet": "1.11.0",
+    "phosphor-ui": "^0.3.39",
     "shiki": "4.0.2",
     "video.js": "^8.23.7"
   }