fix: random style fix for margin bottom in case cards title skeletons

Author: kemuru

web/src/components/DisputeView/DisputeCardView.tsx

@@ -9,7 +9,7 @@ import { Periods } from "consts/periods";
 
 import { responsiveSize } from "styles/responsiveSize";
 
-import { StyledSkeleton } from "components/StyledSkeleton";
+import { StyledCaseCardTitleSkeleton } from "components/StyledSkeleton";
 
 import DisputeInfo from "./DisputeInfo";
 import PeriodBanner from "./PeriodBanner";
@@ -54,7 +54,7 @@ const DisputeCardView: React.FC<IDisputeCardView> = ({ isLoading, ...props }) =>
     <StyledCard hover onClick={() => navigate(`/cases/${props?.disputeID?.toString()}`)}>
       <PeriodBanner id={parseInt(props?.disputeID)} period={props?.period} />
       <CardContainer>
-        {isLoading ? <StyledSkeleton /> : <TruncatedTitle text={props?.title} maxLength={100} />}
+        {isLoading ? <StyledCaseCardTitleSkeleton /> : <TruncatedTitle text={props?.title} maxLength={100} />}
         <DisputeInfo {...props} />
       </CardContainer>
     </StyledCard>

web/src/components/StyledSkeleton.tsx

@@ -9,6 +9,10 @@ export const StyledSkeleton = styled(Skeleton)`
   z-index: 0;
 `;
 
+export const StyledCaseCardTitleSkeleton = styled(StyledSkeleton)`
+  margin-bottom: 16px;
+`;
+
 const SkeletonDisputeCardContainer = styled.div`
   width: 100%;
 `;