From a2281edc7a83617dc4383379b4d8c9bfa9cf0578 Mon Sep 17 00:00:00 2001
From: Kijin Sung <kijin@kijinsung.com>
Date: Mon, 21 Jul 2025 21:36:00 +0900
Subject: [PATCH] Fix incorrect textarea sizing when lang selector is active

---
 modules/admin/tpl/css/admin.bootstrap.css |  2 --
 modules/admin/tpl/css/admin.css           | 21 ++++++++++++++++---
 modules/admin/tpl/js/admin.js             | 25 ++++++++---------------
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/modules/admin/tpl/css/admin.bootstrap.css b/modules/admin/tpl/css/admin.bootstrap.css
index f59f3fde2..bf4fc74a8 100644
--- a/modules/admin/tpl/css/admin.bootstrap.css
+++ b/modules/admin/tpl/css/admin.bootstrap.css
@@ -310,8 +310,6 @@
 .x input.x_full-width,
 .x textarea.x_full-width,
 .x .x_uneditable-input.x_full-width{width:calc(100% - 14px);resize:vertical}
-.x textarea.x_full-width.lang_code{width:calc(100% - 42px);resize:vertical}
-.x textarea.x_full-width + textarea.lang_code{width:calc(100% - 42px);resize:vertical}
 .x textarea{height:auto;min-height:80px;}
 .x textarea,
 .x input[type="text"],
diff --git a/modules/admin/tpl/css/admin.css b/modules/admin/tpl/css/admin.css
index f5da99642..b93ec383e 100644
--- a/modules/admin/tpl/css/admin.css
+++ b/modules/admin/tpl/css/admin.css
@@ -1476,6 +1476,20 @@ margin-bottom: 10px;
 }
 
 }
+
+.x .g11n.x_input-append {
+	display: inline-flex;
+	align-items: flex-start;
+}
+.x .g11n.x_full-width {
+	width: 100%;
+}
+.x .g11n > input.lang_code,
+.x .g11n > textarea.lang_code {
+	flex: 1;
+	width: unset;
+	min-width: 0;
+}
 .x .g11n>.x_add-on {
 	font-size: 0;
 	position: relative;
@@ -1492,8 +1506,9 @@ margin-bottom: 10px;
 }
 .x .g11n>.x_add-on.remover {
 	display: none;
-	width: 26px;
-	height: 26px;
+	height: 16px;
+	padding: 4px;
+	box-sizing: content-box;
 }
 .x .g11n.active>[disabled] {
 	padding-left: 25px;
@@ -1501,7 +1516,7 @@ margin-bottom: 10px;
 	background-repeat: no-repeat;
 }
 .x .g11n.active>.x_add-on.remover {
-	display: inline-block;
+	display: block;
 }
 .x .g11n>.x_add-on:hover>i {
 	opacity: 1;
diff --git a/modules/admin/tpl/js/admin.js b/modules/admin/tpl/js/admin.js
index 132e245a4..4d3d52c45 100644
--- a/modules/admin/tpl/js/admin.js
+++ b/modules/admin/tpl/js/admin.js
@@ -1916,6 +1916,7 @@ jQuery(function($){
 
 			// make UI
 			var $this = $(this);
+			var width = $this.width();
 			var t = this;
 
 			if($this.parent().hasClass('g11n')){
@@ -1933,13 +1934,12 @@ jQuery(function($){
 
 			function makeUI(){
 				var $multilingualWindow = $('#g11n');
-				var width = $this.width();
 				var $displayInput;
 
 				if(t.tagName == 'TEXTAREA' || $this.data('type') == 'textarea'){
-					$displayInput = $('<textarea id="lang_' + id + '" class="lang_code" style="width:' + width + 'px" data-width="' + width + '">').data('lang-id', id);
+					$displayInput = $('<textarea id="lang_' + id + '" class="lang_code">').data('lang-id', id);
 				}else{
-					$displayInput = $('<input type="text" id="lang_' + id + '" class="lang_code" style="width:' + (width-28) + 'px" data-width="' + (width-28) + '">').data('lang-id', id);
+					$displayInput = $('<input type="text" id="lang_' + id + '" class="lang_code">').data('lang-id', id);
 				}
 				$displayInput.attr('placeholder', $this.attr('placeholder'));
 
@@ -1947,20 +1947,18 @@ jQuery(function($){
 				var $setter = $('<a href="#g11n" class="x_add-on modalAnchor" title="' + xe.lang.cmd_set_multilingual_text + '"><i class="x_icon-globe"></i>' + xe.lang.cmd_set_multilingual_text + '</a>').data('lang-target', id);
 
 				$this.parent().addClass('g11n').addClass('x_input-append');
+				if ($this.hasClass('x_full-width')) {
+					$this.parent().addClass('x_full-width');
+				} else if (width) {
+					$this.parent().width(Math.max(220, width + 14));
+				}
 				$this.after($displayInput, $remover, $setter);
 				$this.hide();
 				$setter.attr('href', '#g11n').xeModalWindow();
 
 				// bind selected
 				$displayInput.bind('selected.g11n', function(e, code, value){
-					var width = $displayInput.width();
-
-					if(!$displayInput.data('active')){
-						width -= 44;
-					}
-
 					$displayInput
-						.width(width)
 						.attr('disabled', 'disabled')
 						.val(value)
 						.data('active', true)
@@ -1995,11 +1993,9 @@ jQuery(function($){
 
 					if(!$g11n_set_input.data('active')) return;
 
-					var width = $g11n_set_input.width();
 					$g11n_set_input
 						.val('')
 						.removeAttr('disabled')
-						.width(width + 44)
 						.data('active', false)
 						.parent('.g11n').removeClass('active');
 					$this.siblings('.lang_code').val('');
@@ -2019,7 +2015,6 @@ jQuery(function($){
 				function reset(){
 					$displayInput
 						.val($hiddenInput.val())
-						.width($displayInput.data('width'))
 						.removeAttr('disabled')
 						.data('active', false);
 					$displayInput.parent('.g11n').removeClass('active');
@@ -2033,10 +2028,8 @@ jQuery(function($){
 					function on_complete2(data){
 						if(!data || !data.langs) return;
 
-						var width = $displayInput.width();
-
 						$displayInput.closest('.g11n').addClass('active');
-						$displayInput.val(data.langs[xe.current_lang]).attr('disabled', 'disabled').width(width - 44).data('active', true);
+						$displayInput.val(data.langs[xe.current_lang]).attr('disabled', 'disabled').data('active', true);
 					}
 
 					if(pattern.test($displayInput.val())){