fix(plugins/plugin-client-common): tab completion UI does not render …

…on separate line from input Fixes #5307
kubernetes-sigs · Aug 4, 2020 · 1460ee6 · 1460ee6
1 parent 1e1037f
commit 1460ee6
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 5 deletions.
diff --git a/plugins/plugin-client-alternate/web/scss/CustomInput.scss b/plugins/plugin-client-alternate/web/scss/CustomInput.scss
@@ -15,5 +15,5 @@
  */
 
 .kui--tab-completions {
-  bottom: 3.25em;
+  bottom: 4.25rem;
 }
diff --git a/plugins/plugin-client-common/web/css/static/InputStripe.scss b/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 {

diff --git a/plugins/plugin-client-common/web/css/static/TabCompletion.scss b/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 {

diff --git a/plugins/plugin-client-common/web/css/static/repl.scss b/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;