template preview columns update with resizing

2 files changed, 3 insertions, 2 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index 81fd3386c..b3bacb13c 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -259,7 +259,7 @@
 
 .docCreatorMenu-preview-container {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, 140px);
     grid-template-rows: 140px;
     grid-auto-rows: 141px;
     overflow-y: scroll;
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index e5288f4f8..34bec3b88 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -296,7 +296,8 @@ export class DocCreatorMenu extends ObservableReactComponent<{}> {
     get templatesPreviewContents(){
         const renderedTemplates: Doc[] = [];
         return (
-            <div className='docCreatorMenu-preview-container'>
+            <div className='docCreatorMenu-preview-container'
+                style={{gridTemplateColumns: `repeat(${Math.floor((this._menuDimensions.width - 10) / 140)}, 140px)`}}>
                 {this._templateDocs.map(doc => ({icon: ImageCast(doc.icon), doc})).filter(info => info.icon && info.doc).map(info => {
                     if (renderedTemplates.includes(info.doc)) return undefined;
                     renderedTemplates.push(info.doc);