Collapse table of releases on small screens on releases page (ocaml#1716

)

src/ocamlorg_frontend/pages/releases.eml

@@ -13,7 +13,7 @@ Layout.render
 </div>
 <div class="bg-default dark:bg-dark-default">
     <div class="py-10 lg:py-28">
-        <div class="container-fluid">
+        <div class="container mx-auto">
             <div class="flex justify-between items-center flex-col md:flex-row">
                 <% let release_num = match List.length releases with 0 -> "No Release" | 1 -> "1 Release" | l -> Printf.sprintf "%i Releases" l in %>
                 <h5 class="font-bold mb-5 md:mb-0"><%s release_num %></h5>
@@ -33,32 +33,35 @@ Layout.render
                     <div>
                         <%s! Icons.magnifying_glass "h-10 w-10" %>
                     </div>
-                    <div class="text-xl">No Releases found matching "<%s search %>"</div>
+                    <div class="text-xl">No Releases found matching "
+                        <%s search %>"</div>
                 </div>
                 <% | _ -> %>
-                <table class="max-w-5xl lg:max-w-full align-top">
-                    <thead class="bg-body-700 text-white text-left rounded-xl">
-                        <tr>
-                            <th class="py-4 px-6 rounded-l-lg text-x w-3/5">Version</th>
-                            <th class="py-4 px-6">Date</th>
-                            <th class="py-4 px-6 rounded-r-lg">Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <% releases |> List.iter (fun (release : Data.Release.t) -> %>
-                        <tr>
-                            <td class="py-4 px-6 font-semibold">
-                                <div class="font-semibold">
-                                    <%s release.version %>
-                                </div>
-                                <div class="prose prose-orange font-normal">
-                                    <%s! release.highlights_html %>
-                                </div>
-                            </td>
-                            <td class="py-4 px-6 font-medium align-top">
+                <div class="max-w-5xl lg:max-w-full align-top">
+                    <div class="bg-body-700 text-white text-left rounded-xl hidden lg:flex">
+                        <div class="w-2/3">
+                            <h2 class="py-4 px-6 rounded-l-lg text-x">Version</h2>
+                        </div>
+                        <div class="lg:w-1/3 flex">
+                            <h2 class="py-4 px-6 w-1/2">Date</h2>
+                            <h2 class="py-4 px-6 rounded-r-lg w-1/2">Actions</h2>
+                        </div>
+                    </div>
+                    <% releases |> List.iter (fun (release : Data.Release.t) -> %>
+                    <div class="flex flex-col lg:flex-row">
+                        <div class="py-4 px-6 font-semibold lg:w-2/3 w-full">
+                            <div class="font-semibold">
+                                <%s release.version %>
+                            </div>
+                            <div class="prose prose-orange font-normal">
+                                <%s! release.highlights_html %>
+                            </div>
+                        </div>
+                        <div class="lg:w-1/3 flex w-full lg:flex-row lg:justify-between flex-col">
+                            <div class="py-4 px-6 font-medium align-top lg:w-1/2 w-full">
                                 <%s release.date %>
-                            </td>
-                            <td class="py-4 px-6 align-top">
+                            </div>
+                            <div class="py-4 px-6 align-top lg:w-1/2 w-full">
                                 <a href="<%s Url.release release.version %>" class="text-primary-600 font-medium block">
                                     Release Notes
                                 </a>
@@ -71,13 +74,13 @@ Layout.render
                                 <a href="<%s Url.api_with_version release.version %>" class="text-primary-600 font-medium block">
                                     Standard Library API
                                 </a>
-                            </td>
-                        </tr>
-                        <% ); %>
-                    </tbody>
-                </table>
+                            </div>
+                        </div>
+                    </div>
+                    <% ); %>
+                </div>
                 <% ); %>
             </div>
         </div>
     </div>
-</div>
+</div>