Sesuaikan UI/UX di Modul Artikel

[habibie11]

issue # #1628

🎯 Deskripsi

Pull request ini menangani masalah perwajahan form dan inkonsistensi struktur HTML saat admin melakukan unggahan gambar pada modul Artikel (/informasi/artikel). Sama seperti perbaikan di modul lainnya, UI perlu dimodernisasi agar lebih tahan terhadap anomali kasus khusus (seperti nama file yang amat sangat panjang), serta untuk menerapkan komponen kustom dari sistem terkait info batas maksimal file (hint upload).

Penggunaan komponen aksi-grup sudah didukung secara default pada versi sebelumnya, namun beberapa bagian pada pratinjau gambar tetap perlu disempurnakan.

---

🛠️ Perubahan yang Dilakukan

1. Refaktor Kotak Pratinjau Gambar (Image Preview Box)

• Perbaikan CSS Overflow: Menambahkan pelindung tata letak (CSS overflow: hidden;) pada bungkus kontainer nama file di file _form.blade.php.
• Pengamanan Nama Panjang: Memberikan properti word-break: break-all; ke tag text span nama file untuk memastikan barisan karakter panjang akan terlipat/turun ke bawah dan tak menjebol struktur flexbox.

2. Pengaplikasian Komponen Terpusat

• Upload Hint Spesifik: Mengganti teks elemen HTML keras (hard-code) yang menampilkan aturan ekstensi gambar dan batas maksimum ukuran (2 MB) dengan komponen terpusat <x-upload-hint formats="JPG, JPEG, PNG" />. Perubahan ini memudahkan pemeliharaan ke depan jika sewaktu-waktu batas upload aplikasi ditingkatkan atau diubah konfigurasinya.

---

✅ Test Cases yang Diimplementasikan

• Saat membuat atau menyunting artikel dan terdapat lampiran gambar (thumbnail berita) bernama teramat panjang, barisan teks tak akan lari melewati batas background kontainer abu-abu, melainkan secara mulus pindah baris.
• Syarat limitasi ekstensi file pada formulir (JPG, JPEG, PNG) termuat secara presisi memanggil konfigurasi Blade Component standar tanpa redundansi manual HTML.
• Kompatibilitas dengan tes unit pada browser (SmokeInformasiTest.php) terpantau tidak mengalami degradasi maupun malfungsi.

[github-actions]

🔄 AI PR Review sedang antri di server...

Proses review akan segera dimulai di background — hasil akan muncul sebagai komentar setelah selesai.
Powered by CrewAI · PR #1644