From dfc84bcbe9269e8179559cc39e91a771e1763e59 Mon Sep 17 00:00:00 2001
From: cw <rrinn.12345@gmail.com>
Date: Thu, 4 Jun 2026 20:40:37 +0700
Subject: [PATCH] fix layout mobile

---
 groups/ACAAB/index.html | 141 ++++++++++++++++++++--------------------
 groups/ACAAB/main.js    |   7 +-
 groups/ACAAB/style.css  |  20 +++++-
 3 files changed, 94 insertions(+), 74 deletions(-)

diff --git a/groups/ACAAB/index.html b/groups/ACAAB/index.html
index 816483d..95284d2 100644
--- a/groups/ACAAB/index.html
+++ b/groups/ACAAB/index.html
@@ -1234,67 +1234,65 @@
                     <div
                         style="background:#feb401;border-radius:0.75rem;box-shadow:0 10px 30px -10px rgba(253,184,19,0.4);padding:1.25rem 1.5rem 1.5rem;">
 
-                        <!-- Row 1: Dua chip header navy -->
-                        <div style="display:flex;gap:0.75rem;margin-bottom:1.25rem;">
-                            <!-- TOTAL PRESTASI chip — lebar 4x -->
-                            <div
-                                style="flex:4;background:#003150;border-radius:0.5rem;padding:0.5rem 0.75rem;text-align:center;">
-                                <span
-                                    style="color:white;font-size:0.65rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;"
-                                    data-i18n="grp_acaab_stats_total_ach">Total Prestasi</span>
+                        <div style="display:flex;flex-wrap:wrap;gap:1.5rem;">
+                            <!-- Prestasi Block -->
+                            <div style="flex:4;min-width:240px;">
+                                <div style="background:#003150;border-radius:0.5rem;padding:0.5rem 0.75rem;text-align:center;margin-bottom:1.25rem;">
+                                    <span style="color:white;font-size:0.875rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;"
+                                        data-i18n="grp_acaab_stats_total_ach">Total Prestasi</span>
+                                </div>
+                                <div style="display:flex;gap:0.25rem;">
+                                    <!-- Prestasi Mahasiswa (total) -->
+                                    <div style="flex:1;text-align:center;padding:0 0.15rem;">
+                                        <div id="stat-total-ach"
+                                            style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
+                                            0</div>
+                                        <div style="font-size:clamp(0.5rem,1.2vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;word-break:break-word;">
+                                            Prestasi<br>Mahasiswa</div>
+                                    </div>
+                                    <!-- Internasional -->
+                                    <div style="flex:1;text-align:center;padding:0 0.15rem;">
+                                        <div id="stat-intl"
+                                            style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
+                                            0</div>
+                                        <div style="font-size:clamp(0.5rem,1.2vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;word-break:break-word;"
+                                            data-i18n="grp_acaab_stats_intl">Internasional</div>
+                                    </div>
+                                    <!-- Nasional -->
+                                    <div style="flex:1;text-align:center;padding:0 0.15rem;">
+                                        <div id="stat-national"
+                                            style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
+                                            0</div>
+                                        <div style="font-size:clamp(0.5rem,1.2vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;word-break:break-word;"
+                                            data-i18n="grp_acaab_stats_national">Nasional</div>
+                                    </div>
+                                    <!-- Regional -->
+                                    <div style="flex:1;text-align:center;padding:0 0.15rem;">
+                                        <div id="stat-regional"
+                                            style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
+                                            0</div>
+                                        <div style="font-size:clamp(0.5rem,1.2vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;word-break:break-word;"
+                                            data-i18n="grp_acaab_stats_regional">Regional</div>
+                                    </div>
+                                </div>
                             </div>
-                            <!-- TOTAL PORTOFOLIO chip — lebar 1x -->
-                            <div
-                                style="flex:1;background:#003150;border-radius:0.5rem;padding:0.5rem 0.75rem;text-align:center;">
-                                <span
-                                    style="color:white;font-size:0.65rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;"
-                                    data-i18n="grp_acaab_stats_total_proj">Total Portofolio</span>
-                            </div>
-                        </div>
 
-                        <!-- Row 2: 5 angka sejajar (4 prestasi + 1 proyek) -->
-                        <div style="display:flex;gap:0.25rem;">
-                            <!-- Prestasi Mahasiswa (total) -->
-                            <div style="flex:1;text-align:center;padding:0 0.25rem;">
-                                <div id="stat-total-ach"
-                                    style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
-                                    0</div>
-                                <div
-                                    style="font-size:clamp(0.65rem,1.5vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;">
-                                    Prestasi<br>Mahasiswa</div>
-                            </div>
-                            <!-- Internasional -->
-                            <div style="flex:1;text-align:center;padding:0 0.25rem;">
-                                <div id="stat-intl"
-                                    style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
-                                    0</div>
-                                <div style="font-size:clamp(0.65rem,1.5vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;"
-                                    data-i18n="grp_acaab_stats_intl">Internasional</div>
-                            </div>
-                            <!-- Nasional -->
-                            <div style="flex:1;text-align:center;padding:0 0.25rem;">
-                                <div id="stat-national"
-                                    style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
-                                    0</div>
-                                <div style="font-size:clamp(0.65rem,1.5vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;"
-                                    data-i18n="grp_acaab_stats_national">Nasional</div>
-                            </div>
-                            <!-- Regional -->
-                            <div style="flex:1;text-align:center;padding:0 0.25rem;">
-                                <div id="stat-regional"
-                                    style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
-                                    0</div>
-                                <div style="font-size:clamp(0.65rem,1.5vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;"
-                                    data-i18n="grp_acaab_stats_regional">Regional</div>
-                            </div>
-                            <!-- Proyek Mahasiswa (total) -->
-                            <div style="flex:1;text-align:center;padding:0 0.25rem;">
-                                <div id="stat-total-proj"
-                                    style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
-                                    0</div>
-                                <div
-                                    style="font-size:clamp(0.65rem,1.5vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;">
-                                    Proyek<br>Mahasiswa</div>
+                            <!-- Proyek Block -->
+                            <div style="flex:1;min-width:120px;">
+                                <div style="background:#003150;border-radius:0.5rem;padding:0.5rem 0.75rem;text-align:center;margin-bottom:1.25rem;">
+                                    <span style="color:white;font-size:0.875rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;"
+                                        data-i18n="grp_acaab_stats_total_proj">Total Portofolio</span>
+                                </div>
+                                <div style="display:flex;justify-content:center;">
+                                    <!-- Proyek Mahasiswa (total) -->
+                                    <div style="text-align:center;padding:0 0.15rem;">
+                                        <div id="stat-total-proj"
+                                            style="font-size:clamp(2rem,4.5vw,4rem);font-weight:900;color:#003150;line-height:1;font-family:'Roboto Condensed',sans-serif;">
+                                            0</div>
+                                        <div style="font-size:clamp(0.5rem,1.2vw,0.85rem);font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:#003150;margin-top:0.5rem;line-height:1.3;word-break:break-word;">
+                                            Proyek<br>Mahasiswa</div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
 
@@ -1381,17 +1379,6 @@
                             <p style="color:#64748b;font-size:1rem;max-width:42rem;margin:0;line-height:1.6;"
                                 data-i18n="grp_acaab_proj_desc">Jelajahi inovasi digital dan aplikasi nyata yang dikembangkan oleh mahasiswa Informatika UNTAN.</p>
                         </div>
-                        <!-- Scroll control buttons (atas, kanan) -->
-                        <div style="display:flex;align-items:center;gap:0.5rem;flex-shrink:0;margin-top:0.25rem;">
-                            <button id="acaab-proj-prev" aria-label="Geser kiri"
-                                style="width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid rgba(0,49,80,0.2);display:flex;align-items:center;justify-content:center;color:#003150;background:white;cursor:pointer;transition:all 0.2s;">
-                                <i class="fas fa-chevron-left" style="font-size:0.875rem;"></i>
-                            </button>
-                            <button id="acaab-proj-next" aria-label="Geser kanan"
-                                style="width:2.5rem;height:2.5rem;border-radius:50%;border:2px solid rgba(0,49,80,0.2);display:flex;align-items:center;justify-content:center;color:#003150;background:white;cursor:pointer;transition:all 0.2s;">
-                                <i class="fas fa-chevron-right" style="font-size:0.875rem;"></i>
-                            </button>
-                        </div>
                     </div>
 
                     <!-- Filter panel -->
@@ -1433,6 +1420,18 @@
                     <div id="acaab-proj-track" class="acaab-carousel-track acaab-hide-scrollbar"
                         style="display:flex;gap:1.25rem;overflow-x:auto;padding-bottom:1rem;"></div>
 
+                    <!-- Scroll control buttons (bawah) -->
+                    <div style="display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:1rem;">
+                        <button id="acaab-proj-prev" aria-label="Geser kiri"
+                            style="width:3rem;height:3rem;border-radius:50%;border:2px solid rgba(0,49,80,0.2);display:flex;align-items:center;justify-content:center;color:#003150;background:white;cursor:pointer;transition:all 0.2s;">
+                            <i class="fas fa-chevron-left" style="font-size:1rem;"></i>
+                        </button>
+                        <button id="acaab-proj-next" aria-label="Geser kanan"
+                            style="width:3rem;height:3rem;border-radius:50%;border:2px solid rgba(0,49,80,0.2);display:flex;align-items:center;justify-content:center;color:#003150;background:white;cursor:pointer;transition:all 0.2s;">
+                            <i class="fas fa-chevron-right" style="font-size:1rem;"></i>
+                        </button>
+                    </div>
+
                     <!-- Load more -->
                     <div style="text-align:center;margin-top:1.5rem;">
                         <button id="acaab-proj-more"
@@ -1444,7 +1443,7 @@
 
                 <!-- ── CTA ────────────────────────────────────────────────────────────── -->
                 <section class="not-prose acaab-full-bleed bg-untan-navy"
-                    style="padding:3.5rem 0; margin-bottom:-3rem;">
+                    style="padding:3.5rem 0; margin-bottom: 3rem;">
                     <div class="container mx-auto px-4 lg:px-8">
                         <!-- Inner card: kuning transparan dengan border, rounded-2xl -->
                         <div
diff --git a/groups/ACAAB/main.js b/groups/ACAAB/main.js
index f182761..b5d27f7 100644
--- a/groups/ACAAB/main.js
+++ b/groups/ACAAB/main.js
@@ -570,13 +570,18 @@ function buildProjFilterOptions() {
 
 function filterProjects() {
     const q = projFilter.search.toLowerCase();
-    return projects.filter(p => {
+    const result = projects.filter(p => {
         const matchSearch = !q || [p.title, p.studentName, p.description, ...p.categories]
             .some(s => (s || '').toLowerCase().includes(q));
         const matchCat  = !projFilter.cat  || p.categories.includes(projFilter.cat);
         const matchYear = !projFilter.year || String(p.year) === projFilter.year;
         return matchSearch && matchCat && matchYear;
     });
+    
+    // Sort descending by year
+    result.sort((a, b) => (b.year || 0) - (a.year || 0));
+    
+    return result;
 }
 
 function renderProjects() {
diff --git a/groups/ACAAB/style.css b/groups/ACAAB/style.css
index 4aef586..aa25e6a 100644
--- a/groups/ACAAB/style.css
+++ b/groups/ACAAB/style.css
@@ -201,6 +201,22 @@ body.acaab-modal-open {
 
 /* --- Reduced motion --- */
 @media (prefers-reduced-motion: reduce) {
-    .acaab-fade-in, .acaab-skeleton, .acaab-card-img,
-    .acaab-ach-card, .acaab-proj-card-wrap { animation: none !important; transition: none !important; }
 }
+
+/* --- Modal Responsiveness Overrides --- */
+.acaab-modal-achievement {
+    max-width: 500px !important;
+}
+
+.acaab-modal-project {
+    max-width: 700px !important;
+}
+
+@media (max-width: 639px) {
+    .acaab-modal-achievement, .acaab-modal-project {
+        max-width: 100% !important;
+        margin: 0 !important;
+        border-radius: 1rem 1rem 0 0 !important;
+    }
+}
+