Fix styles Post e Webinar

Author: Miriam Petrocchi

.astro/settings.json

@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1733466292132
+		"lastUpdateCheck": 1734518853551
 	}
 }

src/components/DynamicSpreadsheet.tsx

@@ -122,65 +122,67 @@ export default function DynamicSpreadsheet() {
   };
 
   return (
-    <div className="prose-page">
-      <div className="flex justify-start items-center gap-4">
-        <p className="font-semibold">Filtri:</p>
-
-        <IconSelect
-          options={metodi}
-          icon="codicon:symbol-method"
-          filter="metodo"
-          onFilterSelection={handleFilterSelection}
-        />
-        <IconSelect
-          options={target}
-          icon="pepicons-pop:label"
-          filter="target"
-          onFilterSelection={handleFilterSelection}
-        />
-      </div>
-      <div className="flex gap-4 not-prose">
-        {metodi.map(
-          (m) =>
-            m.selected && (
-              <button
-                key={m.name}
-                onClick={() => handleFilterSelection({ filter: 'metodo', value: m.name })}
-                className="flex items-center border rounded-full border-black px-2 ease-in-out duration-300 hover:bg-red-100"
-              >
-                <Icon
-                  icon="material-symbols:close"
-                  className="text-red-500 hover:text-red-600 duration-300 transition-colors"
-                />
-
-                {m.name}
-              </button>
-            )
-        )}
-        {target.map(
-          (t) =>
-            t.selected && (
-              <button
-                key={t.name}
-                onClick={() => handleFilterSelection({ filter: 'target', value: t.name })}
-                className="flex items-center border rounded-full border-black px-2 ease-in-out duration-300 hover:bg-red-100"
-              >
-                <Icon
-                  icon="material-symbols:close"
-                  className="text-red-500 hover:text-red-600 duration-300 transition-colors"
-                />
-
-                {t.name}
-              </button>
-            )
-        )}
+    <div className="">
+      <div className='prose-page'>
+        <div className="flex justify-start items-center gap-4">
+          <p className="font-semibold">Filtri:</p>
+
+          <IconSelect
+            options={metodi}
+            icon="codicon:symbol-method"
+            filter="metodo"
+            onFilterSelection={handleFilterSelection}
+          />
+          <IconSelect
+            options={target}
+            icon="pepicons-pop:label"
+            filter="target"
+            onFilterSelection={handleFilterSelection}
+          />
+        </div>
+        <div className="flex gap-4 not-prose">
+          {metodi.map(
+            (m) =>
+              m.selected && (
+                <button
+                  key={m.name}
+                  onClick={() => handleFilterSelection({ filter: 'metodo', value: m.name })}
+                  className="flex items-center border rounded-full border-black px-2 ease-in-out duration-300 hover:bg-red-100"
+                >
+                  <Icon
+                    icon="material-symbols:close"
+                    className="text-red-500 hover:text-red-600 duration-300 transition-colors"
+                  />
+
+                  {m.name}
+                </button>
+              )
+          )}
+          {target.map(
+            (t) =>
+              t.selected && (
+                <button
+                  key={t.name}
+                  onClick={() => handleFilterSelection({ filter: 'target', value: t.name })}
+                  className="flex items-center border rounded-full border-black px-2 ease-in-out duration-300 hover:bg-red-100"
+                >
+                  <Icon
+                    icon="material-symbols:close"
+                    className="text-red-500 hover:text-red-600 duration-300 transition-colors"
+                  />
+
+                  {t.name}
+                </button>
+              )
+          )}
+        </div>
       </div>
       <hr className="my-6 " />
       {rows.length > 0 ? (
-        <div className="flex flex-col md:flex-row justify-center  gap-4">
+        <div className="flex flex-col md:flex-row flex-wrap justify-center  gap-4">
           {filteredRows.map((row, index) => (
             <a
-              className="flex flex-col items-center border px-6 py-4 rounded-xl hover:bg-[#f3f0f0c2]"
+              className="flex flex-col items-center border px-6 py-4 rounded-xl hover:bg-[#f3f0f0c2] max-w-[300px]"
               href={row.url_video}
               key={index}
               target="_blank"
@@ -190,7 +192,7 @@ export default function DynamicSpreadsheet() {
               <div className="not-prose">
                 <h3 className="text-2xl">{row.nome}</h3>
                 {row.descrizione && <p className="text-base text-slate-700 mt-2">{row.descrizione}</p>}
-                <div className="flex gap-2 mt-2">
+                <div className="flex flex-wrap gap-2 mt-2">
                   {row.metodi &&
                     row.metodi.length > 0 &&
                     row.metodi.map((metodo) => (