fix: minor CSS fixes per PR feedback

Author: sghoweri

packages/components/bolt-card-replacement/index.js

@@ -1,22 +1,6 @@
-import { polyfillLoader } from '@bolt/core-v3.x/polyfills';
-
-polyfillLoader.then(res => {
-  import(
-    /* webpackMode: 'eager', webpackChunkName: 'bolt-card-replacement' */ './src/card-replacement/card-replacement'
-  );
-  import(
-    /* webpackMode: 'eager', webpackChunkName: 'bolt-card-replacement-media' */ './src/card-replacement-media/card-replacement-media'
-  );
-  import(
-    /* webpackMode: 'eager', webpackChunkName: 'bolt-card-replacement-body' */ './src/card-replacement-body/card-replacement-body'
-  );
-  import(
-    /* webpackMode: 'eager', webpackChunkName: 'bolt-card-replacement-link' */ './src/card-replacement-link/card-replacement-link'
-  );
-  import(
-    /* webpackMode: 'eager', webpackChunkName: 'bolt-card-replacement-actions' */ './src/card-replacement-actions/card-replacement-actions'
-  );
-  import(
-    /* webpackMode: 'eager', webpackChunkName: 'bolt-card-replacement-action' */ './src/card-replacement-actions/card-replacement-action'
-  );
-});
+import './src/card-replacement/card-replacement';
+import './src/card-replacement-media/card-replacement-media';
+import './src/card-replacement-body/card-replacement-body';
+import './src/card-replacement-link/card-replacement-link';
+import './src/card-replacement-actions/card-replacement-actions';
+import './src/card-replacement-actions/card-replacement-action';

packages/components/bolt-card-replacement/src/card-replacement-actions/_card-replacement-actions.scss

@@ -7,6 +7,7 @@
 
 bolt-card-replacement-actions {
   @include bolt-card-replacement-border-reset;
+  overflow: hidden;
   margin-top: auto;
 }
 

packages/components/bolt-card-replacement/src/card-replacement-media/_card-replacement-media.scss

@@ -6,21 +6,22 @@
 @import '../_card-replacement-settings-and-tools.scss';
 
 :host {
-  flex-basis: auto;
-  flex-grow: 1;
-  flex-shrink: 1;
-  overflow: initial;
+  & [horizontal] {
+    flex-basis: 25%;
+    flex-grow: 1;
+    flex-shrink: 1;
+    max-width: 300px;
+  }
 }
 
 bolt-card-replacement-media {
-  flex-basis: auto;
-  flex-grow: 1;
-  flex-shrink: 1;
   position: relative;
-  overflow: initial;
+  overflow: hidden;
 
   [horizontal] & {
     flex-basis: 25%;
+    flex-grow: 1;
+    flex-shrink: 1;
     max-width: 300px;
   }
 }

packages/components/bolt-card-replacement/src/card-replacement/card-replacement.scss

@@ -6,7 +6,6 @@
 @import '../_card-replacement-settings-and-tools.scss';
 @import '@bolt/global/styles/06-themes/_themes.all.scss';
 
-
 // Custom element
 @include bolt-custom-element('bolt-card-replacement', block, medium);
 
@@ -23,11 +22,15 @@ bolt-card-replacement {
     height: 100%;
   }
 
-  &[rounded]{
+  &[rounded] {
     @include bolt-border-radius(large);
   }
-}
 
+  &[horizontal] > *:first-child {
+    border-radius: $bolt-card-replacement-border-radius 0 0
+      $bolt-card-replacement-border-radius;
+  }
+}
 
 // card-replacement container styles
 .c-bolt-card-replacement {
@@ -51,16 +54,16 @@ bolt-card-replacement {
       (
         xdark: background 0.85,
         dark: background 0.85,
-        light: secondary, // [Mai] This is not displaying correctly when JS is on.
-        xlight: background 0.85,
+        light: secondary,
+        // [Mai] This is not displaying correctly when JS is on.
+          xlight: background 0.85,
       )
     );
-    background-image:
-      linear-gradient(
-        to bottom,
-        rgba(bolt-color(white), 0.05),
-        rgba(bolt-color(white), 0.05)
-      );
+    background-image: linear-gradient(
+      to bottom,
+      rgba(bolt-color(white), 0.05),
+      rgba(bolt-color(white), 0.05)
+    );
   }
 }
 
@@ -77,7 +80,11 @@ bolt-card-replacement {
   transition: transform $bolt-transition;
 
   &:before {
-    @include bolt-shadow('level-30', false, $bolt-card-replacement-shadow-color);
+    @include bolt-shadow(
+      'level-30',
+      false,
+      $bolt-card-replacement-shadow-color
+    );
     content: '';
     opacity: 0;
     position: absolute;