Karena template website ini aku bangun sendiri dari nol, aku harus selalu siaga memeriksa ulang semua aspek visualnya. Hari ini, saat mengecek sebuah postingan yang lumayan panjang melalui smartphone, aku menemukan sebuah case klasik namun menyebalkan: Layout Bocor alias Horizontal Overflow. Layar website tiba-tiba bisa digeser ke kanan-kiri seolah ada elemen gaib yang melebar.

Karena postingan tersebut memuat banyak block Gutenberg, aku harus mencari sumber masalahnya satu per satu.

Awalnya, kecurigaanku jatuh pada block code yang isinya cukup panjang ke bawah. Untuk membuktikannya, aku membuat post dummy khusus yang hanya berisi kode panjang tersebut. Anehnya, setelah di-publish dan dicek di mobile, tampilannya normal-normal saja. Kesimpulannya: bukan panjang baris kode secara vertikal yang menyebabkan masalah.

Karena sudah cukup pusing menebak-nebak, akhirnya aku menggunakan metode debugging paling barbar namun absolut: menghapus block satu per satu dari editor sampai layout-nya kembali normal.

Setelah proses eliminasi yang panjang, bingo! Aku menemukan penyebab aslinya. Masalah bersumber dari satu block code yang berisi data seperti ini:

a:3:{s:6:”_token”;s:40:”abc123…”;s:4:”cart”;a:2:{…};s:8:”_flash”;a:2:{…}}

Ternyata, masalah ini terjadi karena teks di dalam block code bawaan Gutenberg tersebut ditulis tanpa spasi sama sekali dan terus memanjang ke samping. Secara bawaan, HTML tidak akan memotong (wrap) teks yang tidak memiliki spasi. Akibatnya, teks tersebut secara paksa membentang menerobos batas layar, menyeret seluruh struktur layout bersamanya.

Solusi untuk menjinakkan elemen liar ini adalah dengan membatasi lebar maksimal (max-width) pada wadah kodenya, dan memaksa munculnya scroll horizontal di dalam kotak tersebut agar tidak mengganggu layout utama.

Before

.article__body pre {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  overflow-x: auto;
  margin: 32px 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-primary);
}
.article__body code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-secondary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--accent);
  border: 1px solid var(--border);
}
.article__body pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

After

.article__body pre {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  margin: 32px 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-primary);
  max-width: 90vw; /* Batas aman lebar di layar mobile */
  overflow-x: auto !important; /* Paksa muncul scrollbar horizontal */
  -webkit-overflow-scrolling: touch; /* Scroll mulus di perangkat sentuh */
}
.article__body code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-secondary);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--accent);
  border: 1px solid var(--border);
}
.article__body pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  display: block; /* Mengubah sifat inline menjadi block */
  white-space: pre !important; /* Mencegah teks dipaksa turun ke bawah */
  word-break: normal !important; 
}

Dengan tambahan display: block dan max-width: 90vw, sifat elemen code yang awalnya adalah inline kini bisa mematuhi aturan wadah induknya. Sekarang, seberapa pun panjang string tanpa spasi yang dimasukkan, teksnya akan tertahan rapi di dalam kotak dan memunculkan scroll horizontal yang elegan di layar HP. Kasus ditutup!