@capillarytech/creatives-library 8.0.242-alpha.7 → 8.0.242-alpha.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.242-alpha.7",
+  "version": "8.0.242-alpha.9",
   "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 ${isLibraryMode ? 'html-editor-fullscreen--library-mode' : ''}`}>
+          <CapRow className={`html-editor-fullscreen html-editor-fullscreen--${variant} ${isLibraryMode ? 'html-editor-fullscreen--library-mode' : ''}`}>
             {/* Editor Toolbar - Conditional based on variant */}
             {variant === HTML_EDITOR_VARIANTS.EMAIL ? (
               <EditorToolbar

package/v2Components/HtmlEditor/_htmlEditor.scss

@@ -9,53 +9,47 @@
 
 // Fullscreen modal header styling - using proper CSS specificity instead of !important
 .html-editor-fullscreen {
-  .html-editor__header--fullscreen {
-    display: flex;
-    align-items: center;
-    background-color: $CAP_G10;
-    border-bottom: 0.0625rem solid $CAP_G08;
-    padding-right: 1rem;
-
-    // Device toggle takes available space
-    .device-toggle {
-      flex: 1;
-    }
-
-    // Toolbar styling in fullscreen mode
-    .editor-toolbar {
-      background-color: transparent;
-      border-bottom: none;
-      padding: 0;
-      min-height: 3.25rem;
-      height: 3.25rem;
-      position: relative;
+  // INAPP variant only: Fullscreen header styling
+  &--inapp {
+    .html-editor__header--fullscreen {
+      display: flex;
+      align-items: center;
+      background-color: $CAP_G10;
+      border-bottom: 0.0625rem solid $CAP_G08;
+      padding-right: 1rem;
 
-      // Right-align toolbar actions
-      &__right {
-        margin-left: auto;
+      // Device toggle takes available space
+      .device-toggle {
+        flex: 1;
       }
-    }
-  }
 
-  // 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%);
+      // Toolbar styling in fullscreen mode - INAPP variant only
+      .editor-toolbar {
+        background-color: transparent;
+        border-bottom: none;
+        padding: 0;
+        min-height: 3.25rem;
+        height: 3.25rem;
+        position: relative;
 
-    &__content {
-      height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
-      max-height: calc(95vh - 50%);
+        // Right-align toolbar actions
+        &__right {
+          margin-left: auto;
+        }
+      }
     }
 
-    iframe {
-      height: calc(95vh - 5%); // Same as editor pane - maximize to full available height
-      max-height: calc(95vh - 50%);
+    // Library mode: Position absolute for toolbar in fullscreen (INAPP variant only)
+    &.html-editor-fullscreen--library-mode {
+      .html-editor__header--fullscreen {
+        .editor-toolbar {
+          position: absolute;
+        }
+      }
     }
   }
 }
 
-}
-
 .html-editor {
   height: 37.5rem; // Fixed height instead of 100vh (600px = 37.5rem)
   max-height: 80vh; // Responsive maximum height
@@ -159,6 +153,15 @@
         }
       }
     }
+
+    // Library mode: Position absolute for toolbar in InApp variant
+    &.html-editor--library-mode {
+      .html-editor__header {
+        .editor-toolbar {
+          position: absolute;
+        }
+      }
+    }
   }
 
   // Responsive design
@@ -265,6 +268,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);