From 6f1e7d744b12a7c8529da1c134a8b8e6d76a1a0b Mon Sep 17 00:00:00 2001
From: Raditya_Indra_Putranto <radityaindraputranto@gmail.com>
Date: Thu, 4 Jun 2026 18:19:11 +0700
Subject: [PATCH] fix: improve RODA dosen cards on mobile

---
 groups/RODA/index.html           |  6 +++---
 package.json                     |  3 ++-
 scripts/verify-mobile-layout.mjs | 31 +++++++++++++++++++++++++++++++
 3 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 scripts/verify-mobile-layout.mjs

diff --git a/groups/RODA/index.html b/groups/RODA/index.html
index 377afc9..5fa7b93 100644
--- a/groups/RODA/index.html
+++ b/groups/RODA/index.html
@@ -955,7 +955,7 @@
                         ketua setiap KBK. Pilih kartu untuk melihat dosen lain di kelompok keahlian tersebut.</p>
                 </div>
 
-                <div id="dosen-grid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6 md:gap-7 lg:gap-8 xl:gap-8">
+                <div id="dosen-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6 md:gap-7 lg:gap-8 xl:gap-8">
                     <!-- Cards generated by JS -->
                 </div>
             </div>
@@ -1785,7 +1785,7 @@
                                 <span class="inline-flex flex-col gap-0.5 text-[8px] sm:text-[8px] md:text-[9px] font-bold uppercase tracking-[0.2em] text-slate-400">
                                     ${rank.split(' ').join('<br>')}
                                 </span>
-                                <span class="inline-flex items-center gap-2 text-xs sm:text-xs md:text-sm font-bold text-untan-navy group-hover:text-untan-blue transition-colors whitespace-nowrap">
+                                <span class="inline-flex items-center justify-end gap-2 text-right text-xs sm:text-xs md:text-sm font-bold text-untan-navy group-hover:text-untan-blue transition-colors">
                                     ${translations[currentLang].viewMembers}
                                     <i class="fa-solid fa-arrow-right transition-transform group-hover:translate-x-1"></i>
                                 </span>
@@ -2135,4 +2135,4 @@
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/package.json b/package.json
index 1374213..52d04a1 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "test:netlify-build": "node scripts/verify-netlify-build.mjs"
+    "test:netlify-build": "node scripts/verify-netlify-build.mjs",
+    "test:mobile-layout": "node scripts/verify-mobile-layout.mjs"
   },
   "devDependencies": {
     "vite": "^7.1.0"
diff --git a/scripts/verify-mobile-layout.mjs b/scripts/verify-mobile-layout.mjs
new file mode 100644
index 0000000..615c106
--- /dev/null
+++ b/scripts/verify-mobile-layout.mjs
@@ -0,0 +1,31 @@
+import { readFileSync } from 'node:fs';
+
+const rodaPage = readFileSync('groups/RODA/index.html', 'utf8');
+
+const gridMatch = rodaPage.match(/<div id="dosen-grid" class="([^"]+)"/);
+
+if (!gridMatch) {
+  throw new Error('Missing dosen-grid container.');
+}
+
+const gridClasses = gridMatch[1].split(/\s+/);
+
+if (gridClasses.includes('sm:grid-cols-2')) {
+  throw new Error('Dosen cards must stay single-column at the 390px mobile breakpoint.');
+}
+
+if (!gridClasses.includes('grid-cols-1') || !gridClasses.includes('md:grid-cols-2')) {
+  throw new Error('Dosen cards must use one mobile column and switch to two columns at md.');
+}
+
+const viewMembersMatch = rodaPage.match(/<span class="([^"]+)"[^>]*>\s*\$\{translations\[currentLang\]\.viewMembers\}/);
+
+if (!viewMembersMatch) {
+  throw new Error('Missing view members link in dosen card template.');
+}
+
+if (viewMembersMatch[1].split(/\s+/).includes('whitespace-nowrap')) {
+  throw new Error('View members link must be allowed to wrap instead of clipping on narrow cards.');
+}
+
+console.log('Mobile layout classes keep dosen cards readable on phone viewports.');