Layout fix for small viewports

Author: zachleat

src/css/tailwind.css

@@ -372,8 +372,17 @@ details[open] .summary-swap-open {
     box-shadow: 0 0 1px 4px #E7017A;
   }
 }
-.aspect-ratio-youtube {
-  padding-top: 74.9295775%;
+
+.jamstacktv-link {
+  display: flex;
+  flex-wrap: wrap;
+}
+.jamstacktv-card {
+  flex-basis: 18.75em; /* 300px /16 */
+}
+.jamstacktv-item {
+  flex-basis: 18.75em; /* 300px /16 */
+  flex-grow: 3;
 }
 .jamstacktv-card,
 .jamstacktv-img {
@@ -390,7 +399,7 @@ details[open] .summary-swap-open {
   @apply font-bold;
   position: absolute;
   right: .4em;
-  bottom: .4em;
+  top: .4em;
 }
 .jamstacktv-time {
   display: inline-block;
@@ -408,6 +417,7 @@ details[open] .summary-swap-open {
   margin-right: 3px;
 }
 .jamstacktv-item {
+  @apply p-4;
   display: flex;
   flex-direction: column;
   justify-content: center;

src/site/_includes/search-js.njk

@@ -78,13 +78,13 @@ search.addWidgets([
     },
     templates: {
       item: `
-        <a href="{{ url }}" class="grid grid-cols-3 gap-4 mb-4 group">
-          <div class="aspect-ratio-youtube relative jamstacktv-card">
-            <img src="{{ video.thumbnails.medium }}" alt="{{ video.title }}" class="jamstacktv-img absolute top-0 card-shadow bg-gradient-card-sunrise group-hover:card-shadow-sunrise">
+        <a href="{{ url }}" class="mb-4 group jamstacktv-link">
+          <div class="relative jamstacktv-card">
+            <img src="{{ video.thumbnails.medium }}" alt="{{ video.title }}" class="jamstacktv-img card-shadow bg-gradient-card-sunrise group-hover:card-shadow-sunrise" width="480" height="360">
             <span class="jamstacktv-duration">{{{ displayStartInline }}}{{ displayDuration }}</span>
             {{{ scrubberHtml }}}
           </div>
-          <div class="col-span-2 jamstacktv-item {{ wrapperClass }}">
+          <div class="jamstacktv-item {{ wrapperClass }}">
             <div class="jamstacktv-meta mb-1">
               <span class="jamstacktv-category">{{#helpers.highlight}}{ "attribute": "playlist.title" }{{/helpers.highlight}}</span>
               <span class="jamstacktv-title">{{#helpers.highlight}}{ "attribute": "video.title" }{{/helpers.highlight}}</span>

src/site/tv.njk

@@ -9,7 +9,6 @@ javascriptIncludes:
 ---
 {# This search index data is populated by the code at https://github.com/netlify/jamstack-tv-search-data #}
 
-
 <section class="md:mt-20">
   <h1 class="text-center">{{ title }}</h1>
   <p class="text-center">{{ subtitle }}</p>