Fix on mb view Post e Webinar

Author: miris-mp

src/components/DynamicSpreadsheet.tsx

@@ -58,6 +58,11 @@ export default function DynamicSpreadsheet() {
     { name: 'webinar', selected: false, color: '#d6f259' },
   ]);
 
+  const [filterSelectDialog, setFilterSelectDialog] = useState([
+    {name: 'metodoSelect', isOpen: false},
+    {name: 'targetSelect', isOpen: false},
+    {name: 'formatoSelect', isOpen: false},
+  ])
   const handleFilterSelection = ({ filter, value }) => {
     setFilters((prevFilters) => {
       const updatedFilterValues = prevFilters[filter]?.includes(value)
@@ -147,32 +152,46 @@ export default function DynamicSpreadsheet() {
     return item ? item.color : 'black';
   };
 
+const filterSelectOpened = (name) => {
 
+    setFilterSelectDialog((prev) => {
+      
+      return prev.map((item) => 
+        item.name === `${name}Select` ? { ...item, isOpen: !item.isOpen } : { ...item, isOpen: false }
+      );
+    });
+}
+  
   return (
     <div className="">
       <div className='prose-page'>
-        <div className="flex justify-start items-center gap-4">
+        <div className="flex flex-col md:flex-row justify-start gap-4 md:items-center">
           <p className="font-semibold">Filtri:</p>
+          <div className='flex flex-wrap md:flex-row gap-4'>
           <IconSelect
             options={metodi}
             icon="codicon:symbol-method"
             filter="metodo"
             onFilterSelection={handleFilterSelection}
+            onSelectOpen={filterSelectOpened}
           />
           <IconSelect
             options={target}
             icon="pepicons-pop:label"
             filter="target"
             onFilterSelection={handleFilterSelection}
+            onSelectOpen={filterSelectOpened}
           />
           <IconSelect
             options={formati}
             icon="mdi:format-list-bulleted"
             filter="formato"
             onFilterSelection={handleFilterSelection}
+            onSelectOpen={filterSelectOpened}
           />
+          </div>
         </div>
-        <div className="flex gap-4 not-prose">
+        <div className="flex gap-4 not-prose mt-4">
           {metodi.map(
             (m) =>
               m.selected && (

src/components/ui/IconSelect.tsx

@@ -1,11 +1,21 @@
 import React, { useState } from 'react';
 import { Icon } from '@iconify/react';
 
-export default function IconSelect({ options, icon, filter, onFilterSelection }) {
+export default function IconSelect({ options, icon, filter, onFilterSelection, onSelectOpen }) {
   const [selected, setSelected] = useState('');
   const [isOpen, setIsOpen] = useState(false);
 
-  const toggleDropdown = () => setIsOpen((prev) => !prev);
+const toggleDropdown = () => {
+  onSelectOpen(filter);
+  setIsOpen((prev) => !prev)
+};
+
+// console.log('options ', options);
+// console.log('icon ', icon);
+// console.log('filter ', filter);
+// console.log('onFilterSelection ', onFilterSelection);
+// console.log('onSelectOpen ', onSelectOpen);
+// console.log('selected ', selected);
 
   const handleSelect = (selection) => {
     setSelected(selection);
@@ -14,7 +24,7 @@ export default function IconSelect({ options, icon, filter, onFilterSelection })
   };
 
   const isAnyOptionSelected = options.some((option) => option.selected);
-
+  
   return (
     <div className="relative not-prose">
       <button
@@ -29,7 +39,7 @@ export default function IconSelect({ options, icon, filter, onFilterSelection })
       </button>
 
       {isOpen && (
-        <ul className="absolute bg-white border rounded mt-2 shadow w-full max-w-[200px]">
+        <ul className="absolute bg-white border rounded mt-2 shadow w-full max-w-[200px] z-30">
           {options.map((option) =>
             option.selected ? (
               <li

src/components/widgets/Hero.astro

@@ -26,7 +26,7 @@ const {
   <div class="relative max-w-7xl mx-auto px-4 sm:px-6">
     <div class="pt-0 md:pt-[76px] pointer-events-none"></div>
     <div class="pt-12">
-      <div class="text-center pb-6 md:pb-4 max-w-5xl mx-auto">
+      <div class="text-center md:pb-4 max-w-5xl mx-auto">
         {
           tagline &&
             (taglineLink ? (
@@ -47,7 +47,7 @@ const {
         {
           title && (
             <h1
-              class="text-5xl md:text-6xl font-bold leading-tighter tracking-tighter mb-4 font-heading dark:text-gray-200 intersect-once intersect-quarter motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"
+              class="text-5xl md:text-6xl font-bold leading-tighter tracking-tighter font-heading dark:text-gray-200 intersect-once intersect-quarter motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade"
               set:html={title}
             />
           )