round 2

web/vue-app/src/components/ChildrenListView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { getCachedImageUrl, revokeAllImageUrls } from '../common/imageCache'
 import { isParentAuthenticated } from '../stores/auth'
@@ -194,6 +194,11 @@ const deletePoints = async (childId: string | number, evt?: Event) => {
   }
 }
 
+const gridColumns = computed(() => {
+  const n = Math.min(children.value.length, 3)
+  return `repeat(${n || 1}, minmax(var(--card-width, 289px), 1fr))`
+})
+
 onBeforeUnmount(() => {
   document.removeEventListener('click', onDocClick, true)
   revokeAllImageUrls()
@@ -314,8 +319,6 @@ onBeforeUnmount(() => {
 }
 
 .container {
-  width: 100%;
-  max-width: 1200px;
   display: flex;
   flex-direction: column;
 }
@@ -348,9 +351,9 @@ h1 {
 
 .grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 1.5rem;
-  flex: 1;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1.2rem 1.2rem;
+  justify-items: center;
 }
 
 .card {
@@ -363,6 +366,7 @@ h1 {
   flex-direction: column;
   cursor: pointer;
   position: relative; /* for kebab positioning */
+  width: 250px;
 }
 
 /* kebab button / menu (fixed-size button, absolutely positioned menu) */