feat: Allow per-camera customization of grid width (#2273)

- Closes #2271

src/components/live/grid.ts

@@ -45,9 +45,16 @@ export class AdvancedCameraCardLiveGrid extends LitElement {
     const view = this.viewManagerEpoch?.manager.getView();
     const triggeredCameraID = cameraID ?? view?.camera;
 
+    // Get the camera's grid width factor from its dimensions config.
+    const gridWidthFactor = cameraID
+      ? this.cameraManager?.getStore().getCameraConfig(cameraID)?.dimensions?.grid
+          ?.width_factor
+      : undefined;
+
     return html`
       <advanced-camera-card-live-carousel
         grid-id=${ifDefined(cameraID)}
+        grid-width-factor=${ifDefined(gridWidthFactor)}
         .hass=${this.hass}
         .viewManagerEpoch=${this.viewManagerEpoch}
         .viewFilterCameraID=${cameraID}

src/components/viewer/grid.ts

@@ -41,9 +41,17 @@ export class AdvancedCameraCardViewerGrid extends LitElement {
 
   protected _renderCarousel(filterCamera?: string): TemplateResult {
     const selectedCameraID = this.viewManagerEpoch?.manager.getView()?.camera;
+
+    // Get the camera's grid width factor from its dimensions config.
+    const gridWidthFactor = filterCamera
+      ? this.cameraManager?.getStore().getCameraConfig(filterCamera)?.dimensions?.grid
+          ?.width_factor
+      : undefined;
+
     return html`
       <advanced-camera-card-viewer-carousel
         grid-id=${ifDefined(filterCamera)}
+        grid-width-factor=${ifDefined(gridWidthFactor)}
         .hass=${this.hass}
         .viewManagerEpoch=${this.viewManagerEpoch}
         .viewFilterCameraID=${filterCamera}