Update frontend/script.js

frontend/script.js

@@ -203,11 +203,12 @@ function renderResults(audienceResults, method) {
       <h2 class="results-title">Results</h2>
       ${badge}
     </div>
+    <div class="audience-grid">
   `;
 
   audienceResults.forEach((group) => {
     html += `
-      <div class="audience-group">
+      <div class="audience-column">
         <div class="audience-header">
           <span class="audience-icon">👥</span>
           <h3 class="audience-name">${escapeHtml(group.target_audience)}</h3>
@@ -240,8 +241,12 @@ function renderResults(audienceResults, method) {
     html += `</div>`;
   });
 
+  html += `</div>`; // close .audience-grid
+
   resultsDiv.innerHTML = html;
   resultsDiv.classList.remove("hidden");
+  // Expand container to fit horizontal columns
+  document.querySelector(".container").classList.add("expanded");
   resultsDiv.scrollIntoView({ behavior: "smooth", block: "start" });
 }
 
@@ -263,6 +268,7 @@ function hideError() {
 
 function hideResults() {
   resultsDiv.classList.add("hidden");
+  document.querySelector(".container").classList.remove("expanded");
 }
 
 function escapeHtml(str) {