From 3c4c98832066b8859ab27d91167a994a8dcc7441 Mon Sep 17 00:00:00 2001
From: Guy Willis <guywillis@users.noreply.github.com>
Date: Tue, 28 Jan 2025 16:34:14 +0000
Subject: [PATCH] Fix: Converted inline item width to CSS variable (fixes #158)
 (#159)

---
 js/HotgridView.js     | 20 ++++++++++++++++++++
 less/hotgrid.less     |  2 +-
 templates/hotgrid.jsx |  3 ---
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/js/HotgridView.js b/js/HotgridView.js
index 6985290..39b2a84 100644
--- a/js/HotgridView.js
+++ b/js/HotgridView.js
@@ -12,6 +12,8 @@ class HotgridView extends ComponentView {
     this.onItemClicked = this.onItemClicked.bind(this);
 
     this.setUpViewData();
+    this.setUpEventListeners();
+    this.setItemWidth();
   }
 
   remove() {
@@ -28,6 +30,24 @@ class HotgridView extends ComponentView {
     this._isPopupOpen = false;
   }
 
+  setUpEventListeners() {
+    this.listenTo(Adapt, 'device:changed', this.setItemWidth);
+  }
+
+  setItemWidth() {
+    const columns = this.model.get('_columns');
+    const fallbackColumns = 2;
+    const shouldCalculateColumns = Boolean(columns && device.isScreenSizeMin('medium'));
+    this.$el
+      .toggleClass(`has-${columns}-columns`, shouldCalculateColumns)
+      .toggleClass(`has-${fallbackColumns}-columns`, !shouldCalculateColumns);
+    const calculatedColumns = shouldCalculateColumns
+      ? columns
+      : fallbackColumns;
+    const width = `${100 / calculatedColumns}%`;
+    this.el.style.setProperty('--adapt-hotgrid-item-width', width);
+  }
+
   postRender() {
     this.$('.hotgrid__widget').imageready(this.setReadyStatus.bind(this));
 
diff --git a/less/hotgrid.less b/less/hotgrid.less
index e80a4bf..3e377c8 100755
--- a/less/hotgrid.less
+++ b/less/hotgrid.less
@@ -7,7 +7,7 @@
   }
 
   &__item {
-    width: 50%;
+    width: var(--adapt-hotgrid-item-width);
     line-height: 0;
   }
 
diff --git a/templates/hotgrid.jsx b/templates/hotgrid.jsx
index 5523a7b..3c7a134 100644
--- a/templates/hotgrid.jsx
+++ b/templates/hotgrid.jsx
@@ -61,9 +61,6 @@ export default function Hotgrid(props) {
               ])}
               role="listitem"
               key={_index}
-              style={(_columns && hasColumnLayout) ?
-                { width: `${100 / _columns}%` } :
-                null}
             >
 
               <button className={classes([