overflowing menu pills now wrap to new row

Author: joshwallerr

popup.html

@@ -68,8 +68,8 @@ <h4 class="text-lg font-semibold mb-0">Generate a summary</h4>
 
       <div id="summary-section-main" class="flex flex-col w-full bg-white rounded-r-lg shadow md:mt-0 sm:max-w-md xl:p-0 px-6 py-4 mb-2.5 rounded-l-none" style="border-left: 3px solid rgb(239 68 68);">
         <div id="preloader-icon" class="preloader" style="display: none;"></div>
-        <div id="preloader-container" class="text-[0.825rem]">Generating summary for Terms & Conditions. This could take around. Feel free to close the extension whilst you wait.</div>
-        <div id="summary-menu" class="flex mb-2" style="display: none;"></div>
+        <div id="preloader-container" class="text-[0.825rem]"></div>
+        <div id="summary-menu" class="flex mb-2 flex-wrap" style="display: none;"></div>
         <hr id="menu-sep" class="my-[0.625rem]" style="display: none;">
         <div id="summaries-container" class="-mt-4">
           <h4 id="summaries-container-placeholder" class="text-base font-mono font-semibold mb-0 mt-4">Summaries will be displayed here.</h4>

popup.js

@@ -758,7 +758,7 @@ function updatePreloadersDisplay() {
         relevantSummaries.forEach(summary => {
           let summaryElement = document.createElement('div');
           summaryElement.className = 'mt-2';
-          summaryElement.textContent = `Generating summary for ${summary.title}. This could take up to 30 seconds. Feel free to close the extension whilst you wait.`;
+          summaryElement.textContent = `Generating summary for ${summary.title}. This could take up to a minute for longer policies. Feel free to close the extension whilst you wait.`;
           preloaderContainer.appendChild(summaryElement);
         });
 
@@ -905,7 +905,7 @@ function initPopup() {
           let pillButton = document.createElement('div');
           pillButton.textContent = termType;
           pillButton.id = termType.toLowerCase().replace(/[^a-z0-9]/g, '-') + '-menu';
-          pillButton.className = "rounded-full px-3 py-1 text-xs font-semibold text-gray-300 mr-2 mb-1 mt-1 bg-slate-50 cursor-pointer border-solid border";
+          pillButton.className = "rounded-full px-3 py-1 text-xs font-semibold text-gray-300 mr-2 mb-1 mt-1 bg-slate-50 cursor-pointer border-solid border max-w-fit";
           pillButton.style.borderColor = "lightgray";
           pillButton.title = "Show only " + termType;
           document.getElementById('summary-menu').style.display = "flex";

production.css

@@ -927,6 +927,10 @@ video {
 .max-w-2xl {
   max-width: 42rem;
 }
+.max-w-fit {
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+}
 .max-w-lg {
   max-width: 32rem;
 }