fix(plugins/plugin-client-common): tab completion UI does not render on separate line from input

Fixes #5307

Author: starpit

plugins/plugin-client-alternate/web/scss/CustomInput.scss

@@ -15,5 +15,5 @@
  */
 
 .kui--tab-completions {
-  bottom: 3.25em;
+  bottom: 4.25rem;
 }

plugins/plugin-client-common/web/css/static/InputStripe.scss

@@ -6,6 +6,7 @@
   box-shadow: 0 -3px 10px 0 rgba(60, 60, 60, 0.1);
 
   .repl-block {
+    position: unset;
     flex: 1;
     padding: 0;
     margin: 0;
@@ -34,9 +35,6 @@
       display: flex;
       overflow-x: auto;
 
-      /* make the completion options a bit smaller, since they nest within a small space */
-      font-size: 0.75em;
-
       .kui--tab-completions--option {
         overflow: unset;
         .bx--btn--primary:focus {

plugins/plugin-client-common/web/css/static/TabCompletion.scss

@@ -1,7 +1,7 @@
 @import 'carbon-components/scss/components/button/_button.scss';
 
 .kui--tab-completions {
-  font-size: 0.875em;
+  flex-basis: 100%;
 
   .kui--tab-completions--option {
     .bx--btn--primary {

plugins/plugin-client-common/web/css/static/repl.scss

@@ -178,6 +178,9 @@
 .red-text {
   white-space: pre-wrap;
 }
+.repl-input {
+  flex-wrap: wrap;
+}
 .repl-input,
 .repl-output {
   display: flex;