fix(theme-default): Support centering members in VPTeamPage

src/client/theme-default/components/VPTeamMembers.vue

@@ -26,18 +26,66 @@ const classes = computed(() => [props.size, `count-${props.members.length}`])
 </template>
 
 <style scoped>
+.container {
+  display: grid;
+  gap: 24px;
+  margin: 0 auto;
+  width: 100%;
+  max-width: 1152px;
+}
+
+.VPTeamMembers.count-1 {
+  display: flex;
+  justify-content: center;
+}
+
+.VPTeamMembers.small.count-1 .container ,
+.VPTeamMembers.small.count-2 .container,
+.VPTeamMembers.small.count-3 .container,
+.VPTeamMembers.medium.count-1 .container,
+.VPTeamMembers.medium.count-2 .container {
+  display: flex;
+  justify-content: center;
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
 .VPTeamMembers.small .container {
   grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
 }
 
-.VPTeamMembers.small.count-1 .container {
+@media (max-width: 940px) {
-  max-width: 276px;
+  .VPTeamMembers.small.count-3 .container {
+    flex-wrap: wrap;
+    justify-content: start;
+  }
 }
-.VPTeamMembers.small.count-2 .container {
+
-  max-width: calc(276px * 2 + 24px);
+@media (max-width: 640px) {
+  .VPTeamMembers.small.count-2 .container {
+    flex-wrap: wrap;
+  }
 }
-.VPTeamMembers.small.count-3 .container {
+
-  max-width: calc(276px * 3 + 24px * 2);
+.VPTeamMembers.small.count-1 .item,
+.VPTeamMembers.small.count-2 .item,
+.VPTeamMembers.small.count-3 .item {
+  width: 276px;
+}
+
+@media (max-width: 940px) and (min-width: 640px) {
+  .VPTeamMembers.small.count-2 .item,
+  .VPTeamMembers.small.count-3 .item {
+    width: calc(50% - 12px);
+  }
+}
+
+@media (max-width: 640px) {
+  .VPTeamMembers.small.count-1 .item,
+  .VPTeamMembers.small.count-2 .item,
+  .VPTeamMembers.small.count-3 .item {
+    width: 100% !important;
+  }
 }
 
 .VPTeamMembers.medium .container {
@@ -50,17 +98,21 @@ const classes = computed(() => [props.size, `count-${props.members.length}`])
   }
 }
 
-.VPTeamMembers.medium.count-1 .container {
+@media (max-width: 888px) {
-  max-width: 368px;
+  .VPTeamMembers.medium.count-2 .container {
+    flex-wrap: wrap;
+  }
 }
-.VPTeamMembers.medium.count-2 .container {
+
-  max-width: calc(368px * 2 + 24px);
+.VPTeamMembers.medium.count-1 .item,
+.VPTeamMembers.medium.count-2 .item {
+  width: 368px;
 }
 
-.container {
+@media (max-width: 888px) {
-  display: grid;
+  .VPTeamMembers.medium.count-1 .item,
-  gap: 24px;
+  .VPTeamMembers.medium.count-2 .item {
-  margin: 0 auto;
+    width: 100% !important;
-  max-width: 1152px;
+  }
 }
 </style>