refactor: media items grid smaller size

memori-ai · Jun 11, 2024 · d60b752 · d60b752
1 parent d89ea9a
commit d60b752
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/src/components/MediaWidget/LinkItemWidget.css b/src/components/MediaWidget/LinkItemWidget.css
@@ -3,7 +3,7 @@
     padding: 1rem;
     grid-auto-flow: dense;
     grid-gap: 1rem;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 }
 
 .memori-link-item--card {
@@ -33,4 +33,4 @@ a.memori-link-item--link {
 .memori-link-item--icon {
     width: 50%;
     height: 50%;
-}
+}
diff --git a/src/components/MediaWidget/MediaItemWidget.css b/src/components/MediaWidget/MediaItemWidget.css
@@ -3,7 +3,7 @@
     padding: 1rem;
     grid-auto-flow: dense;
     grid-gap: 1rem;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
 }
 
 .memori-media-item--card {
@@ -32,7 +32,7 @@
     display: flex;
     width: 100%;
     height: 100%;
-    max-height: 300px;
+    max-height: 150px;
     flex-direction: column;
     align-items: center;
     justify-content: center;
@@ -41,13 +41,13 @@
 .memori-media-item--figure img {
     min-width: 100%;
     min-height: 100%;
-    object-fit: contain;
+    object-fit: cover;
     object-position: center;
 }
 
 .memori-media-item--figure-caption {
-    padding: 0.5rem 1rem;
-    margin: 0.5rem 0;
+    padding: 0.25rem 1rem;
+    margin: 0.25rem 0;
     color: #666;
     font-size: 0.875rem;
     font-style: italic;
@@ -131,4 +131,4 @@ a.memori-media-item--link {
 .memori-media-item--modal .memori-modal--close button {
     border-color: #fff;
     color: #fff;
-}
+}