#50 - Fix for

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## [2.x.x] - 2020-08-xx
+
+- [#47](https://github.com/estruyf/vscode-front-matter/issues/#47): Fix when table shows only value `0`
+- [#50](https://github.com/estruyf/vscode-front-matter/issues/#50): Fix in the table rendering of rows
+
 ## [2.1.0] - 2020-08-04
 
 - [#44](https://github.com/estruyf/vscode-front-matter/issues/45): Added article creation command

package-lock.json

@@ -40,9 +40,9 @@
 			}
 		},
 		"@bendera/vscode-webview-elements": {
-			"version": "0.5.0",
-			"resolved": "https://registry.npmjs.org/@bendera/vscode-webview-elements/-/vscode-webview-elements-0.5.0.tgz",
-			"integrity": "sha512-mlZi8RG+tsqr1bDbA7H82spyWzZyj/tsyHb9eta7kE0xRhvx7ON6w6DG4PONew1rVJv1knTKOAW4iQKVBYQhVQ==",
+			"version": "0.6.2",
+			"resolved": "https://registry.npmjs.org/@bendera/vscode-webview-elements/-/vscode-webview-elements-0.6.2.tgz",
+			"integrity": "sha512-smtr+KvCKV2MwjVrmyvrhonpaXVpxCjTMXUQOwDwWSAQ42x5pnlpjCGElz2dljc5VHS1Mh1ovPSQ/P3jAm7vMQ==",
 			"dev": true,
 			"requires": {
 				"lit-element": "^2.5.1"

package.json

@@ -273,7 +273,7 @@
 		"clean": "rm -rf dist"
 	},
 	"devDependencies": {
-		"@bendera/vscode-webview-elements": "0.5.0",
+		"@bendera/vscode-webview-elements": "0.6.2",
 		"@iarna/toml": "2.2.3",
 		"@types/glob": "7.1.3",
 		"@types/js-yaml": "3.12.1",

src/viewpanel/components/SeoStatus.tsx

@@ -2,11 +2,9 @@ import * as React from 'react';
 import { SEO } from '../../models/PanelSettings';
 import { ArticleDetails } from './ArticleDetails';
 import { Collapsible } from './Collapsible';
-import { SeoDetails } from './SeoDetails';
 import { SeoFieldInfo } from './SeoFieldInfo';
 import { SeoKeywords } from './SeoKeywords';
-import { ValidInfo } from './ValidInfo';
-import { VsTable, VsTableBody, VsTableCell, VsTableHeader, VsTableHeaderCell, VsTableRow } from './VscodeComponents';
+import { VsTable, VsTableBody, VsTableHeader, VsTableHeaderCell } from './VscodeComponents';
 
 export interface ISeoStatusProps {
   seo: SEO;
@@ -17,6 +15,7 @@ export const SeoStatus: React.FunctionComponent<ISeoStatusProps> = (props: React
   const { data, seo } = props;
   const { title } = data;
   const [ isOpen, setIsOpen ] = React.useState(true);
+  const tableRef = React.useRef<HTMLElement>();
 
   const { descriptionField } = seo;
 
@@ -34,7 +33,7 @@ export const SeoStatus: React.FunctionComponent<ISeoStatusProps> = (props: React
         <div className={`seo__status__details`}>
           <h4>Recommendations</h4>
 
-          <VsTable bordered>
+          <VsTable ref={tableRef} bordered zebra>
             <VsTableHeader slot="header">
               <VsTableHeaderCell className={`table__cell`}>Property</VsTableHeaderCell>
               <VsTableHeaderCell className={`table__cell`}>Length</VsTableHeaderCell>
@@ -73,6 +72,21 @@ export const SeoStatus: React.FunctionComponent<ISeoStatusProps> = (props: React
     );
   };
 
+  // Workaround for lit components not updating render
+  React.useEffect(() => {
+    setTimeout(() => {
+      let height = 0;
+
+      tableRef.current?.childNodes.forEach((elm: any) => {
+        height += elm.clientHeight;
+      });
+
+      if (height > 0 && tableRef.current) {
+        tableRef.current.style.height = `${height}px`;
+      }
+    }, 10);
+  }, [title, data[descriptionField], data?.articleDetails?.wordCount]);
+
   return (
     <Collapsible title="SEO Status" sendUpdate={(value) => setIsOpen(value)}>
       { renderContent() }