From a57fc91e93896d632243956fbec63411a0c080a6 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Thu, 17 Jul 2025 16:10:10 +0800
Subject: [PATCH] Adjust avatar layout using container queries

---
 open-isle-cli/src/views/HomePageView.vue | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/open-isle-cli/src/views/HomePageView.vue b/open-isle-cli/src/views/HomePageView.vue
index 979f9609e..1da59a069 100644
--- a/open-isle-cli/src/views/HomePageView.vue
+++ b/open-isle-cli/src/views/HomePageView.vue
@@ -331,6 +331,9 @@ export default {
   flex-direction: column;
   align-items: center;
   overflow-y: auto;
+  /* enable container queries */
+  container-type: inline-size;
+  container-name: home-page;
   /* width variables shared between header and article rows */
   --main-width: 60%;
   --avatars-width: 20%;
@@ -529,7 +532,24 @@ export default {
   opacity: 0.7;
 }
 
-@container home-page (min-width: 900px) {
+@container home-page (max-width: 900px) {
+  .home-page {
+    --main-width: 65%;
+    --avatars-width: 15%;
+  }
+  .article-member-avatar-item:nth-child(n+4) {
+    display: none;
+  }
+}
+
+@container home-page (max-width: 768px) {
+  .home-page {
+    --main-width: 70%;
+    --avatars-width: 10%;
+  }
+  .article-member-avatar-item:nth-child(n+2) {
+    display: none;
+  }
 }
 
 </style>