Make the past reports grid equal height + fix navbar trap on mobile

src/components/header.astro

@@ -34,13 +34,13 @@ const currentPath = Astro.url.pathname;
       <input type="checkbox" id="navbar-open" class="hidden peer" />
       <label
         for="navbar-open"
-        class="cursor-pointer"
+        class="cursor-pointer relative z-20 group peer-checked:fixed peer-checked:right-4 peer-checked:top-4"
         aria-label="Toggle Navigation"
       >
         <span class="sr-only">Toggle Navigation</span>
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          class="h-6 w-6"
+          class="h-6 w-6 group-[.peer:checked+&]:hidden"
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
@@ -51,6 +51,19 @@ const currentPath = Astro.url.pathname;
             stroke-linejoin="round"
             d="M4 6h16M4 12h16M4 18h16"></path>
         </svg>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-6 w-6 hidden group-[.peer:checked+&]:block"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M6 18L18 6M6 6l12 12"></path>
+        </svg>
       </label>
 
       <nav

src/components/home/past-repports.tsx

@@ -74,56 +74,57 @@ export const ReportCard = ({
   takeaways,
   totalSubmissions
 }: ReportCardProps) => (
-  <a href={link} className="block group relative">
-    <div className="bg-white rounded-xl shadow-lg  transition-all duration-300 group-hover:shadow-xl group-hover:-translate-y-1">
-      <div className="absolute top-4 -left-2 bg-emerald-700 text-white py-1 px-4 rounded-r-lg shadow-md">
-        <span className="font-bold">{title}</span>
-      </div>
+  <a
+    href={link}
+    className="flex flex-col justify-between group relative bg-white rounded-xl shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
+  >
+    <div className="absolute top-4 -left-2 bg-emerald-700 text-white py-1 px-4 rounded-r-lg shadow-md">
+      <span className="font-bold">{title}</span>
+    </div>
 
-      <div className="p-6 pt-12">
-        <h3 className="text-base font-medium  py-4 text-gray-800">
-          Total Submissions: {totalSubmissions.toLocaleString()}
-        </h3>
-        <h3 className="text-base font-medium mb-2  text-gray-800">
-          Key Takeaways:
-        </h3>
-        <ul className="space-y-3 mb-6">
-          {takeaways.map((takeaway, index) => (
-            <li key={index} className="flex items-start">
-              <svg
-                className="w-5 h-5 text-gray-400 mr-2 mt-0.5 flex-shrink-0"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-              >
-                <path
-                  fillRule="evenodd"
-                  d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
-                  clipRule="evenodd"
-                />
-              </svg>
-              <span className="text-gray-600 text-sm">{takeaway}</span>
-            </li>
-          ))}
-        </ul>
-      </div>
-      <div className="bg-gray-50 px-6 py-4 flex justify-between items-center rounded-b-md">
-        <span className="text-emerald-700 font-medium group-hover:underline inline-flex items-center">
-          Read full report
-          <svg
-            className="w-4 h-4 ml-1 transition-transform duration-300 group-hover:translate-x-1"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M9 5l7 7-7 7"
-            />
-          </svg>
-        </span>
-      </div>
+    <div className="p-6 pt-12">
+      <h3 className="text-base font-medium  py-4 text-gray-800">
+        Total Submissions: {totalSubmissions.toLocaleString()}
+      </h3>
+      <h3 className="text-base font-medium mb-2  text-gray-800">
+        Key Takeaways:
+      </h3>
+      <ul className="space-y-3 mb-6">
+        {takeaways.map((takeaway, index) => (
+          <li key={index} className="flex items-start">
+            <svg
+              className="w-5 h-5 text-gray-400 mr-2 mt-0.5 flex-shrink-0"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+            >
+              <path
+                fillRule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                clipRule="evenodd"
+              />
+            </svg>
+            <span className="text-gray-600 text-sm">{takeaway}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+    <div className="bg-gray-50 px-6 py-4 flex justify-between items-center rounded-b-md">
+      <span className="text-emerald-700 font-medium group-hover:underline inline-flex items-center">
+        Read full report
+        <svg
+          className="w-4 h-4 ml-1 transition-transform duration-300 group-hover:translate-x-1"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M9 5l7 7-7 7"
+          />
+        </svg>
+      </span>
     </div>
   </a>
 );

survey/2-learning-and-education.yml

@@ -29,7 +29,7 @@ questions:
       - English
       - Others
 
-  - label: Is English an obstacle to learning new technologies?
+  - label: Do you find English to be an obstacle to learning new technologies for you?
     required: true
     choices:
       - Yes