fix(console): simplify DOM structure and CSS for 'i' icon in order to prevent sizing issues (#321)

ui/src/components/PopperHover/index.tsx

@@ -2,17 +2,11 @@ import type { Placement, Options } from "@popperjs/core"
 import React, { useCallback, useEffect, useState } from "react"
 import ReactDOM from "react-dom"
 import { usePopper } from "react-popper"
-import styled from "styled-components"
-
-const Wrapper = styled.div`
-  display: flex;
-  align-items: center;
-`
 
 type Props = Readonly<{
   children: React.ReactNode
   placement: Placement
-  modifiers?: Options["modifiers"]
+  modifiers: Options["modifiers"]
   trigger: React.ReactNode
 }>
 
@@ -22,11 +16,10 @@ export const PopperHover = ({
   placement,
   trigger,
 }: Props) => {
-  const [container] = useState<Element>(document.createElement("div"))
+  const [container] = useState<HTMLElement>(document.createElement("div"))
   const [active, setActive] = React.useState(false)
   const [triggerElement, setTriggerElement] = useState<HTMLElement | null>(null)
-  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null)
-  const { attributes, styles } = usePopper(triggerElement, popperElement, {
+  const { attributes, styles } = usePopper(triggerElement, container, {
     modifiers: [
       ...modifiers,
       {
@@ -57,30 +50,35 @@ export const PopperHover = ({
     }
   }, [])
 
+  useEffect(() => {
+    const css = Object.entries(styles.popper).reduce(
+      (acc, [prop, value]) => `${acc} ${prop}: ${value};`,
+      "z-index: 100;",
+    )
+    container.setAttribute("style", css)
+  }, [styles.popper])
+
   return (
     <>
-      <Wrapper
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        ref={setTriggerElement}
-      >
-        {trigger}
-      </Wrapper>
+      {React.isValidElement(trigger) &&
+        React.cloneElement(trigger, {
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          ref: setTriggerElement,
+        })}
 
-      {ReactDOM.createPortal(
-        <div
-          ref={setPopperElement}
-          style={{ ...styles.popper, zIndex: 100 }}
-          {...attributes.popper}
-        >
-          {children}
-        </div>,
-        container,
-      )}
+      {React.isValidElement(children) &&
+        ReactDOM.createPortal(
+          React.cloneElement(children, {
+            ...attributes.popper,
+          }),
+          container,
+        )}
     </>
   )
 }
 
 PopperHover.defaultProps = {
+  modifiers: [],
   placement: "auto",
 }

ui/src/scenes/Schema/Row/index.tsx

@@ -17,6 +17,7 @@ type Props = Readonly<{
 }>
 
 const Type = styled(Text)`
+  margin-right: 1rem;
   flex: 0;
   transition: all 0.2s;
 `
@@ -24,7 +25,7 @@ const Type = styled(Text)`
 const PlusButton = styled(SecondaryButton)`
   position: absolute;
   right: ${({ tooltip }: Pick<Props, "tooltip">) =>
-    tooltip ? "2.5rem" : "1rem"};
+    tooltip ? "3rem" : "1rem"};
   margin-left: 1rem;
   opacity: 0;
   transition: all 0.2s;
@@ -34,7 +35,8 @@ const Wrapper = styled.div<Pick<Props, "expanded">>`
   position: relative;
   display: flex;
   flex-direction: column;
-  padding: 0.5rem 1rem;
+  padding: 0.5rem 0;
+  padding-left: 1rem;
   transition: all 0.2s;
 
   &:hover ${/* sc-selector */ PlusButton} {
@@ -63,14 +65,14 @@ const Spacer = styled.span`
 `
 
 const InfoIcon = styled(Info)`
-  height: 100%;
-  width: 100%;
-  padding-left: 1rem;
   color: ${color("draculaPurple")};
+`
 
-  &:hover {
-    cursor: default;
-  }
+const InfoIconWrapper = styled.div`
+  display: flex;
+  padding: 0 1rem;
+  align-items: center;
+  justify-content: center;
 `
 
 const Row = ({
@@ -113,12 +115,16 @@ const Row = ({
               {
                 name: "offset",
                 options: {
-                  offset: [15, 0],
+                  offset: [-15, 0],
                 },
               },
             ]}
-            placement="top-start"
-            trigger={<InfoIcon onClick={handleClick} size="10px" />}
+            placement="right"
+            trigger={
+              <InfoIconWrapper>
+                <InfoIcon size="10px" />
+              </InfoIconWrapper>
+            }
           >
             <Tooltip>{description}</Tooltip>
           </PopperHover>