Fixed bug with library card aspect ratio

TODO.md

@@ -8,7 +8,7 @@
 
 ## Short term
 
-- [Bugs] [Safari] Aspect ratio broken for home IPs card
+- [Feat] 404, 500 pages
 - [Bugs] [iOS] Notch area is light mode color
 - [Bugs] [iOS] Multi-parent page button is blue
 - [Bugs] [iOS] Video doesn't seem to start
@@ -27,6 +27,7 @@
 
 ## Mid term
 
+- [Feat] [Payload] Home as parent folders for home folders
 - [Feat] Change icons to filled one
 - [Bugs] [Timeline] Error if collectible not published?
 - [Feat] [Timeline] display source language
@@ -61,6 +62,9 @@
 - [Feat] [Images] add images group (which could be named or not)
 - [Feat] [Recorders] add list of contributions on recorders' pages
 - [Feat] Detect unused wording keys
+- [Feat] Replace tippy with native tooltip
+  - https://caniuse.com/css-anchor-positioning
+  - https://caniuse.com/mdn-api_htmlelement_popover
 
 ## Bonus
 

src/pages/[locale]/_components/LibraryCard.astro

@@ -41,9 +41,7 @@ const { img, name, href } = Astro.props;
         />
       </>
     ) : (
-      <div>
-        <p>{name}</p>
-      </div>
+      <p class="font-l">{name}</p>
     )
   }
 </a>
@@ -54,19 +52,8 @@ const { img, name, href } = Astro.props;
   a {
     display: grid;
     place-items: center;
-
     border-radius: 12px;
 
-    padding: 10%;
-
-    @media (max-width: 40rem) {
-      padding: 5%;
-    }
-
-    @media (max-width: 22rem) {
-      padding: 10%;
-    }
-
     user-select: none;
     aspect-ratio: 16/9;
     width: 100%;
@@ -74,15 +61,18 @@ const { img, name, href } = Astro.props;
 
     & > img {
       object-fit: contain;
-      height: 100%;
-      width: 100%;
+
+      height: 70%;
+      width: 80%;
+
+      @media (min-width: 22rem) and (max-width: 40rem) {
+        height: 80%;
+        width: 90%;
+      }
     }
 
-    & > div {
-      display: grid;
-      place-content: center;
-      height: 100%;
-      width: 100%;
+    & > p {
+      overflow-wrap: normal;
     }
   }
 </style>

src/pages/[locale]/folders/_components/FolderCard.astro

@@ -6,7 +6,7 @@ interface Props {
   href: string;
 }
 
-const { icon = "material-symbols:folder-outline", title, href } = Astro.props;
+const { icon = "material-symbols:folder", title, href } = Astro.props;
 ---
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}