Remove fragment to support older versions of react (#45)

Author: MykolaGolubyev

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-component-viewer",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "description": "React Component to help with development of other React components",
   "repository": {
     "type": "git",

package.json

@@ -73,11 +73,11 @@ class ComponentViewer extends Component<Props, ComponentViewerState> {
             this.renderSelectionPanelAndDemo(demoEntry);
 
         return (
-            <React.Fragment>
+            <div>
                 <GlobalHotKeysHandler keyBoundActions={this.hotKeyBoundActions}/>
                 {rendered}
                 <VisualizedActions/>
-            </React.Fragment>
+            </div>
         );
     }
 

src/components/viewer/ComponentViewer.tsx

@@ -29,8 +29,4 @@
 }
 
 .rcv-component-viewer-help-hotkeys-grid {
-    display: grid;
-
-    grid-template-columns: auto 1fr;
-    grid-gap: 8px 32px;
 }

src/components/viewer/help/ComponentViewerHelp.css

@@ -9,13 +9,15 @@ export function ComponentViewerHelp() {
     return (
         <div className="rcv-component-viewer-help">
             <h1>Hotkeys</h1>
-            <div className="rcv-component-viewer-help-hotkeys-grid">
+            <table className="rcv-component-viewer-help-hotkeys-grid">
+                <tbody>
                 {Object.keys(globalActionDefaultKeys).map(actionKey =>
                     <HotKeyAndDescription
                         key={actionKey}
                         actionKey={actionKey}
                     />)}
-            </div>
+                </tbody>
+            </table>
             <h1>GitHub</h1>
             <a href="https://github.com/TestingIsDocumenting/react-component-viewer" target="_blank">Repository</a>
         </div>
@@ -28,9 +30,13 @@ interface HotKeyAndDescriptionProps {
 
 function HotKeyAndDescription({actionKey}: HotKeyAndDescriptionProps) {
     return (
-        <React.Fragment>
-            <HotKeyPill hotKey={globalActionDefaultKeys[actionKey]}/>
-            <div>{globalActionDescription[actionKey]}</div>
-        </React.Fragment>
+        <tr>
+            <td>
+                <HotKeyPill hotKey={globalActionDefaultKeys[actionKey]}/>
+            </td>
+            <td>
+                <div>{globalActionDescription[actionKey]}</div>
+            </td>
+        </tr>
     );
 }