From a82c2d5af85ab8067c4c4d6b7e704e745a040ce2 Mon Sep 17 00:00:00 2001
From: Jandl-hostacny <jakub.hostacny@jandl.sk>
Date: Thu, 8 Oct 2026 10:11:27 +0200
Subject: [PATCH] feat: zarovnanie vysky produktovych kariet v riadku (uloha 7)

---
 src/components/editor/ConfigPanel.tsx | 31 +++++++++++++++++++++++++++
 src/lib/emailRenderer.ts              | 31 ++++++++++++++++++++-------
 src/types/newsletter.ts               |  1 +
 3 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/src/components/editor/ConfigPanel.tsx b/src/components/editor/ConfigPanel.tsx
index 440f1b0..b7da117 100644
--- a/src/components/editor/ConfigPanel.tsx
+++ b/src/components/editor/ConfigPanel.tsx
@@ -342,6 +342,37 @@ export const ConfigPanel: React.FC<ConfigPanelProps> = ({
             />
           </div>
 
+          {/* Rozloženie produktov (Počet produktov na riadok) */}
+          <div>
+            <label className="block text-xs font-semibold text-gray-700 mb-1">
+              Rozloženie produktov na riadok
+            </label>
+            <div className="grid grid-cols-2 gap-2 bg-gray-100 p-1 rounded-xl">
+              <button
+                type="button"
+                onClick={() => updateData({ columns: 2 })}
+                className={`py-1.5 px-2.5 rounded-lg text-xs font-bold transition-all flex items-center justify-center gap-1.5 ${
+                  (module.data.columns || 2) === 2
+                    ? 'bg-white text-gray-900 shadow-sm'
+                    : 'text-gray-500 hover:text-gray-900'
+                }`}
+              >
+                <span>2 produkty na riadok</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => updateData({ columns: 1 })}
+                className={`py-1.5 px-2.5 rounded-lg text-xs font-bold transition-all flex items-center justify-center gap-1.5 ${
+                  module.data.columns === 1
+                    ? 'bg-white text-gray-900 shadow-sm'
+                    : 'text-gray-500 hover:text-gray-900'
+                }`}
+              >
+                <span>1 produkt na riadok</span>
+              </button>
+            </div>
+          </div>
+
           {/* Farba pozadia skupiny produktov */}
           <div className="bg-gray-50 p-3.5 rounded-xl border border-gray-200 space-y-2.5">
             <div className="flex items-center justify-between">
diff --git a/src/lib/emailRenderer.ts b/src/lib/emailRenderer.ts
index 8b1768a..55b3fd4 100644
--- a/src/lib/emailRenderer.ts
+++ b/src/lib/emailRenderer.ts
@@ -309,13 +309,27 @@ function renderModule(m: any, campaign: NewsletterCampaign): string {
       const badgePrcColor = m.data.badgePriceColor || '#fefefe';
       const badgeCustomTxt = m.data.badgeHeaderCustomText || null;
 
+      const cols = m.data.columns === 1 ? 1 : 2;
       const rows: ProductItem[][] = [];
-      for (let i = 0; i < products.length; i += 2) {
-        rows.push(products.slice(i, i + 2));
+      for (let i = 0; i < products.length; i += cols) {
+        rows.push(products.slice(i, i + cols));
       }
 
-      const rowsHtml = rows.map((row) => `
-        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-bottom: 12px;">
+      const rowsHtml = rows.map((row) => {
+        if (cols === 1) {
+          const p = row[0];
+          return `
+          <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-bottom: 12px;">
+              <tr>
+                  <td width="100%" valign="top">
+                      ${renderExactProductCard(p, globalValidity, cardBg, cardBorder, badgeHdrBg, badgeHdrColor, badgePrcBg, badgePrcColor, badgeCustomTxt, m.data.sectionTitle)}
+                  </td>
+              </tr>
+          </table>`;
+        }
+
+        return `
+        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" height="1" style="margin-bottom: 12px;">
             <tr>
                 ${row.map((p, idx) => `
                 <td width="50%" valign="top" height="100%" style="padding-${idx === 0 ? 'right: 6px' : 'left: 6px'}; padding-bottom: 0; height: 100%;">
@@ -324,7 +338,8 @@ function renderModule(m: any, campaign: NewsletterCampaign): string {
                 ${row.length === 1 ? '<td width="50%" valign="top" height="100%" style="height: 100%;"></td>' : ''}
             </tr>
         </table>
-      `).join('\n');
+        `;
+      }).join('\n');
 
       return `
       <!-- PRODUKTOVÁ SEKCIA: ${escapeHtml(m.data.sectionTitle || '')} -->
@@ -634,13 +649,13 @@ function renderExactProductCard(
               </table>
           </td>
       </tr>
-      <tr height="1">
-          <td style="padding: 0 8px 15px 8px; text-align: center; height: 160px;" valign="middle">
+      <tr height="160">
+          <td height="160" style="padding: 0 8px 15px 8px; text-align: center; height: 160px;" valign="middle">
               <img src="${escapeHtml(p.imageUrl)}" width="220" alt="${escapeHtml(p.title || sectionTitle || 'Produkt')}" style="display: block; width: 100%; max-width: 220px; margin: 0 auto; border-radius: 8px;">
           </td>
       </tr>
       <tr>
-          <td style="padding: 0 8px 10px 8px; text-align: center; height: 100%; min-height: 44px;" valign="top">
+          <td height="54" style="padding: 0 8px 10px 8px; text-align: center; height: 54px; min-height: 54px;" valign="top">
               <h3 class="force-text-dark" style="margin: 0; font-size: 15px; color: #1a1a1a; font-weight: 600; line-height: 1.25;">${escapeHtml(p.title)}</h3>
           </td>
       </tr>
diff --git a/src/types/newsletter.ts b/src/types/newsletter.ts
index d8528db..79c50e1 100644
--- a/src/types/newsletter.ts
+++ b/src/types/newsletter.ts
@@ -93,6 +93,7 @@ export interface ProductsGridModuleData {
   products: ProductItem[];
   cardBgColor?: string;
   cardBorderColor?: string;
+  columns?: 1 | 2;
 }
 
 export interface LoyaltyClubModuleData {