@brightcove/components-embed-code-modal 1.1.1 → 1.1.3

package/src/styles/prism/PrismLiveModal.sass

@@ -1,66 +1,58 @@
 @import "~@brightcove/prism-core/build/scss/tokens"
 
-.prismLiveModal
-  width: 900px
-  max-width: 90vw
-  height: 700px
-  max-height: 90vh
-
-  div[class^='Modal-Modal__content']
-    position: static
-
 .prismLiveModalContent
   display: grid
-  grid-template-columns: 52% 48%
+  grid-template-columns: minmax(0, 52%) minmax(0, 48%)
   gap: 0
   height: 100%
-  max-height: calc(700px - 120px)
-  overflow: hidden
+  min-height: 0
+  min-width: 0
 
 .prismLeftColumn
   padding: var(--spacing-5, 24px)
   display: flex
   flex-direction: column
-  gap: var(--spacing-3, 12px)
+  gap: var(--spacing-4, 16px)
   overflow-y: auto
+  min-height: 0
+  min-width: 0
   border-right: 1px solid var(--stroke-tertiary-default, #f5f4f0)
   background: var(--surface-primary-default, #ffffff)
 
-  /* Custom scrollbar */
-  &::-webkit-scrollbar
-    width: 6px
-
-  &::-webkit-scrollbar-track
-    background: transparent
-
-  &::-webkit-scrollbar-thumb
-    background: var(--stroke-tertiary-default, #f5f4f0)
-    border-radius: 3px
-
-  &::-webkit-scrollbar-thumb:hover
-    background: var(--stroke-secondary-default, #e8e6de)
-
 .prismRightColumn
   padding: var(--spacing-5, 24px)
   display: flex
   flex-direction: column
+  overflow-y: auto
+  min-height: 0
+  min-width: 0
   background: var(--surface-primary-default, #ffffff)
-  overflow: hidden
 
 .prismInputGroup
   display: flex
   gap: var(--spacing-2, 8px)
   align-items: flex-end
 
-  > *:first-child,
-  > *:last-child
-    flex: 0 0 auto
-    width: 44%
+.prismSizingField
+  flex: 1 1 0
+  min-width: 0
 
 .prismLinkButton
   margin-bottom: 8px
   flex-shrink: 0
 
+// Let the card grow with the code (all lines visible, long code scrolls the
+// column) and keep a 150px floor. The clip keeps the rounded corners that
+// `indefiniteGrow` gives up on the card root.
+.prismCodeCard
+  flex: 0 0 auto
+  border-radius: var(--radius-2, 8px)
+  overflow: hidden
+
+  // PrismCodeCard pins its code area at min-height 170px.
+  [class*='CodeCard__scroll']
+    min-height: 150px
+
 .prismCustomPluginNotice
   padding: var(--spacing-2, 8px) var(--spacing-3, 12px)
   background: var(--surface-warning-subdued, #fff4e5)
@@ -70,26 +62,6 @@
   border-radius: var(--radius-2, 8px)
   margin-top: var(--spacing-3, 12px)
 
-// Bound the code card so the upstream PrismCodeCard's own scroll
-// engages instead of overflowing the modal's left column. The upstream
-// component doesn't expose a height-cap prop, so we cap its inner
-// scroll element by class-name match. Re-verify on prism-core upgrades.
-.prismCodeCard
-  flex: 0 0 auto
-  max-height: 280px
-
-  [class*='CodeCard__scroll']
-    max-height: 220px
-    overflow-y: auto
-
-.prismFooter
-  display: flex
-  justify-content: flex-end
-  gap: var(--spacing-2, 8px)
-  padding: var(--spacing-4, 16px) var(--spacing-5, 24px)
-  border-top: 1px solid var(--stroke-tertiary-default, #f5f4f0)
-  background: var(--surface-primary-default, #ffffff)
-
 // Player Preview Styles
 .prismPlayerPreviewContainer
   display: flex
@@ -135,21 +107,22 @@
     height: 100%
     object-fit: contain
 
-// Responsive adjustments
-@media (max-width: 768px)
-  .prismLiveModal
-    width: 100%
-    height: 100%
-    max-width: 100vw
-    max-height: 100vh
-
+// Responsive adjustments. Matches useIsMobile / media's Prism modal policy:
+// below 1024 the modal is a vertical stack, from 1024 up it is two columns.
+@media (max-width: 1023px)
   .prismLiveModalContent
-    grid-template-columns: 1fr
-    overflow-y: auto
+    grid-template-columns: minmax(0, 1fr)
+    height: auto
 
   .prismLeftColumn
+    overflow-y: visible
     border-right: none
     border-bottom: 1px solid var(--stroke-tertiary-default, #f5f4f0)
 
   .prismRightColumn
+    overflow-y: visible
     min-height: 400px
+
+  // On phones the footer offers Copy Code instead of showing the card.
+  .prismCodeCard
+    display: none

package/src/translations/en.json

@@ -19,6 +19,10 @@
     "bcMapTrackingTextWarning": "This player is configured with MAPs Tracking. To ensure proper tracking, the JavaScript embed code should be used."
   },
   "done": "Done",
+  "urlShort": "URL",
+  "previewShort": "Preview",
+  "copyCode": "Copy Code",
+  "codeCopied": "Code copied to clipboard",
   "close": "Close",
   "toasterTitle": "Success.",
   "toasterMessage": "Code copied to clipboard",

package/src/translations/es.json

@@ -25,6 +25,10 @@
   "toasterErrorMessage": "Se ha producido un error al copiar el texto al portapapeles.",
   "customPluginNotice": "Puede ocurrir que las configuraciones personalizadas impidan la previsualización completa.",
   "done": "Hecho",
+  "urlShort": "URL",
+  "previewShort": "Vista previa",
+  "copyCode": "Copiar el código",
+  "codeCopied": "Código copiado al portapapeles",
   "close": "Cerrar",
   "noPlayerModalHeader": "Crear un reproductor de interactividad",
   "noPlayerModalContent1": "Para poder incrustar un proyecto de interactividad, primero hay que activar la función de interactividad.",

package/src/translations/fr.json

@@ -25,6 +25,10 @@
   "toasterErrorMessage": "Erreur lors de la copie du texte dans le presse-papiers",
   "customPluginNotice": "En raison des configurations personnalisées, vous pourriez ne pas pouvoir visualiser l'aperçu plein écran.",
   "done": "Terminé",
+  "urlShort": "URL",
+  "previewShort": "Aperçu",
+  "copyCode": "Copier le code",
+  "codeCopied": "Code copié dans le presse-papiers",
   "close": "Fermer",
   "noPlayerModalHeader": "Créer un lecteur d’interactivité",
   "noPlayerModalContent1": "Pour intégrer un projet d’interactivité vous devez activer la fonction d’interactivité.",

package/src/translations/ja.json

@@ -25,6 +25,10 @@
   "toasterErrorMessage": "テキストをクリップボードにコピー中にエラーが発生しました",
   "customPluginNotice": "カスタム設定により、プレビューが完全でない場合があります。",
   "done": "完了",
+  "urlShort": "URL",
+  "previewShort": "プレビュー",
+  "copyCode": "コードをコピー",
+  "codeCopied": "コードをクリップボードにコピーしました",
   "close": "閉じる",
   "noPlayerModalHeader": "インタラクティブプレーヤーの作成",
   "noPlayerModalContent1": "インタラクティブプロジェクトを埋め込むには、インタラクティブ機能を有効にする必要があります。",

package/src/translations/ko.json

@@ -25,6 +25,10 @@
   "toasterErrorMessage": "클립보드에 텍스트를 복사하는 중 오류 발생",
   "customPluginNotice": "사용자 정의 구성으로 인해 전체 미리 보기를 이용하지 못할 수도 있습니다.",
   "done": "완료",
+  "urlShort": "URL",
+  "previewShort": "미리보기",
+  "copyCode": "코드 복사",
+  "codeCopied": "코드가 클립보드에 복사되었습니다",
   "close": "닫기",
   "noPlayerModalHeader": "상호작용성 플레이어 생성",
   "noPlayerModalContent1": "상호작용성 프로젝트를 임베딩하려면 상호작용성 기능을 활성화해야 합니다.",

package/src/translations/zh.json

@@ -25,6 +25,10 @@
   "toasterErrorMessage": "複製文字到剪貼簿時發生錯誤",
   "customPluginNotice": "由於自訂組態，您可能無法體驗完整預覽版。",
   "done": "完成",
+  "urlShort": "URL",
+  "previewShort": "預覽",
+  "copyCode": "複製代碼",
+  "codeCopied": "代碼已複製到剪貼簿",
   "close": "關閉",
   "noPlayerModalHeader": "建立互動播放程式",
   "noPlayerModalContent1": "若要嵌入互動專案，您必須啟用互動功能。",