Add border on search example buttons, fix react error

adsabs · Nov 19, 2020 · a40a0f9 · a40a0f9
1 parent f236b15
commit a40a0f9
Showing 1 changed file with 18 additions and 4 deletions.
diff --git 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,27 +67,36 @@ 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
                 label={entry.label}
                 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
                 label={entry.label}
                 text={entry.example}
                 tooltip={entry.tooltip}
                 onClick={() => onClick(entry.example)}
+                key={entry.label}
               />
             ))}
           </Dl>