3454873-ux-move-project:Responsive screen and desktop design fixes as per provided screenshots

3454873-ux-move-project:Responsive screen and desktop design fixes as per provided screenshots

css/pb.css

@@ -40,12 +40,14 @@
 .pb-image-carousel {
   display: flex;
   align-items: center;
-  width: 100%;
-  height: 400px;
 }
 .pb-image-carousel__slide {
-  min-width: 650px;
-  min-height: 400px;
+  width: 100%;
+  min-width: 300px;
+  max-width: 600px;
+  height: auto;
+  min-height: 200px;
+  max-height: 400px;
   margin: 10px;
 }
 
@@ -76,31 +78,66 @@
 /* <ModulePage> */
 .pb-module-page {
   display: flex;
+  margin-top: 1rem;
   text-align: start;
+  border: 1px solid #ebecee;
+  border-radius: 14px;
+  -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
 }
 .pb-module-page__sidebar {
   display: flex;
   flex: 1;
+  flex: 0 0 320px;
   flex-direction: column;
-  padding: 40px;
+  max-width: 320px;
+  padding: 30px;
+}
+.pb-module-page__sidebar .pb-module-page__sidebar_logo {
+  width: 100%;
+  max-width: 150px;
+}
+.pb-module-page__sidebar .pb-module-page__title {
+  margin-bottom: 0;
+}
+.pb-module-page__sidebar .pb-module-page__author {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  font-size: 1.3rem;
 }
 .pb-module-page__main {
   display: flex;
-  flex: 4;
+  flex: 1; /* Adjusted flex value */
   flex-direction: column;
   align-items: flex-start;
-  padding: 40px;
+  max-width: calc(100% - 320px); /* Adjusted max-width to accommodate sidebar */
+  padding: 30px;
 }
 .pb-module-page__actions {
-  margin: 20px;
+  margin: 10px 20px 10px 0;
+}
+.project_status-indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 120px;
+  height: 34px;
+  column-gap: 8px;
+  color: #228572;
+  border-radius: 30px;
+  background: #daefe3;
 }
 .pb-module-page__categories-label {
+  margin-top: 6px;
+  margin-bottom: 0.5rem;
   font-weight: bold;
+  line-height: 1;
 }
 .pb-module-page__categories-list {
   display: inline-block;
   width: 100%;
-  height: 20px;
+  height: 32px;
   margin: 0.25em 0 0.25em 0;
   padding: 0;
   cursor: pointer;
@@ -110,25 +147,31 @@
   margin-top: 5px;
   margin-bottom: 2px;
   margin-inline-start: 7px;
-  padding: 2px 9px;
+  padding: 3px 9px 5px;
   list-style: none;
   color: #4f4f4f;
   border-radius: 25px;
   background-color: #e5e5e5;
   font-size: 0.9em;
   font-weight: 600;
+  line-height: 1;
+}
+.pb-module-page__categories-list-item:first-child {
+  margin-left: 0;
 }
 .pb-module-page__module-details {
   display: grid;
-  grid-template-columns: 0.5fr 2fr;
+  grid-template-columns: 0.3fr 2fr;
+  grid-column-gap: 15px;
+  justify-items: center;
   margin-top: 10px;
   line-height: 20px;
 }
 .pb-module-page__module-details-icon {
-  margin: 10% 20% 0 40%;
+  margin: 15% 0% 0 0%;
 }
 .pb-module-page__module-details-info {
-  margin: 5px 15px;
+  margin: 5px 0;
 }
 .pb-module-page__logo {
   min-height: 200px;
@@ -136,10 +179,37 @@
 .pb-module-page__carousel {
   margin: 20px 0;
 }
+
+@media screen and (max-width: 1024px) {
+  .pb-module-page__sidebar {
+    flex: 0 0 275px;
+    max-width: 275px;
+  }
+}
+@media screen and (max-width: 992px) {
+  .pb-image-carousel__btn-icon {
+    width: 30px;
+    height: 40px;
+  }
+  .pb-module-page__main {
+    flex: inherit;
+    max-width: 100%;
+  }
+  .pb-module-page__module-details {
+    justify-items: flex-start;
+  }
+  .pb-module-page {
+    flex-wrap: wrap;
+  }
+}
 @media only screen and (max-width: 600px) {
   .pb-module-page__wrapper {
     flex-direction: column;
   }
+  .pb-module-page__sidebar,
+  .pb-module-page__main {
+    padding: 20px;
+  }
 }
 
 /* SKIP PAGINATION STYLES. THEY SHOULD COME FROM ADMIN THEME. */
@@ -311,20 +381,24 @@
   display: inline-block;
   width: 100%;
   height: 20px;
-  margin: 1em 0 0.25em 0;
+  margin: 0.25em 0 0.25em 0;
   padding: 0;
 }
-.pb-project-categories__list::before {
-  content: "Categories: ";
-  font-weight: 600;
+.pb-project-categories__list--centered {
+  text-align: center;
 }
 .pb-project-categories__item {
   display: inline-block;
   margin-top: 2px;
   margin-bottom: 2px;
   margin-inline-end: 4px;
+  padding: 2px 9px;
   list-style: none;
-  font-size: 15px;
+  color: #4f4f4f;
+  border-radius: 25px;
+  background-color: #e5e5e5;
+  font-size: 0.9em;
+  font-weight: 600;
 }
 .pb-project-categories__item--extra {
   border: 1px solid #bbb;
@@ -337,7 +411,6 @@
 }
 
 /* <Project/Image> */
-.pb-image-carousel__slide,
 .image-carousel__slider-image,
 .project__logo-image {
   display: block;
@@ -347,7 +420,6 @@
 }
 /* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {
-  .pb-image-carousel__slide,
   .image-carousel__slider-image,
   .project__logo-image {
     display: block;
@@ -486,11 +558,6 @@
   display: block;
   font-size: 30px; /* Used to set size of icon, which is 1em. */
 }
-.pb-project__status-icon-btn {
-  padding: 0;
-  border: none;
-  background: none;
-}
 .pb-project__active-installs-text,
 .pb-project__install-count {
   font-size: 13px;
@@ -521,11 +588,15 @@
 .pb-icon {
   max-height: 1em;
 }
+.pb-module-page__module-details .pb-icon {
+  max-height: inherit;
+}
 .pb-icon--project-listing {
   width: 2.4em;
 }
 .pb-icon--module-details {
-  width: 25px;
+  width: 100%;
+  max-width: 25px;
 }
 
 @media (forced-colors: active) and (prefers-color-scheme: dark) {