Improve responsive mode

src/components/Modal.astro

@@ -10,7 +10,7 @@ const { id, title } = Astro.props;
 >
   <div class="relative p-4 w-full max-w-xl max-h-full">
     <div class="relative bg-white rounded-lg shadow">
-      <div class="p-4 pt-0 md:p-5 space-y-4">
+      <div class="p-4 pt-5 md:p-5 space-y-4">
         <h3 class="text-xl font-semibold text-gray-900">{title}</h3>
         <button
           type="button"

src/components/blog/SinglePost.astro

@@ -77,7 +77,7 @@ const { post } = Astro.props;
     <div
       class="mx-auto px-6 sm:px-6 max-w-4xl prose prose-lg dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8 prose-headings:scroll-mt-[80px]"
     >
-      <Fragment set:html={marked.parse(post['pair:description'])} />
+      <Fragment set:html={marked.parse(post['pair:description'] || '')} />
     </div>
     <div class="mx-auto px-6 sm:px-6 max-w-4xl mt-8 flex justify-between flex-col sm:flex-row">
       <!-- <Author personUri={post['dc:creator']} /> -->

src/components/common/Actors.astro

@@ -13,12 +13,12 @@ const { data: actors } = await dataProvider.getMany('Person', {
 });
 ---
 
-<div class="grid gap-4 grid-cols-6">
+<div class="grid gap-4 grid-cols-2 sm:grid-cols-4 md:grid-cols-6">
   {
     actors?.map((actor) => (
       <div>
         <a data-modal-target={actor.id} data-modal-toggle={actor.id} class="cursor-pointer">
-          <img class="w-full h-[160px] object-cover rounded-full" src={actor.image} alt={actor['pair:label']} />
+          <img class="w-full aspect-square object-cover rounded-full" src={actor.image} alt={actor['pair:label']} />
           <div class="text-center truncate font-bold">{actor['pair:label']}</div>
         </a>
         <ActorModal actor={actor}>

src/components/common/Document.astro

@@ -20,7 +20,7 @@ const { post } = Astro.props;
     <div
       class="mx-auto px-6 sm:px-6 max-w-4xl prose prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary prose-img:rounded-md prose-img:shadow-lg mt-8 prose-headings:scroll-mt-[80px]"
     >
-      <Fragment set:html={marked.parse(post['pair:description'])} />
+      <Fragment set:html={marked.parse(post['pair:description'] || '')} />
     </div>
   </article>
 </section>

src/components/common/Members.astro

@@ -1,6 +1,5 @@
 ---
 import dataProvider from '~/config/dataProvider';
-import Modal from '../Modal.astro';
 import ActorModal from './ActorModal.astro';
 
 export interface Props {
@@ -25,14 +24,18 @@ const { data: roles } = await dataProvider.getMany('Person', {
 {
   (
     <div>
-      <div class="grid gap-4 grid-cols-6">
+      <div class="grid gap-4 grid-cols-2 sm:grid-cols-4 md:grid-cols-6">
         {associations?.map((association) => {
           const member = members.find((m) => m.id === association['pair:membershipActor']);
           const role = roles.find((r) => r.id === association['pair:membershipRole']);
           return (
             <div>
               <a data-modal-target={member.id} data-modal-toggle={member.id} class="cursor-pointer">
-                <img class="w-36 h-[170px] rounded-full" src={member.image} alt={member['pair:label']} />
+                <img
+                  class="w-36 aspect-square object-cover rounded-full"
+                  src={member.image}
+                  alt={member['pair:label']}
+                />
                 <div class="text-center truncate font-bold">{member['pair:label']}</div>
                 <div class="text-center truncate">{role['pair:label']}</div>
               </a>

src/components/common/Projects.astro

@@ -22,7 +22,7 @@ projects = projects.filter((project) => project?.type === 'pair:Project');
 
 {
   (
-    <div class="grid gap-8 grid-cols-3 -mb-6">
+    <div class="grid gap-8 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 -mb-6">
       {projects.map((project) => (
         <div class="">
           <article class="mb-6 transition">

src/components/common/Roles.astro

@@ -20,7 +20,7 @@ const { data: roles } = await dataProvider.getMany('Person', {
 });
 ---
 
-<div class="grid gap-4 grid-cols-4">
+<div class="grid gap-4 grid-cols-2 md:grid-cols-4">
   {
     associations?.map((association) => {
       const organization = organizations.find((m) => m.id === association['pair:membershipOrganization']);

src/pages/organisations/[...slug].astro

@@ -27,7 +27,7 @@ const metadata = {
 ---
 
 <Layout metadata={metadata}>
-  <section class="py-8 sm:py-16 mx-auto max-w-4xl">
+  <section class="px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-4xl">
     <article>
       <header class="flex mb-4">
         <div class="flex-none w-36">

src/pages/organisations/index.astro

@@ -13,7 +13,7 @@ const metadata = {
 ---
 
 <Layout metadata={metadata}>
-  <section class="px-6 sm:px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-4xl">
+  <section class="px-6 py-12 sm:py-16 lg:py-20 mx-auto max-w-4xl">
     <Headline subtitle="Les dernières actualités de l'Assemblée Virtuelle et des projets qu'elle porte">
       Les organisation membres de l'AV
     </Headline>

src/pages/projets/[type]/[...slug].astro

@@ -67,7 +67,7 @@ const metadata = {
       <div
         class="mx-auto px-6 sm:px-6 max-w-4xl prose prose-lg dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8 prose-headings:scroll-mt-[80px]"
       >
-        <Fragment set:html={marked.parse(project['pair:description'])} />
+        <Fragment set:html={marked.parse(project['pair:description'] || '')} />
       </div>
       <div class="mx-auto px-6 sm:px-6 max-w-4xl mt-8">
         <h3 class="text-2xl font-bold leading-tighter tracking-tighter font-heading mt-3 mb-1">Implique</h3>