@hulkapps/app-manager-vue 3.0.10 → 3.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hulkapps/app-manager-vue",
-  "version": "3.0.10",
+  "version": "3.0.11",
   "description": "Vue SDK to render app manager contents",
   "main": "dist/app-manager-vue.ssr.js",
   "browser": "dist/app-manager-vue.esm.js",

package/src/components/Plans/AppManagerGroupPlan.vue

@@ -934,7 +934,7 @@
 
     @media (min-width: 0px) and (max-width: 576px) {
       .app-manager .app-manager, .app-manager .app-manager-body {
-        overflow-x: scroll;
+        //overflow-x: scroll;
       }
     }
 

package/src/components/Plans/AppManagerSliderPlan.vue

@@ -630,26 +630,37 @@ export default {
   width: 100%;
 }
 
-@media (max-width: 700px) {
-  .Polaris-ButtonGroup__Item {
-    width: auto !important;
+@media (max-width: 1023px) {
+  .customization-bundle-section {
+    flex-direction: column;
+    gap: 20px;
   }
-  .app-manager .Polaris-Button {
-    padding: 7px 8px !important;
+}
+
+@media (max-width: 992px) {
+  .bill-cycle-select-group.full-width,
+  .app-manager .Polaris-Page--fullWidth {
+    max-width: calc(100% - 64px) !important;
   }
 }
 
 @media (max-width: 767px) {
+  .bill-cycle-select-group.full-width,
+  .app-manager .Polaris-Page--fullWidth {
+    max-width: 100% !important;
+  }
   .bill-cycle-select-group {
-    flex-direction: column-reverse;
+    flex-direction: column;
     gap: 10px;
   }
 }
 
-@media (max-width: 1023px) {
-  .customization-bundle-section {
-    flex-direction: column;
-    gap: 20px;
+@media (max-width: 700px) {
+  .Polaris-ButtonGroup__Item {
+    width: auto !important;
+  }
+  .app-manager .Polaris-Button {
+    padding: 7px 8px !important;
   }
 }
 </style>

package/src/components/PolarisNew/AppCard.vue

@@ -201,7 +201,7 @@ export default {
   background-color: #e0f0ff;
   width: fit-content;
   margin-right: 12px;
-  padding: 3px 4px;
+  padding: 3px 6px 3px 3px;
   border-radius: 8px;
   font-size: 12px;
   color: #00527c;
@@ -261,14 +261,13 @@ export default {
   text-decoration: none;
 }
 
-
-
 @media (max-width: 767px) {
   .featured-options {
     text-wrap: wrap;
   }
   .details {
     gap: 8px;
+    width: 100%;
   }
   .app-tags {
     display: flex;
@@ -276,6 +275,11 @@ export default {
     gap: 8px;
     margin-bottom: 8px;
   }
+
+  .app-tag {
+    padding: 1px 6px 5px 3px;
+  }
+
   .upper-details,
   .lower-details {
     flex-direction: column;

package/src/components/PolarisNew/BundlePlanCard.vue

@@ -145,9 +145,14 @@ export default {
     font-weight: 700;
     color: black;
 }
-@media (max-width: 640px) {
+@media (max-width: 767px) {
   .apps-list .app {
     flex-basis: calc(50% - 8px);
   }
 }
+@media (max-width: 540px) {
+  .apps-list .app {
+    flex-basis: 100%;
+  }
+}
 </style>

package/src/components/PolarisNew/PlanShowcaseBanner.vue

@@ -92,12 +92,14 @@ export default {
         </p>
       </div>
       <div class="plan-right">
-        <h3 class="plan-name">{{ translateMe("Monthly Bundle:") }}</h3>
-        <div class="prices">
-          <span class="discounted-amount">${{ translateMe(realPrice) }}</span>
-          <span class="original-amount" v-if="realPrice < oldPrice"
+        <div class="plan-content">
+          <h3 class="plan-name">{{ translateMe("Monthly Bundle:") }}</h3>
+          <div class="prices">
+            <span class="discounted-amount">${{ translateMe(realPrice) }}</span>
+            <span class="original-amount" v-if="realPrice < oldPrice"
             >${{ translateMe(oldPrice) }}</span
-          >
+            >
+          </div>
         </div>
         <VariantButton
           id="choose-bundle"
@@ -169,7 +171,7 @@ export default {
 .plan-right {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 16px;
 }
 
 .prices {
@@ -203,6 +205,13 @@ export default {
   font-weight: 650;
 }
 
+.plan-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+}
+
 .choose-button {
   padding: 6px 12px;
   background-color: rgb(48, 48, 48);
@@ -222,7 +231,29 @@ export default {
   font-weight: 650;
 }
 
+@media (max-width: 992px) {
+
+  .banner__inner.full-width {
+    max-width: calc(100% - 64px);
+  }
+
+  .banner__inner {
+    flex-direction: column;
+    gap: 32px;
+    align-items: flex-start;
+    padding: 0;
+  }
+
+  .plan-right {
+    justify-content: space-between;
+    width: 100%;
+  }
+}
+
 @media (max-width: 767px) {
+  .banner__inner.full-width {
+    max-width: 100%;
+  }
   .bundle-plan-showcase-banner {
     flex-direction: column;
     gap: 12px;
@@ -236,10 +267,14 @@ export default {
   }
 }
 @media (max-width: 480px) {
+  .plan-content {
+    flex-direction: column;
+    align-items: flex-start;
+  }
   .plan-right {
     flex-direction: column;
-    gap: 8px;
-    align-items: unset;
+    gap: 16px;
+    align-items: flex-start;
   }
   .bundle-plan-showcase-banner {
     flex-direction: column;

package/src/components/PolarisNew/PlanTable.vue

@@ -345,7 +345,7 @@ export default {
       },
       breakpoints: {
         0: {
-          slidesPerView: 1,
+          slidesPerView: 1.2,
         },
         768: {
           slidesPerView: 2,
@@ -376,7 +376,7 @@ export default {
       },
       breakpoints: {
         0: {
-          slidesPerView: 1,
+          slidesPerView: 1.2,
         },
         768: {
           slidesPerView: 2,
@@ -760,6 +760,11 @@ export default {
   height: 100%;
 }
 
+.pricing-table.annually-table .swiper-wrapper,
+.pricing-table.monthly-table .swiper-wrapper {
+  height: auto !important;
+}
+
 .table-header {
   display: flex;
   align-items: center;
@@ -806,6 +811,7 @@ export default {
   height: 20px;
   visibility: visible;
   display: inline-block;
+  margin-top: 4px;
 }
 .plan-header-wrapper {
   display: flex;