fix: share query button and documentation button are visible even when query is long (#3796)

Author: ElinorW

src/app/views/query-runner/query-input/auto-complete/AutoComplete.tsx

@@ -43,6 +43,16 @@ const useStyles = makeStyles({
   },
   noResize: {
     resize: 'none'
+  },
+  textareaWrapper: {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center'
+  },
+  suffixContainer: {
+    position: 'absolute',
+    right: '8px',
+    top: '8px'
   }
 });
 
@@ -331,16 +341,23 @@ function AutoComplete(props: IAutoCompleteProps) {
       ref={containerRef}
     >
       {isMultiline ? (
-        <Textarea
-          value={queryUrl}
-          aria-label={translateMessage('Query Sample Input')}
-          className={`${classes.autoInput} ${classes.noResize}`}
-          style={{ minHeight: '32px' }} // approximate
-          autoComplete="off"
-          onChange={(e) => onChange(e)}
-          onBlur={updateUrlContent}
-          onKeyDown={onKeyDown}
-        />
+        <div className={classes.textareaWrapper}>
+          <Textarea
+            value={queryUrl}
+            aria-label={translateMessage('Query Sample Input')}
+            className={`${classes.autoInput} ${classes.noResize}`}
+            style={{ minHeight: '32px', paddingRight: '60px' }}
+            autoComplete="off"
+            onChange={(e) => onChange(e)}
+            onBlur={updateUrlContent}
+            onKeyDown={onKeyDown}
+          />
+          {renderSuffix() && (
+            <div className={classes.suffixContainer}>
+              {renderSuffix()}
+            </div>
+          )}
+        </div>
       ) : (
         <Input
           value={queryUrl}