Don't truncate API autocomplete list items (fixes #404) (#405)

Signed-off-by: Carl Gieringer <78054+carlgieringer@users.noreply.github.com>

premiser-ui/src/ApiAutoComplete.scss

@@ -1,4 +1,5 @@
 @import "~@react-md/form/dist/mixins";
+@import "~react-md/src/scss/grids";
 
 .rmd-floating-label {
   // TODO(17) figure out the source of this (.md-text--secondary?)
@@ -15,3 +16,18 @@
     @include rmd-form-theme-update-var(floating-top, 1.7rem);
   }
 }
+
+.api-autocomplete-listbox {
+  .rmd-list-item__text {
+    // Don't wrap autocomplete results since they can be long and we want users to be able to see
+    // their whole value for context.
+    white-space: normal;
+  }
+  // On narrow screens, we want to recover some of the horizontal space so that there's more room
+  // for the value of the list items.
+  @media (max-width: $md-grid-tablet-breakpoint) {
+    .rmd-option {
+      @include rmd-list-theme-update-var(item-horizontal-padding, 0.5rem);
+    }
+  }
+}

premiser-ui/src/ApiAutoComplete.tsx

@@ -175,6 +175,7 @@ export default function ApiAutoComplete({
           id={id}
           name={name}
           className="api-autocomplete"
+          listboxClassName="api-autocomplete-listbox"
           data={suggestionsData}
           labelKey={labelKey}
           valueKey={labelKey}