From a40a0f9609d50f3ac7d34da9a8129acc0ff559a0 Mon Sep 17 00:00:00 2001
From: Tim Hostetler <thostetler@users.noreply.github.com>
Date: Mon, 16 Nov 2020 14:58:34 -0500
Subject: [PATCH] Add border on search example buttons, fix react error

---
 .../components/SearchExamples.jsx.js          | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/js/react/Recommender/components/SearchExamples.jsx.js b/src/js/react/Recommender/components/SearchExamples.jsx.js
index 1df443bea..28ac5f45d 100644
--- a/src/js/react/Recommender/components/SearchExamples.jsx.js
+++ b/src/js/react/Recommender/components/SearchExamples.jsx.js
@@ -25,7 +25,12 @@ define([
       <React.Fragment>
         <dt>{label}</dt>
         <dd>
-          <button type="button" onClick={onClick} className="text-link">
+          <button
+            type="button"
+            onClick={onClick}
+            className="text-link"
+            style={{ border: 'dotted 1px rgba(0,0,0,0.3)', marginRight: '4px' }}
+          >
             {text}
           </button>
           {tooltip && (
@@ -62,8 +67,15 @@ define([
     };
 
     return (
-      <div style={{ paddingTop: '1rem' }}>
-        <div className="col-sm-5 quick-reference">
+      <div
+        style={{
+          paddingTop: '1rem',
+          display: 'flex',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+        }}
+      >
+        <div className="quick-reference">
           <Dl>
             {searchExamples.slice(0, 7).map((entry) => (
               <Entry
@@ -71,11 +83,12 @@ define([
                 text={entry.example}
                 tooltip={entry.tooltip}
                 onClick={() => onClick(entry.example)}
+                key={entry.label}
               />
             ))}
           </Dl>
         </div>
-        <div className="col-sm-7 quick-reference">
+        <div className="quick-reference">
           <Dl>
             {searchExamples.slice(7).map((entry) => (
               <Entry
@@ -83,6 +96,7 @@ define([
                 text={entry.example}
                 tooltip={entry.tooltip}
                 onClick={() => onClick(entry.example)}
+                key={entry.label}
               />
             ))}
           </Dl>