Teks Terjemahan Lebih Panjang Daripada Lebar Tombol di Flarum

Di Flarum ketika teks terjemahan (Bahasa Indonesia) lebih panjang daripada lebar tombol. Ada dua solusi utama: memperpanjang kotak (CSS), atau menyingkat teks terjemahan.

Opsi 1 — Memperpanjang kotak tombol (disarankan)

Ini solusi terbaik karena UX tetap jelas dan tidak mengorbankan makna teks.

Langkah:

Masuk Admin Panel Flarum

Buka Appearance → Custom CSS, tambahkan CSS berikut:

.Button--primary {
white-space: normal; /* agar teks boleh turun baris */
min-width: 220px; /* sesuaikan lebar minimum */
text-align: center;
}

Jika tombol yang bermasalah khusus tombol login, gunakan selector lebih spesifik:

.LogInButton,
.Button--login {
min-width: 240px;
white-space: normal;
text-align: center;
}

Catatan penting:

• white-space: normal; → teks tidak dipaksa satu baris

• min-width → tombol tidak terlalu sempit

• Aman untuk mobile & desktop

Opsi 2 — Menyingkat terjemahan (lebih cepat, tapi kompromi)

Jika ingin tetap satu baris dan ringkas:

Contoh:

Cara mengubahnya:

Buka folder bahasa Indonesia, biasanya:

/locale/id.yml

Cari key yang berhubungan dengan login, misalnya:

log_in_to_reply: "Login Untuk Membalas"

Ubah menjadi:

log_in_to_reply: "Masuk untuk Balas"

Clear cache Flarum

Opsi 3 — Paksa satu baris tapi bisa melebar otomatis

Kalau ingin tombol tetap satu baris tapi melebar mengikuti teks:

.Button {
white-space: nowrap;
padding-left: 20px;
padding-right: 20px;
}

⚠️ Kurang disarankan di mobile, karena bisa membuat layout melebar ke samping.

Saya sendiri menggunakan ekstensi Linguist (composer require fof/linguist) untuk mengganti/menyingkat terjemahannya menjadi Login Tuk Balas.