Merge pull request #49 from craftcms/bugfix/proxy-element-card-styles

fix .pec-footer's position

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Fixed getting a default price for a Product element. ([#40](https://github.com/craftcms/stripe/pull/40))
 - Fixed an issue that could occur when installing or running migration on MariaDB. ([#51](https://github.com/craftcms/stripe/issues/51))
+- Fixed a styling issue with Stripe’s element’s meta card footer.
 
 ## 1.2.0.2 - 2024-11-08
 

src/web/assets/stripecp/src/scss/stripecp.scss

@@ -15,27 +15,28 @@
 }
 
 .proxy-element-card {
-  position: relative;
-  padding-top: 15px;
-  padding-bottom: 40px;
+  display: grid;
+  padding-inline: 0;
+  padding-block-start: var(--spacing);
 
   .pec-header {
-    position: relative;
-    display: block;
+    grid-column-start: 1;
+    grid-column-end: 1;
     color: $textColor;
     width: 100%;
+    padding-inline: var(--padding);
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
 
     &:hover {
       color: $textColor;
       text-decoration: none;
     }
 
     .pec-external-icon {
-      position: absolute;
-      top: 50%;
-      @include right(0px);
-      transform: translate(-50%, -50%);
       color: $textColor;
+      margin-inline-end: 6px;
     }
 
     &:hover {
@@ -45,7 +46,7 @@
     }
 
     .pec-title {
-      margin-bottom: 0;
+      margin-block-end: 0;
     }
 
     .pec-subtitle {
@@ -54,21 +55,26 @@
   }
 
   .meta {
+    grid-column-start: 1;
+    grid-column-end: 1;
+    margin-inline: 0;
+
     ul.elements {
       width: 100%;
     }
   }
 
   .pec-footer {
-    position: absolute;
-    bottom: 0;
+    grid-column-start: 1;
+    grid-column-end: 1;
     width: 100%;
     @include right(0);
     font-size: 12px;
     background-color: $grey100;
     border-bottom-left-radius: $largeBorderRadius;
     border-bottom-right-radius: $largeBorderRadius;
-    padding: 10px 24px;
+    padding-block: 10px;
+    padding-inline: var(--padding);
 
     a {
       color: $textColor;
@@ -87,11 +93,6 @@
       transform: translate(-50%, -50%);
     }
   }
-
-  hr {
-    margin-left: var(--neg-padding);
-    margin-right: var(--neg-padding);
-  }
 }
 
 #subscriptions-vue-admin-table {