@capillarytech/creatives-library 8.0.242-alpha.6 → 8.0.242-alpha.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.242-alpha.6",
+  "version": "8.0.242-alpha.8",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/HtmlEditor/HTMLEditor.js

@@ -510,7 +510,7 @@ const HTMLEditor = ({
           width="90vw"
           className="html-editor-fullscreen-modal"
         >
-          <CapRow className="html-editor-fullscreen">
+          <CapRow className={`html-editor-fullscreen ${isLibraryMode ? 'html-editor-fullscreen--library-mode' : ''}`}>
             {/* Editor Toolbar - Conditional based on variant */}
             {variant === HTML_EDITOR_VARIANTS.EMAIL ? (
               <EditorToolbar

package/v2Components/HtmlEditor/_htmlEditor.scss

@@ -50,10 +50,9 @@
   overflow: hidden;
 
   // Library mode: Apply specific styles when isFullMode is false
-  // Using combined selector for higher specificity without !important
   &.html-editor--library-mode {
     .preview-pane {
-      max-height: calc(107vh);
+      max-height: calc(95vh - 5%);
 
       &__content {
         height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
@@ -248,6 +247,23 @@
   }
 }
 
+// Fullscreen modal library mode styles (outside .html-editor block since fullscreen is a separate element)
+.html-editor-fullscreen--library-mode {
+  .preview-pane {
+    max-height: calc(95vh - 5%);
+
+    &__content {
+      height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
+      max-height: calc(95vh - 50%);
+    }
+
+    iframe {
+      height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
+      max-height: calc(95vh - 50%);
+    }
+  }
+}
+
 // Animation classes for smooth transitions
 .html-editor-transition {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);