Table layout to work with any number of data cols

app/routes/object-damage.tsx

@@ -1,7 +1,7 @@
 import { WeaponCombobox } from "~/components/Combobox";
 import { Image } from "~/components/Image";
 import { Main } from "~/components/Main";
-import { DAMAGE_RECEIVERS, useObjectDamage } from "~/modules/analyzer";
+import { useObjectDamage } from "~/modules/analyzer";
 import {
   type MainWeaponId,
   BIG_BUBBLER_ID,
@@ -93,9 +93,11 @@ function DamageReceiversGrid({
   return (
     <div
       className="object-damage__grid"
-      style={
-        { "--columns-count": String(2 + damagesToReceivers.length) } as any
-      }
+      style={{
+        gridTemplateColumns: gridTemplateColumnsValue(
+          damagesToReceivers[0]?.damages.length ?? 0
+        ),
+      }}
     >
       <div />
       <div />
@@ -154,3 +156,10 @@ function DamageReceiversGrid({
     </div>
   );
 }
+
+function gridTemplateColumnsValue(dataColumnsCount: number) {
+  return `max-content max-content ${new Array(dataColumnsCount)
+    .fill(null)
+    .map(() => `1fr`)
+    .join(" ")}`;
+}

app/styles/object-damage.css

@@ -2,9 +2,6 @@
   display: grid;
   width: 100%;
   column-gap: var(--s-6);
-
-  /* xxx: make dynamic */
-  grid-template-columns: max-content max-content 1fr 1fr 1fr 1fr 1fr;
   place-items: center;
   row-gap: var(--s-3);
 }