fix(ui): relationship field "add new" button styling (#7814)

packages/ui/src/elements/AddNewRelation/index.scss

@@ -10,12 +10,8 @@
     height: 100%;
   }
 
-  &__add-button {
-    position: relative;
-  }
-
-  &__add-button--unstyled,
-  &__add-button--unstyled.doc-drawer__toggler {
+  &__add-button:not(.relationship-add-new__add-button--unstyled),
+  &__add-button:not(.relationship-add-new__add-button--unstyled).doc-drawer__toggler {
     @include formInput;
     margin: 0;
     border-top-left-radius: 0;
@@ -29,4 +25,18 @@
     display: flex;
     cursor: pointer;
   }
+
+  &__add-button {
+    margin: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    position: relative;
+    height: 100%;
+    margin-left: -1px;
+    display: flex;
+    padding: 0 base(0.5);
+    align-items: center;
+    display: flex;
+    cursor: pointer;
+  }
 }

packages/ui/src/elements/AddNewRelation/index.tsx

@@ -142,8 +142,10 @@ export const AddNewRelation: React.FC<Props> = ({
             <DocumentDrawerToggler
               className={[
                 `${baseClass}__add-button`,
-                !unstyled && `${baseClass}__add-button--styled`,
-              ].join(' ')}
+                unstyled && `${baseClass}__add-button--unstyled`,
+              ]
+                .filter(Boolean)
+                .join(' ')}
               onClick={() => setShowTooltip(false)}
               onMouseEnter={() => setShowTooltip(true)}
               onMouseLeave={() => setShowTooltip(false)}