Form Field Tooltip Alignment (#22832)

* fixes alignment issues with form field labels that have tooltips * adds gap to is-label to preserve tooltip spacing * adds changelog entry
hashicorp · Sep 6, 2023 · 068a57c · 068a57c
1 parent 2172786
commit 068a57c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/changelog/22832.txt b/changelog/22832.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fixes form field label tooltip alignment
+```
diff --git a/ui/app/styles/core/label.scss b/ui/app/styles/core/label.scss
@@ -7,9 +7,13 @@
 
 .is-label {
   color: $grey-darkest;
-  display: inline-block;
   font-size: 14px;
   font-weight: $font-weight-bold;
+  display: flex;
+  align-items: center;
+  gap: $spacing-xxs;
+  width: min-content;
+  min-width: 100%;
 
   &:not(:last-child) {
     margin-bottom: 0.25rem;