From ccb733141b09bc4d3d55500fc42c29b6ce1a7614 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Mon, 10 Feb 2025 00:33:31 +0500
Subject: [PATCH] video size fix on mobile

---
 src/static/Placeholders.js                  |  4 ++--
 src/static/tailwind.css                     | 20 +++++++++++++++++---
 src/templates/Components/PlaceHolderVid.tsx |  2 +-
 src/templates/videos.tsx                    |  2 +-
 4 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/static/Placeholders.js b/src/static/Placeholders.js
index 69323cf..fdb1f51 100644
--- a/src/static/Placeholders.js
+++ b/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");
diff --git a/src/static/tailwind.css b/src/static/tailwind.css
index 035b05c..93d86a2 100644
--- a/src/static/tailwind.css
+++ b/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;
diff --git a/src/templates/Components/PlaceHolderVid.tsx b/src/templates/Components/PlaceHolderVid.tsx
index 28bf55d..e0f7528 100644
--- a/src/templates/Components/PlaceHolderVid.tsx
+++ b/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" : ""
       }`}
     >
diff --git a/src/templates/videos.tsx b/src/templates/videos.tsx
index 5e34664..32bf240 100644
--- a/src/templates/videos.tsx
+++ b/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"/>
     </>