🥅 Adds safty check when displayData undefined

- Fixes a NaN bug when `displayData.cols` was undefined
- Resolves type error where `activeColCount` was being declared as a string but used as a number.
- Also added some reactivity so it works when a window gets resized.

Author: Lissy93

src/components/LinkItems/Section.vue

@@ -128,7 +128,7 @@ export default {
     widgets: Array,
     index: Number,
     isWide: Boolean,
-    activeColCount: String,
+    activeColCount: Number,
   },
   components: {
     Collapsable,
@@ -211,7 +211,9 @@ export default {
       return styles;
     },
     effectiveColsSpan() {
-      return Math.min(this.activeColCount, this.displayData.cols);
+      const { cols } = this.displayData;
+      if (!cols) return cols;
+      return Math.min(this.activeColCount, cols);
     },
   },
   methods: {

src/views/Home.vue

@@ -85,7 +85,7 @@ export default {
     layout: '',
     itemSizeBound: '',
     addNewSectionOpen: false,
-    activeColCount: '1',
+    activeColCount: 1,
   }),
   computed: {
     singleSectionView() {
@@ -179,8 +179,10 @@ export default {
       const { sectionsContainer } = this.$refs;
       if (!sectionsContainer) return;
       const cs = getComputedStyle(sectionsContainer);
-      const varVal = cs.getPropertyValue('--col-count').trim();
-      this.activeColCount = varVal;
+      const varVal = parseInt(cs.getPropertyValue('--col-count'), 10);
+      if (!Number.isNaN(varVal) && varVal > 0) {
+        this.activeColCount = varVal;
+      }
     },
   },
   mounted() {
@@ -189,6 +191,10 @@ export default {
     this.layout = this.layoutOrientation;
     this.itemSizeBound = this.iconSize;
     this.readActiveColCount();
+    window.addEventListener('resize', this.readActiveColCount);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.readActiveColCount);
   },
 };
 </script>