From 34a64a997b1054da5de1c5a310b892a0bd72d860 Mon Sep 17 00:00:00 2001
From: Power BI Dev <PtmPowerBIDev@pertamina.com>
Date: Wed, 22 Jul 2026 09:40:19 +0700
Subject: [PATCH] Perbesar textarea rencana mingguan RPS saat fokus

Tabel F (9 kolom x 16 baris) membuat textarea-nya kecil dan susah dibaca/
diedit. Sekarang textarea di tabel itu membesar & mengambang (position:fixed,
z-index) saat diklik, tanpa mengubah lebar/tinggi tabel di baliknya, lalu
kembali normal saat pindah fokus. Semua textarea juga bisa di-resize bebas
(lebar+tinggi) sebagai jaring pengaman tambahan.

Perubahan murni CSS/JS statis -- tidak ada migrasi data.
---
 app/static/style.css |  2 +-
 app/static/tabel.js  | 44 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/app/static/style.css b/app/static/style.css
index 9feaee1..bb47685 100644
--- a/app/static/style.css
+++ b/app/static/style.css
@@ -152,7 +152,7 @@ input[type="text"], input[type="number"], input[type="password"], textarea, sele
   border: 1px solid #999; background: #fff;
   padding: 4px 6px; width: 100%;
 }
-textarea { resize: vertical; }
+textarea { resize: both; }
 input:focus, textarea:focus, select:focus {
   outline: 2px solid var(--blue); outline-offset: 0;
 }
diff --git a/app/static/tabel.js b/app/static/tabel.js
index 023140f..5283a92 100644
--- a/app/static/tabel.js
+++ b/app/static/tabel.js
@@ -72,4 +72,48 @@
     var kosong = wadah.querySelector(".cari-kosong");
     if (kosong) kosong.style.display = ada ? "none" : "";
   });
+
+  /* Tabel rencana mingguan RPS (#tabel-f): kolomnya sempit untuk 9 kolom x
+     16 baris, jadi textarea-nya kecil sekali. Saat fokus, textarea membesar
+     dan "mengambang" (position:fixed) di atas sel-sel lain tanpa mengubah
+     lebar tabel; kembali normal saat pindah fokus. */
+  var grAktif = null;
+
+  function grBesarkan(el) {
+    if (grAktif === el) return;
+    if (grAktif) grKecilkan(grAktif);
+    var r = el.getBoundingClientRect();
+    el.dataset.grLebar = el.style.width;
+    el.dataset.grTinggi = el.style.height;
+    el.style.position = "fixed";
+    el.style.left = r.left + "px";
+    el.style.top = r.top + "px";
+    el.style.width = Math.max(r.width, 380) + "px";
+    el.style.height = Math.max(r.height, 140) + "px";
+    el.style.zIndex = "50";
+    el.style.boxShadow = "0 6px 18px rgba(0,0,0,.35)";
+    el.style.background = "#fff";
+    grAktif = el;
+  }
+
+  function grKecilkan(el) {
+    el.style.position = "";
+    el.style.left = "";
+    el.style.top = "";
+    el.style.width = el.dataset.grLebar || "";
+    el.style.height = el.dataset.grTinggi || "";
+    el.style.zIndex = "";
+    el.style.boxShadow = "";
+    el.style.background = "";
+    if (grAktif === el) grAktif = null;
+  }
+
+  document.addEventListener("focusin", function (ev) {
+    if (ev.target.matches && ev.target.matches("#tabel-f textarea")) {
+      grBesarkan(ev.target);
+    }
+  });
+  document.addEventListener("focusout", function (ev) {
+    if (ev.target === grAktif) grKecilkan(ev.target);
+  });
 })();