Album list updates

src/renderer/components/virtual-grid/grid-card/poster-card.tsx

@@ -21,7 +21,7 @@ const CardWrapper = styled.div<{
 }>`
   flex: ${({ itemWidth }) => `0 0 ${itemWidth}px`};
   width: ${({ itemWidth }) => `${itemWidth}px`};
-  height: ${({ itemHeight }) => `${itemHeight}px`};
+  height: ${({ itemHeight, itemGap }) => `${itemHeight - itemGap}px`};
   margin: ${({ itemGap }) => `0 ${itemGap / 2}px`};
   transition: border 0.2s ease-in-out;
   user-select: none;
@@ -49,13 +49,13 @@ const StyledCard = styled.div`
   width: 100%;
   height: 100%;
   padding: 0;
-  border-radius: 5px;
+  border-radius: var(--card-poster-radius);
 `;
 
 const ImageSection = styled.div`
   position: relative;
   width: 100%;
-  border-radius: 5px;
+  border-radius: var(--card-poster-radius);
 
   &::before {
     position: absolute;
@@ -86,7 +86,7 @@ const Image = styled.img<ImageProps>`
   height: ${({ height }) => `${height}px`};
   object-fit: cover;
   border: 0;
-  border-radius: 2px;
+  border-radius: var(--card-poster-radius);
 
   ${fadeIn}
   animation: fadein 0.3s ease-in-out;
@@ -177,7 +177,7 @@ export const PosterCard = ({
                   <Center
                     sx={{
                       background: 'var(--placeholder-bg)',
-                      borderRadius: '5px',
+                      borderRadius: 'var(--card-poster-radius)',
                       height: '100%',
                     }}
                   >
@@ -204,7 +204,7 @@ export const PosterCard = ({
                 <Center
                   sx={{
                     background: 'var(--placeholder-bg)',
-                    borderRadius: '5px',
+                    borderRadius: 'var(--card-poster-radius)',
                     height: '100%',
                   }}
                 >