From f4b4d5ded4b7e0ff2116ba3b8f97e49fbf30b7c0 Mon Sep 17 00:00:00 2001
From: alex-krasn <64093224+alex-krasn@users.noreply.github.com>
Date: Tue, 21 Jul 2020 13:36:16 -0700
Subject: [PATCH] fix: DOM table nesting (#438)

* fix: DOM table nesting

* refactor: use td instead of th and limit padding

Co-authored-by: stew-ro <v-stewro@microsoft.com>
---
 .../components/pages/predict/predictPage.tsx  | 48 ++++++++++---------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/react/components/pages/predict/predictPage.tsx b/src/react/components/pages/predict/predictPage.tsx
index ae1303f0d..c1a051ab7 100644
--- a/src/react/components/pages/predict/predictPage.tsx
+++ b/src/react/components/pages/predict/predictPage.tsx
@@ -250,28 +250,32 @@ export default class PredictPage extends React.Component<IPredictPageProps, IPre
                                                 <h5 className="model-selection-header">
                                                     {strings.predict.selectModelHeader}
                                                 </h5>
-                                                <tr>
-                                                    <h6 className="model-selection-info-header" >
-                                                        <span className="model-selection-info-key">
-                                                            {strings.predict.modelIDPrefix}
-                                                        </span>
-                                                        <span title={mostRecentModel.modelInfo.modelId} className="model-selection-info-value">
-                                                            {mostRecentModel.modelInfo.modelId}
-                                                        </span>
-                                                    </h6>
-                                                </tr>
-                                                <tr>
-                                                    {mostRecentModel.modelInfo.modelName &&
-                                                        <h6 className="model-selection-info-header" >
-                                                            <span className="model-selection-info-key">
-                                                                {strings.predict.modelNamePrefix}
-                                                            </span>
-                                                            <span title={mostRecentModel.modelInfo.modelName} className="model-selection-info-value">
-                                                                {mostRecentModel.modelInfo.modelName}
-                                                            </span>
-                                                        </h6>
-                                                    }
-                                                </tr>
+                                                <table>
+                                                    <tbody>
+                                                        <tr>
+                                                            <td className="model-selection-info-header p-0" >
+                                                                <span className="model-selection-info-key">
+                                                                    {strings.predict.modelIDPrefix}
+                                                                </span>
+                                                                <span title={mostRecentModel.modelInfo.modelId} className="model-selection-info-value">
+                                                                    {mostRecentModel.modelInfo.modelId}
+                                                                </span>
+                                                            </td>
+                                                        </tr>
+                                                        <tr>
+                                                            {mostRecentModel.modelInfo.modelName &&
+                                                                <td className="model-selection-info-header p-0" >
+                                                                    <span className="model-selection-info-key">
+                                                                        {strings.predict.modelNamePrefix}
+                                                                    </span>
+                                                                    <span title={mostRecentModel.modelInfo.modelName} className="model-selection-info-value">
+                                                                        {mostRecentModel.modelInfo.modelName}
+                                                                    </span>
+                                                                </td>
+                                                            }
+                                                        </tr>
+                                                    </tbody>
+                                                </table>
                                             </div>
                                             <DefaultButton
                                                 className="keep-button-80px"