4.16.1: Улучшение отображения желаний в группах

VERSION

@@ -1 +1 @@
-4.16.0
+4.16.1

play-life-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "play-life-web",
-  "version": "4.16.0",
+  "version": "4.16.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

play-life-web/src/components/Wishlist.css

@@ -2,6 +2,7 @@
   max-width: 42rem; /* max-w-2xl = 672px */
   margin: 0 auto;
   padding-bottom: 5rem;
+  container-type: inline-size;
 }
 
 .wishlist-loading {
@@ -98,7 +99,7 @@
 }
 
 .wishlist-project-group-title {
-  font-size: 1.25rem;
+  font-size: 1.75rem;
   font-weight: 600;
   color: #2c3e50;
   margin-bottom: 0.75rem;
@@ -109,6 +110,7 @@
   overflow-x: auto;
   gap: 1rem;
   padding-bottom: 0.5rem;
+  margin-bottom: 1rem;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: thin;
 }
@@ -132,8 +134,33 @@
 }
 
 .wishlist-project-group-items .wishlist-card {
-  flex: 0 0 150px;
+  /* По умолчанию 1 колонка */
-  min-width: 150px;
+  flex: 0 0 100%;
+  width: 100%;
+}
+
+/* 2 колонки: 316px <= width < 482px */
+@container (min-width: 316px) {
+  .wishlist-project-group-items .wishlist-card {
+    flex: 0 0 calc((100cqw - 1rem) / 2);
+    width: calc((100cqw - 1rem) / 2);
+  }
+}
+
+/* 3 колонки: 482px <= width < 648px */
+@container (min-width: 482px) {
+  .wishlist-project-group-items .wishlist-card {
+    flex: 0 0 calc((100cqw - 2rem) / 3);
+    width: calc((100cqw - 2rem) / 3);
+  }
+}
+
+/* 4 колонки: width >= 648px */
+@container (min-width: 648px) {
+  .wishlist-project-group-items .wishlist-card {
+    flex: 0 0 calc((100cqw - 3rem) / 4);
+    width: calc((100cqw - 3rem) / 4);
+  }
 }
 
 .wishlist-no-project {