From 1ec1a704dd1a2741e5c2ed705e873d331493697a Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Thu, 28 Nov 2024 09:15:05 -0300
Subject: [PATCH] fix: add padding to global variables input (#4900)

* Fixed padding for badges on input component

* Removed border from emerald badge
---
 .../inputComponent/components/popover/index.tsx       | 11 ++++++-----
 src/frontend/src/components/ui/badge.tsx              |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx
index 75ed3d5a5..8147ce84c 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx
@@ -68,9 +68,9 @@ const CustomInputPopover = ({
         <div
           data-testid={`anchor-${id}`}
           className={cn(
-            "primary-input noflow nowheel nopan nodelete nodrag border-1 flex h-full min-h-[2.375rem] cursor-default flex-wrap items-center px-3",
-            editNode && "min-h-7 p-0",
-            editNode && disabled && "min-h-5 border-muted p-0",
+            "primary-input noflow nowheel nopan nodelete nodrag border-1 flex h-full min-h-[2.375rem] cursor-default flex-wrap items-center px-2",
+            editNode && "min-h-7 p-0 px-1",
+            editNode && disabled && "min-h-5 border-muted",
             disabled && "bg-muted text-muted",
             isFocused &&
               "border-foreground ring-1 ring-foreground hover:border-foreground",
@@ -100,6 +100,7 @@ const CustomInputPopover = ({
               variant={nodeStyle ? "emerald" : "secondary"}
               className={cn(
                 "flex items-center gap-1 truncate",
+                editNode && "text-xs",
                 nodeStyle ? "font-jetbrains rounded-[3px] px-1" : "bg-muted",
               )}
             >
@@ -128,8 +129,8 @@ const CustomInputPopover = ({
               disabled={disabled}
               required={required}
               className={cn(
-                "popover-input nodrag truncate pr-4",
-                editNode && "px-3",
+                "popover-input nodrag truncate px-1 pr-4",
+                editNode && "px-2",
                 editNode && disabled && "h-fit w-fit",
                 disabled &&
                   "disabled:text-muted disabled:opacity-100 placeholder:disabled:text-muted-foreground",
diff --git a/src/frontend/src/components/ui/badge.tsx b/src/frontend/src/components/ui/badge.tsx
index 86a997d9e..d65d38cf2 100644
--- a/src/frontend/src/components/ui/badge.tsx
+++ b/src/frontend/src/components/ui/badge.tsx
@@ -18,7 +18,7 @@ const badgeVariants = cva(
         secondaryStatic: "bg-muted text-muted-foreground border-0",
         pinkStatic: "bg-accent-pink text-accent-pink-foreground border-0",
         emerald:
-          "bg-accent-emerald text-accent-emerald-foreground hover:bg-accent-emerald-hover",
+          "bg-accent-emerald text-accent-emerald-foreground hover:bg-accent-emerald-hover border-0",
         successStatic:
           "bg-accent-emerald text-accent-emerald-foreground border-0",
         errorStatic: "bg-error-background text-error-foreground border-0",