Merge pull request #28 from code4rena-dev/develop

Fix - Container Query Support

Author: leo95oliveira

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code4rena/components-library",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Code4rena's official components library ",
   "types": "./dist/lib.d.ts",
   "exports": {

src/lib/ContestTile/ContestTile.tsx

@@ -10,7 +10,6 @@ import { Status } from "../ContestStatus/ContestStatus.types";
 import {
   formatDistanceToNow,
   formatDistanceToNowStrict,
-  isBefore,
 } from "date-fns";
 import "./ContestTile.scss";
 import CompactTemplate from "./CompactTemplate";
@@ -159,6 +158,19 @@ export const ContestTile: React.FC<ContestTileProps> = ({
 }) => {
   const isDefault = variant === ContestTileVariant.DARK || variant === ContestTileVariant.LIGHT;
 
+  useEffect(() => {
+    // Loads polyfill to support container queries in older browsers.
+    const loadContainerQueryPolyfill = () => {
+      const supportsContainerQueries = "container" in document.documentElement.style;
+      if (!supportsContainerQueries) {
+        // @ts-ignore
+        import("container-query-polyfill");
+      }
+    }
+
+    loadContainerQueryPolyfill();
+  }, []);
+
   return (isDefault 
     ? <DefaultTemplate
         variant={variant}