From 206baebf773f90f62857a41227b2c899b1fe393e Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 22 Jun 2023 13:31:46 +0300
Subject: [PATCH] fix: fix inline-edit input

---
 .../ExpandableInput/ExpandableInputBase.vue   | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
index ba4ca6f41b..14109db747 100644
--- a/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
+++ b/packages/editor-ui/src/components/ExpandableInput/ExpandableInputBase.vue
@@ -28,23 +28,22 @@ export default defineComponent({
 <style lang="scss" scoped>
 $--horiz-padding: 15px;
 
-input {
-	border: 1px solid transparent;
-	padding: 0 $--horiz-padding - 2px; // -2px for borders
-}
-
-div.el-input {
+.el-input {
 	display: inline-grid;
 	font: inherit;
 	padding: 10px 0;
 
-	&::after,
-	input {
+	:deep(input) {
+		border: 1px solid transparent;
+		padding: 0 $--horiz-padding - 2px; // -2px for borders
+		width: 100%;
 		grid-area: 1 / 2;
 		font: inherit;
 	}
 
 	&::after {
+		grid-area: 1 / 2;
+		font: inherit;
 		content: attr(data-value) ' ';
 		visibility: hidden;
 		white-space: nowrap;
@@ -56,9 +55,13 @@ div.el-input {
 	}
 
 	&:hover {
-		input:not(:focus) {
+		:deep(input):not(:focus) {
 			border: 1px solid var(--color-text-lighter);
 		}
 	}
+
+	:deep(input):focus {
+		border: 1px solid var(--color-secondary);
+	}
 }
 </style>