video size fix on mobile

src/static/Placeholders.js

@@ -37,12 +37,12 @@ function PlaceholderVid() {
   const placeholderRoot = document.createElement("div");
   placeholderRoot.dataset.type = "placeholder__video__container";
   placeholderRoot.className =
-    "relative aspect-square w-full h-full max-w-48 max-h-48 sm:max-w-none sm:max-h-none rounded-sm";
+    "relative aspect-square w-full h-full rounded-sm flex-shrink-0";
 
   const placeholderVid = document.createElement("video");
   placeholderVid.dataset.type = "placeholder__video";
   placeholderVid.className =
-    "relative aspect-square w-full h-full rounded-sm [&:not(:fullscreen)]:object-cover";
+    "w-full h-full absolute inset-0 aspect-square rounded-sm [&:not(:fullscreen)]:object-cover";
   placeholderVid.controls = true;
 
   const placeholderVidLoader = document.createElement("div");

src/static/tailwind.css

@@ -527,9 +527,6 @@
   .invisible {
     visibility: hidden;
   }
-  .visible {
-    visibility: visible;
-  }
   .absolute {
     position: absolute;
   }
@@ -692,6 +689,15 @@
   .min-w-48 {
     min-width: calc(var(--spacing) * 48);
   }
+  .flex-0 {
+    flex: 0;
+  }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
+  .flex-shrink-0 {
+    flex-shrink: 0;
+  }
   .border-collapse {
     border-collapse: collapse;
   }
@@ -707,6 +713,9 @@
   .resize {
     resize: both;
   }
+  .grid-cols-\[100\%\] {
+    grid-template-columns: 100%;
+  }
   .grid-cols-\[repeat\(auto-fill\,minmax\(250px\,1fr\)\)\] {
     grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
   }
@@ -900,6 +909,11 @@
       grid-template-columns: repeat(auto-fill,minmax(25%,1fr));
     }
   }
+  .sm\:grid-cols-\[repeat\(auto-fill\,minmax\(250px\,1fr\)\)\] {
+    @media (width >= 40rem) {
+      grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
+    }
+  }
   .sm\:items-center {
     @media (width >= 40rem) {
       align-items: center;

src/templates/Components/PlaceHolderVid.tsx

@@ -2,7 +2,7 @@ export default function PlaceholderVid(props: { isMobileHidden?: boolean }) {
   return (
     <div
       data-type="placeholder__video__container"
-      className={`relative aspect-square w-full h-full max-w-48 max-h-48 sm:max-w-none sm:max-h-none rounded-sm ${
+      className={`relative aspect-square w-full h-full max-w-48 max-h-48 sm:max-w-none sm:max-h-none rounded-sm flex-shrink-0 ${
         props.isMobileHidden ? "hidden xl:block" : ""
       }`}
     >

src/templates/videos.tsx

@@ -6,7 +6,7 @@ export default function VideosPage() {
       <PageNav path="/videos"/>
       <div
         id="videos_videos"
-        className="my-2 overflow-hidden grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
+        className="my-2 overflow-hidden grid grid-cols-[100%] sm:grid-cols-[repeat(auto-fill,minmax(250px,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
       ></div>
       <PageNav path="/videos"/>
     </>