fix layout of parameter editor

adjust layout and fix tooltip positioning
PRGfx · Oct 2, 2023 · 7e0d23c · 7e0d23c
1 parent 66b4bbb
commit 7e0d23c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 8 deletions.
diff --git a/Resources/Private/LinkEditor/src/components/LinkAttributeGroup.tsx b/Resources/Private/LinkEditor/src/components/LinkAttributeGroup.tsx
@@ -36,6 +36,9 @@ const containerStyles = (collapsed: boolean): React.CSSProperties => ({
     flexWrap: 'wrap',
     gap: 8,
 });
+const groupStyles: React.CSSProperties = {
+    flexGrow: 1,
+};
 
 const isCollapsed = (props: LinkAttributeGroupProps): boolean =>
     props.collapsed === true && props.options.every(({ attribute }) => {
@@ -79,7 +82,7 @@ export const LinkAttributeGroup: React.FunctionComponent<LinkAttributeGroupProps
                 {props.options.map((option, i) => {
                     const inputId = `link-attribute-input-${i}`;
                     return (
-                        <div key={option.attribute}>
+                        <div key={option.attribute} style={groupStyles}>
                             <LinkAttributeLabel
                                 option={option}
                                 inputId={inputId}

diff --git a/Resources/Private/LinkEditor/src/components/LinkAttributeLabel.tsx b/Resources/Private/LinkEditor/src/components/LinkAttributeLabel.tsx
@@ -7,24 +7,44 @@ type LinkAttributeLabelProps = {
     inputId: string;
     i18nRegistry: {translate: (key: string) => string};
 }
+
+const styles = {
+    wrapper: {
+        position: 'relative',
+    },
+    container: {
+        display: 'flex',
+        justifyContent: 'space-between',
+    },
+    tooltipWrapper: {
+        position: 'relative',
+        zIndex: 10,
+    },
+    infoButton: {
+        cursor: 'pointer',
+    },
+} satisfies Record<string, React.CSSProperties>;
+
 export const LinkAttributeLabel: React.FunctionComponent<LinkAttributeLabelProps> = ({ inputId, option, i18nRegistry }) => {
     const [ helpOpen, setHelpOpen ] = useState(false);
     const toggleHelpMessage = () => setHelpOpen(current => !current);
 
     return (
-        <div>
-            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <div style={styles.wrapper}>
+            <div style={styles.container}>
                 <Label htmlFor={inputId}>{i18nRegistry.translate(option.label)}</Label>
                 {option.help && (
-                    <span role="button" onClick={toggleHelpMessage}>
+                    <span role="button" onClick={toggleHelpMessage} style={styles.infoButton}>
                         <Icon icon="question-circle"/>
                     </span>
                 )}
             </div>
             {option.help && helpOpen && (
-                <Tooltip renderInline>
-                    {i18nRegistry.translate(option.help)}
-                </Tooltip>
+                <div style={styles.tooltipWrapper}>
+                    <Tooltip>
+                        {i18nRegistry.translate(option.help)}
+                    </Tooltip>
+                </div>
             )}
         </div>
     );

diff --git a/Resources/Public/Plugin/LinkEditor/Plugin.js b/Resources/Public/Plugin/LinkEditor/Plugin.js