@capillarytech/creatives-library 9.0.15-alpha.3 → 9.0.16-beta.0

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -2,7 +2,7 @@
 
 /**
  * UnifiedPreview Styles
- *
+ * 
  * Consistent styling for preview across all channels
  */
 
@@ -11,24 +11,25 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    background: $CAP_WHITE;
     overflow: hidden;
-
+  
     // Preview Chrome wrapper (matches old TestAndPreviewSlidebox design)
     .preview-chrome {
       background: $CAP_WHITE;
       overflow: hidden;
-
+  
       .preview-divider {
         margin: 0;
       }
-
+  
       .preview-header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: $CAP_SPACE_08 $CAP_SPACE_16 $CAP_SPACE_06 $CAP_SPACE_16;
         background: $CAP_G09;
-
+  
         .preview-for {
           font-size: $FONT_SIZE_M;
           color: #595959;
@@ -38,20 +39,20 @@
             margin-left: $CAP_SPACE_04;
           }
         }
-
+  
         .device-toggle {
           display: flex;
           gap: $CAP_SPACE_08;
           background-color: #e0e0e0;
           padding: $CAP_SPACE_06 $CAP_SPACE_08;
           border-radius: $CAP_SPACE_08;
-
+  
           .anticon {
             padding: $CAP_SPACE_04;
             border-radius: $CAP_SPACE_04;
             cursor: pointer;
             color: #595959;
-
+  
             &.active {
               background-color: $CAP_WHITE;
               color: #262626;
@@ -61,27 +62,7 @@
         }
       }
     }
-
-    &.unified-preview-rcs-tabs {
-      .ant-tabs-nav {
-        margin: 0;
-        padding: 0 $CAP_SPACE_16;
-      }
-
-      // Prevent white hover/active backgrounds from default antd styles
-      .ant-tabs-tab,
-      .ant-tabs-tab:hover,
-      .ant-tabs-tab-active {
-        background: transparent;
-      }
-
-      .ant-tabs-tab-btn,
-      .ant-tabs-tab-btn:hover,
-      .ant-tabs-tab-btn:active {
-        background: transparent;
-      }
-    }
-
+  
     // Preview Content Container
     .preview-content-container {
       flex: 1;
@@ -94,33 +75,25 @@
     .preview-content-container-no-header {
       background-color: $CAP_WHITE;
     }
-
+  
     // Device Frames
     .unified-preview-frame {
       width: 100%;
       display: flex;
       justify-content: center;
-
+  
       .device-frame {
         background: $CAP_WHITE;
         border-radius: $CAP_SPACE_08;
         box-shadow: 0 $CAP_SPACE_04 $CAP_SPACE_12 rgba(0, 0, 0, 0.15);
         overflow: hidden;
         transition: all 0.3s ease;
-        // iOS Safari fails to clip a `transform`ed descendant (.rcs-carousel-panel
-        // uses translateX(-50%) to center itself) to this ancestor's border-radius —
-        // its white background bleeds past the rounded edge on real devices, even
-        // though overflow:hidden clips it correctly everywhere else. Forcing Safari
-        // onto its masking render path (instead of the buggy transform+overflow-clip
-        // path) fixes this; no-op on every other browser.
-        -webkit-mask-image: -webkit-radial-gradient(white, black);
-        mask-image: radial-gradient(white, black);
-
+  
         // Desktop Frame
         &.device-frame-desktop {
           width: 100%;
           min-height: 42.857rem;
-
+  
           .desktop-chrome {
             height: $CAP_SPACE_40;
             background: $CAP_G12;
@@ -129,30 +102,30 @@
             align-items: center;
             padding: 0 $CAP_SPACE_12;
             gap: $CAP_SPACE_12;
-
+  
             .chrome-dots {
               display: flex;
               gap: $CAP_SPACE_06;
-
+  
               .dot {
                 width: $CAP_SPACE_12;
                 height: $CAP_SPACE_12;
                 border-radius: 50%;
-
+  
                 &.dot-close {
                   background: #ff5f56;
                 }
-
+  
                 &.dot-minimize {
                   background: #ffbd2e;
                 }
-
+  
                 &.dot-maximize {
                   background: #27c93f;
                 }
               }
             }
-
+  
             .chrome-address-bar {
               flex: 1;
               background: $CAP_WHITE;
@@ -162,25 +135,25 @@
               color: #8c8c8c;
             }
           }
-
+  
           .device-content {
             min-height: 40rem;
             background: $CAP_WHITE;
           }
         }
-
+  
         // Tablet Frame
         &.device-frame-tablet {
           width: 54.857rem;
           max-width: 90%;
-
+  
           .tablet-chrome {
             height: $CAP_SPACE_24;
             background: #333333;
             display: flex;
             align-items: center;
             justify-content: center;
-
+  
             .tablet-camera {
               width: $CAP_SPACE_08;
               height: $CAP_SPACE_08;
@@ -189,19 +162,19 @@
               border: $CAP_SPACE_01 solid #666666;
             }
           }
-
+  
           .device-content {
             min-height: 73.143rem;
             background: $CAP_WHITE;
           }
-
+  
           .tablet-footer {
             height: 3.571rem;
             background: #333333;
             display: flex;
             align-items: center;
             justify-content: center;
-
+  
             .home-button {
               width: $CAP_SPACE_40;
               height: $CAP_SPACE_40;
@@ -211,19 +184,19 @@
             }
           }
         }
-
+  
         // Mobile Frame
         &.device-frame-mobile {
           width: 26.786rem;
           max-width: 90%;
-
+  
           .mobile-chrome {
             height: $CAP_SPACE_24;
             background: #000000;
             display: flex;
             align-items: center;
             justify-content: center;
-
+  
             .mobile-notch {
               width: 10.714rem;
               height: 1.571rem;
@@ -231,19 +204,19 @@
               border-radius: 0 0 $CAP_SPACE_12 $CAP_SPACE_12;
             }
           }
-
+  
           .device-content {
             min-height: 47.643rem;
             background: $CAP_WHITE;
           }
-
+  
           .mobile-footer {
             height: $CAP_SPACE_24;
             background: #000000;
             display: flex;
             align-items: center;
             justify-content: center;
-
+  
             .home-indicator {
               width: $CAP_SPACE_80;
               height: $CAP_SPACE_04;
@@ -255,7 +228,7 @@
         }
       }
     }
-
+  
     // Channel Preview Placeholders (Phase 5)
     .channel-preview-placeholder {
       display: flex;
@@ -265,7 +238,7 @@
       padding: $CAP_SPACE_60 $CAP_SPACE_24;
       text-align: center;
       min-height: 28.571rem;
-
+    
       .question-circle {
         font-size: $CAP_SPACE_48;
         color: $CAP_COLOR_16;
@@ -276,13 +249,13 @@
         font-weight: 600;
         color: #262626;
       }
-
+  
       p {
         margin-top: $CAP_SPACE_08;
         font-size: $FONT_SIZE_M;
         color: #8c8c8c;
       }
-
+  
       .preview-subject {
         margin-top: $CAP_SPACE_24;
         padding: $CAP_SPACE_12 $CAP_SPACE_16;
@@ -291,26 +264,26 @@
         text-align: left;
         width: 100%;
         max-width: 35.714rem;
-
+  
         strong {
           color: #595959;
           margin-right: $CAP_SPACE_08;
         }
       }
-
+  
       .preview-body-placeholder {
         margin-top: $CAP_SPACE_12;
         padding: $CAP_SPACE_08 $CAP_SPACE_12;
         background: #fafafa;
         border: $CAP_SPACE_01 dashed $CAP_COLOR_16;
         border-radius: $CAP_SPACE_04;
-
+  
         small {
           color: #8c8c8c;
         }
       }
     }
-
+  
     // Loading State
     &.unified-preview-loading {
       .preview-loading-container {
@@ -320,14 +293,14 @@
         justify-content: center;
         gap: $CAP_SPACE_16;
         min-height: 28.571rem;
-
+  
         .loading-text {
           font-size: $FONT_SIZE_M;
           color: #8c8c8c;
         }
       }
     }
-
+  
     // Error State
     &.unified-preview-error {
       .preview-error-container {
@@ -338,7 +311,7 @@
         justify-content: center;
         gap: $CAP_SPACE_16;
         min-height: 28.571rem;
-
+        
         .exclamation-circle {
           font-size: $CAP_SPACE_48;
           color: #ff4d4f;
@@ -348,7 +321,7 @@
           font-weight: 600;
           color: #262626;
         }
-
+  
         .error-message {
           font-size: $FONT_SIZE_M;
           color: #ff4d4f;
@@ -357,7 +330,7 @@
         }
       }
     }
-
+  
     // Preview Metadata
     .preview-metadata {
       padding: $CAP_SPACE_12 $CAP_SPACE_24;
@@ -367,7 +340,7 @@
       color: #8c8c8c;
       display: flex;
       gap: $CAP_SPACE_16;
-
+  
       .metadata-item {
         display: flex;
         gap: $CAP_SPACE_04;
@@ -559,7 +532,7 @@
           font-weight: 600;
           color: #262626;
         }
-
+  
         .error-message {
           font-size: $FONT_SIZE_M;
           color: #ff4d4f;
@@ -598,12 +571,9 @@
       transform: translateX(-50%);
       width: 100%;
       max-width: 26.786rem;
-      min-width: 0; // flex descendant overflow: allow shrink inside narrow screen
       height: calc(100% - 4.5rem);
       display: flex;
       flex-direction: column;
-      overflow-x: hidden;
-      box-sizing: border-box;
 
       &.sms-content-overlay-android {
         height: calc(100% - 3.8rem);
@@ -771,7 +741,7 @@
           font-weight: 600;
           color: #262626;
         }
-
+  
         .sms-error-message {
           font-size: $FONT_SIZE_M;
           color: #ff4d4f;
@@ -793,280 +763,13 @@
     }
   }
 
-  // RCS Carousel card styles — scoped to .rcs-carousel-panel (which lives outside the
-  // overflow-x:hidden overlay so horizontal scroll events reach .scroll-container freely).
-  .rcs-device-container {
-    .rcs-carousel-panel {
-      position: absolute;
-      // Centered via left/right auto-margins instead of left:50% + translateX(-50%) —
-      // a `transform` on this element put every rounded+overflow:hidden box nested
-      // inside it (this panel's own corners, the card corners, the image corners...)
-      // in a transformed stacking context that iOS Safari fails to clip correctly,
-      // letting their square corners/backgrounds bleed past the rounded edges. Plain
-      // auto-margin centering has no such bug.
-      left: 0;
-      right: 0;
-      margin-left: auto;
-      margin-right: auto;
-      width: 100%;
-      max-width: 26.786rem;
-      box-sizing: border-box;
-      top: 4.143rem;
-      height: calc(100% - 2.5rem);
-      display: flex;
-      flex-direction: column;
-      padding-top: 5.857rem; // nav (3.428rem) + date separator (~2.429rem)
-      padding-bottom: $CAP_SPACE_16;
-      padding-left: 0.4rem;
-      padding-right: 0.4rem;
-      background-color: $CAP_WHITE;
-      background-clip: content-box;
-      border-bottom-left-radius: 2.429rem;
-      border-bottom-right-radius: 2.429rem;
-      // background-clip only clips the background fill to these rounded corners —
-      // it does NOT clip child content, so message/card boxes could render past the
-      // rounded edge regardless of browser. This doesn't affect the horizontal touch
-      // scroll .scroll-container needs: that workaround was about not nesting inside
-      // the *other* sibling overlay (.sms-content-overlay's overflow-x:hidden), not
-      // about this element's own overflow.
-      overflow: hidden;
-
-      &.rcs-carousel-panel-android {
-        top: 3.1rem;
-        border-radius: 4rem;
-      }
-
-      &.rcs-carousel-panel-ios {
-        height: calc(100% - 4.2rem);
-      }
-
-        .rcs-carousel-timestamp {
-          font-size: $FONT_SIZE_S;
-          color: #8c8c8c;
-          align-self: flex-end;
-          padding-right: $CAP_SPACE_04;
-          padding-top: $CAP_SPACE_04;
-        }
-
-        .msg-container-carousel {
-          display: flex;
-          flex-direction: column;
-          width: 100%;
-          padding: 0 $CAP_SPACE_16;
-
-          .scroll-container {
-            display: flex;
-            flex-wrap: nowrap;
-            gap: 0.75rem;
-            overflow-x: auto;
-            overflow-y: hidden;
-            width: 100%;
-            scrollbar-width: none;
-
-            &::-webkit-scrollbar {
-              display: none;
-            }
-          }
-        }
-
-          // Wraps the card + its CTA bar so both scroll horizontally together as one unit,
-          // while remaining two visually distinct, separately-rounded elements (Figma reference —
-          // the CTA bar is its own floating pill below the card, not part of it).
-          .rcs-carousel-item {
-            display: flex;
-            flex-direction: column;
-            gap: $CAP_SPACE_04;
-            // Ensure item width is stable and does not shrink to text width
-            flex: 0 0 15.375rem; // ~246px; fills container leaving ~50% of next card peeking
-            margin-right: 0; // spacing handled by scroll-container gap
-          }
-
-          .message-pop-carousel {
-            // Match TemplatePreview carousel card look (big card + subtle shadow)
-            background-color: $CAP_WHITE;
-            border: 1px solid $CAP_G07; // #dfe2e7 — keeps the card visible against the
-            // chat background when there's no photo yet to provide contrast (Figma empty state)
-            border-radius: $CAP_SPACE_04; // 4px (Figma RCS carousel card corner)
-            width: 100%;
-            padding: 0;
-            color: $CAP_G01;
-            overflow: hidden;
-            box-shadow: 0 0 0.625rem 0 rgba(0, 0, 0, 0.08);
-            position: relative;
-          }
-
-          .whatsapp-content {
-            font-family: Roboto, 'Open Sans', sans-serif;
-            margin: 0;
-            width: 100%;
-          }
-
-          // Height follows width × aspect-ratio; inline style from carouselPreviewDimensions overrides fallback.
-          .whatsapp-image.rcs-carousel-media-wrap {
-            width: 100%;
-            height: auto;
-            aspect-ratio: 1280 / 720; // MEDIUM_MEDIUM image fallback when dimensions not passed
-            display: block;
-            overflow: hidden;
-            border-radius: $CAP_SPACE_04 $CAP_SPACE_04 0 0; // 4px (Figma)
-            margin-bottom: 0;
-
-            // CapImage (antd Image) applies className on wrapper; ensure inner img is constrained too.
-            img,
-            .ant-image-img {
-              width: 100%;
-              height: 100%;
-              object-fit: cover;
-              border-radius: inherit;
-              display: block;
-            }
-
-            // Plain <img> in RCS carousel preview (not CapImage)
-            .rcs-carousel-img {
-              width: 100%;
-              height: 100%;
-              object-fit: cover;
-              border-radius: inherit;
-              display: block;
-            }
-          }
-
-          .video-preview {
-            position: relative;
-            width: 100%;
-            margin-bottom: 0;
-
-            .whatsapp-image.rcs-carousel-media-wrap {
-              width: 100%;
-              height: auto;
-              aspect-ratio: 796 / 448; // MEDIUM_MEDIUM video thumbnail fallback
-              margin-bottom: 0;
-
-              img,
-              .ant-image-img,
-              .rcs-carousel-img {
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-                border-radius: inherit;
-                display: block;
-              }
-            }
-
-            .icon-position {
-              position: absolute;
-              top: 50%;
-              left: 50%;
-              transform: translate(-50%, -50%);
-              display: flex;
-              align-items: center;
-              justify-content: center;
-
-              .video-icon {
-                width: $CAP_SPACE_48;
-                height: $CAP_SPACE_48;
-              }
-            }
-          }
-
-          // CapTooltip shrink-wraps its wrapper/trigger by default and forces `display: inline-block`
-          // inline on the trigger span, so .video-preview's width:100% collapses to content width
-          // unless these are stretched to fill the card (inline style needs !important to override).
-          .rcs-carousel-video-tooltip-wrapper {
-            display: block;
-            width: 100%;
-          }
-
-          .rcs-carousel-video-tooltip-trigger {
-            display: block !important;
-            width: 100%;
-          }
-
-          .carousel-content {
-            padding: 0.625rem 0.75rem; // 10px 12px
-            width: 100%;
-            background-color: $CAP_G08; // #ebecf0 (Figma: grey info panel, not white)
-            white-space: normal; // override scroll-container's nowrap so text can wrap
-            display: flex;
-            flex-direction: column;
-            border-bottom-left-radius: 0.25rem; // 4px — this is the card's own bottom edge;
-            border-bottom-right-radius: 0.25rem; // the CTA bar below is a separate element (Figma)
-
-            // Title/body typography via CapLabel type (label1 / label2, etc.)
-            .carousel-title {
-              margin-bottom: 0.25rem; // 4px
-              display: block;
-              overflow: visible;
-              white-space: normal;
-              overflow-wrap: anywhere;
-              color: $CAP_G04; // #5e6c84 (Figma)
-              font-weight: $FONT_WEIGHT_BOLD;
-            }
-
-            .carousel-message {
-              display: block;
-              overflow: visible;
-              white-space: normal;
-              overflow-wrap: anywhere;
-              color: $FONT_COLOR_03; // #97a0af (Figma)
-              font-weight: $FONT_WEIGHT_REGULAR;
-            }
-
-            .rcs-carousel-field-placeholder {
-              color: $CAP_G05;
-              font-weight: $FONT_WEIGHT_REGULAR;
-            }
-          }
-
-          // Divider between message body and suggestions — subtle gray on the gray bubble
-          .whatsapp-divider {
-            margin: 0;
-            border-top: 1px solid $CAP_G07;
-          }
-
-          // Inside a carousel card (white bg) dividers should stay white
-          .message-pop-carousel .whatsapp-divider {
-            border-top: 1px solid $CAP_WHITE;
-          }
-
-          // Own floating pill(s) below the card (NOT part of .message-pop-carousel) — sits in
-          // .rcs-carousel-item, separated from the card by that wrapper's `gap` (Figma reference).
-          .rcs-carousel-cta-stack.cap-row-v2 {
-            display: flex;
-            flex-direction: column;
-            flex-wrap: nowrap;
-            width: 100%;
-            gap: 0.25rem;
-            box-sizing: border-box;
-            align-items: stretch;
-          }
-
-          .rcs-cta-preview--carousel-bar {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 0.375rem;
-            width: 100%;
-            margin: 0;
-            padding: 0.625rem 0.75rem;
-            box-sizing: border-box;
-            background-color: $CAP_G08; // #ebecf0 (Figma: grey "Call Now" pill, not white)
-            border-radius: 0.25rem;
-            font-size: $FONT_SIZE_M;
-            font-weight: $FONT_WEIGHT_MEDIUM;
-            color: $CAP_G04; // #5e6c84 (Figma)
-            text-align: center;
-          }
-    }
-  }
-
   // WhatsApp Preview Content Styles (Phase 8)
   // All WhatsApp styles wrapped in parent class for increased specificity
   // This prevents other CSS (like CapLabel) from overriding WhatsApp-specific styles
   .whatsapp-preview-wrapper {
     // Using same CSS classes as TemplatePreview for consistency
     // Styles are copied from TemplatePreview/_templatePreview.scss to ensure they work
-
+    
     .shell-v2-whatsapp {
       position: relative;
       -webkit-transform: translate(-50%);
@@ -1141,23 +844,23 @@
         }
 
         // WhatsApp message pop styles (matching TemplatePreview)
-        &.whatsapp-message-pop,
-        &.whatsapp-message-pop-carousel {
+        &.whatsapp-message-pop {
           padding: $CAP_SPACE_04 0 $CAP_SPACE_08;
           border-radius: $CAP_SPACE_06;
           background-color: $CAP_WHITE;
-          left: 0;
-        }
-
-        &.whatsapp-message-pop {
           width: 88%;
+          left: 0;
         }
 
         // WhatsApp carousel message pop styles
         &.whatsapp-message-pop-carousel {
+          padding: $CAP_SPACE_04 0 $CAP_SPACE_08;
+          border-radius: $CAP_SPACE_06;
+          background-color: $CAP_WHITE;
           width: 10.4rem;
           cursor: pointer;
           flex-shrink: 0;
+          left: 0;
         }
       }
     }
@@ -1222,7 +925,7 @@
         line-height: 1rem;
         font-family: Roboto, 'Open Sans', sans-serif;
       }
-
+  
       .whatsapp-template-footer-preview {
         // From WhatsApp/index.scss: color: $CAP_G04, but use white for preview
         color: $CAP_G01;
@@ -1304,19 +1007,19 @@
       color: #8c8c8c;
       font-size: $FONT_SIZE_M;
     }
-
+  
     .whatsapp-error-text {
       font-size: $FONT_SIZE_L;
       font-weight: 600;
       color: #262626;
     }
-
+  
     .whatsapp-error-message {
       font-size: $FONT_SIZE_M;
       color: #ff4d4f;
       text-align: center;
     }
-
+  
     .whatsapp-no-content {
       color: #8c8c8c;
       font-size: $FONT_SIZE_M;
@@ -1368,14 +1071,14 @@
       color: #8c8c8c;
       margin-top: $CAP_SPACE_04;
     }
-
+  
     .url-preview {
       font-size: $FONT_SIZE_S;
       color: #1890ff;
       word-break: break-all;
     }
   }
-
+  
   // InApp Preview Content Styles (Phase 10)
   // Styles copied from TemplatePreview/_templatePreview.scss to ensure consistency
   // These styles work within the SMS device container structure
@@ -1436,11 +1139,11 @@
         .inapp-message-container-FULLSCREEN {
           position: relative;
           background-color: $CAP_WHITE;
-          width: 100%;
+          width: 100%;  
           height: 100%;
           align-items: center;
           padding: 0 $CAP_SPACE_16;
-          border-bottom-left-radius: 2.6rem;
+          border-bottom-left-radius: 2.6rem;   
           border-bottom-right-radius: 2.6rem;
           .inapp-title-FULLSCREEN {
             align-items: center;
@@ -2270,7 +1973,7 @@
             max-height: 7.5rem;
             margin-left: $CAP_SPACE_24;
           }
-
+          
           .mpush-gif-preview {
             max-width: 100%;
             max-height: 7.5rem;
@@ -2528,7 +2231,6 @@
                 font-weight: 500;
                 display: -webkit-box;
                 -webkit-line-clamp: 1;
-                line-clamp: 1;
                 -webkit-box-orient: vertical;
                 overflow: hidden;
                 color: $CAP_WHITE;
@@ -2580,7 +2282,7 @@
       color: $FONT_COLOR_01;
       margin-bottom: $CAP_SPACE_12;
     }
-
+  
     .preview-text {
       font-weight: 400;
       font-size: $FONT_SIZE_S;
@@ -2615,13 +2317,13 @@
       justify-content: center;
       padding: $CAP_SPACE_60 $CAP_SPACE_24;
       gap: $CAP_SPACE_16;
-
+  
       .zalo-loading-text {
         color: #8c8c8c;
         font-size: $FONT_SIZE_M;
       }
     }
-
+  
     // Error state
     .zalo-error-container {
       display: flex;
@@ -2630,13 +2332,13 @@
       justify-content: center;
       padding: $CAP_SPACE_60 $CAP_SPACE_24;
       gap: $CAP_SPACE_16;
-
+  
       .zalo-error-text {
         font-size: $FONT_SIZE_L;
         font-weight: 600;
         color: #262626;
       }
-
+  
       .zalo-error-message {
         font-size: $FONT_SIZE_M;
         color: #ff4d4f;
@@ -2708,39 +2410,36 @@
       }
     }
   }
-
+  
   @media (max-width: 54.857rem) {
     .unified-preview {
       .preview-header {
         flex-direction: column;
         align-items: flex-start;
         gap: $CAP_SPACE_12;
-
+  
         .preview-header-right {
           width: 100%;
           justify-content: flex-start;
         }
       }
-
+  
       .preview-content-container {
         padding: $CAP_SPACE_16;
       }
-
+  
       .device-frame {
         &.device-frame-desktop,
         &.device-frame-tablet {
           width: 100% !important;
           max-width: 100% !important;
         }
-
-        // NOT stretched to 100% here like desktop/tablet — this frame simulates a
-        // phone, so on a narrow (e.g. real iOS) viewport it should stay phone-width
-        // and shrink via its own `max-width: 90%` rule, not stretch to fill the
-        // container. The old `width: 100% !important` made the frame's white
-        // background render far wider than the phone silhouette, visibly eating
-        // into the grey backdrop around it, while the carousel content inside
-        // stayed capped at its normal phone width — a width mismatch, not a
-        // clipping bug.
+  
+        &.device-frame-mobile {
+          width: 100% !important;
+          max-width: 100% !important;
+        }
       }
     }
   }
+