ui-core: adapt tooltip position

Change the element receiving the relative position in order to improve scalability for positioning elements relative to it.

Signed-off-by: SharglutDev <[email protected]>

Author: SharglutDev

ui-core/src/styles/inputs/fieldWrapper.css

@@ -4,7 +4,6 @@
   --status-message-wrapper-tooltip--offset: 4px;
 
   border-radius: 0.5rem;
-  position: relative;
   padding: 0.625rem 0.813rem 1rem 1rem;
 
   &.success:not(:has(.status-message-wrapper-tooltip)) {
@@ -24,6 +23,8 @@
   }
 
   .custom-field {
+    position: relative;
+
     display: flex;
     flex-direction: column;
 

ui-core/src/styles/inputs/label.css

@@ -8,7 +8,7 @@
 
   .required {
     position: absolute;
-    left: -0.5rem;
+    left: -24px;
     border-radius: 0.031rem;
     @apply text-info-30;
   }

ui-core/src/styles/inputs/statusMessage.css

@@ -37,10 +37,7 @@
   display: flex;
   align-items: center;
   width: 320px;
-  top: calc(
-    100% - var(--input-wrapper-padding) - var(--field-wrapper-padding-bottom) -
-      var(--status-message-wrapper-tooltip--offset)
-  );
+  top: calc(100% - var(--input-wrapper-padding) - var(--status-message-wrapper-tooltip--offset));
   gap: 12px;
   border-radius: 8px;
   box-shadow:
@@ -84,11 +81,11 @@
   }
 
   &.tooltip-left {
-    left: 8px;
+    left: -6px;
   }
 
   &.tooltip-right {
-    right: 8px;
+    right: -2px;
   }
 
   .status-message {