Add CoverArtWrapper to all images

src/components/layout/styled.tsx

@@ -205,12 +205,17 @@ export const CoverArtWrapper = styled.div<{ $link?: boolean; size: number }>`
   height: ${(props) => props.size}px;
   width: ${(props) => props.size}px;
   overflow: hidden;
-
+  border-radius: ${(props) => props.theme.other.coverArtBorderRadius};
   background: ${(props) => props.theme.colors.layout.page.background};
+  vertical-align: middle;
 
   &:focus-visible {
     outline: 2px ${(props) => props.theme.colors.primary} solid;
   }
+
+  img {
+    vertical-align: unset !important;
+  }
 `;
 
 export const PageHeaderTitle = styled.h1`

src/components/player/PlayerBar.tsx

@@ -344,6 +344,7 @@ const PlayerBar = () => {
                         </StyledPopover>
                       }
                     >
+                      <CoverArtWrapper size={65}>
                         <LazyLoadImage
                           src={
                             isCached(
@@ -370,6 +371,7 @@ const PlayerBar = () => {
                           height="65"
                           style={{ cursor: 'pointer' }}
                         />
+                      </CoverArtWrapper>
                     </Whisper>
                   </Col>
                   <Col xs={2} style={{ minWidth: '140px', width: '40%' }}>

src/components/shared/setDefaultSettings.ts

@@ -595,7 +595,8 @@ const setDefaultSettings = (force: boolean) => {
         button: {
           borderRadius: '0px',
         },
-        coverArtFilter: 'drop-shadow(0px 3px 5px #000000)',
+        coverArtBorderRadius: '5px',
+        coverArtFilter: 'none',
         card: {
           border: '1px #3c3f43 solid',
           hover: {
@@ -760,7 +761,8 @@ const setDefaultSettings = (force: boolean) => {
         button: {
           borderRadius: '0px',
         },
-        coverArtFilter: 'drop-shadow(0px 3px 5px #000000)',
+        coverArtBorderRadius: '5px',
+        coverArtFilter: 'none',
         card: {
           border: '1px #3c3f43 solid',
           hover: {

src/components/viewtypes/ListViewTable.tsx

@@ -60,6 +60,7 @@ import {
 import { setActive } from '../../redux/albumSlice';
 import { resetPlayer, setStatus } from '../../redux/playerSlice';
 import { GenericItem } from '../../types';
+import { CoverArtWrapper } from '../layout/styled';
 
 const StyledTable = styled(Table)<{ rowHeight: number; $isDragging: boolean }>`
   .rs-table-row.selected {
@@ -647,6 +648,7 @@ const ListViewTable = ({
                               width: `${rowHeight}px`,
                             }}
                           >
+                            <CoverArtWrapper size={rowHeight - 10}>
                               <LazyLoadImage
                                 src={
                                   isCached(
@@ -675,6 +677,7 @@ const ListViewTable = ({
                                   }
                                 }}
                               />
+                            </CoverArtWrapper>
                           </Col>
                           <Col
                             style={{
@@ -826,6 +829,7 @@ const ListViewTable = ({
                           : 'false'
                       }
                     >
+                      <CoverArtWrapper size={rowHeight - 10}>
                         <LazyLoadImage
                           src={
                             isCached(
@@ -854,6 +858,7 @@ const ListViewTable = ({
                             }
                           }}
                         />
+                      </CoverArtWrapper>
                     </TableCellWrapper>
                   );
                 }}