fix: Update ActorCard and ActorSearch components for consistent styling (#505)

refactor: Update ActorCard and ActorSearch components for consistent styling

- Increased border-radius from 8 to 12 in ActorCard and ActorSearchDetail
- Adjusted spacing in ActorSearch for consistency.
- Added ActorAvatarWrapper to encapsulate the ActorAvatar componen

Author: jirispilka

src/web/src/components/actor/ActorCard.tsx

@@ -18,7 +18,7 @@ const Container = styled(Box)<{ $withBorder: boolean }>`
     display: flex;
     flex-direction: column;
     gap: ${theme.space.space8};
-    border-radius: ${theme.radius.radius8};
+    border-radius: ${theme.radius.radius12};
     border: ${props => props.$withBorder ? `1px solid ${theme.color.neutral.separatorSubtle}` : 'none'};
 
     .clampToOneLine {
@@ -73,6 +73,13 @@ const ActorTitleWrapper = styled.div`
     gap: ${theme.space.space2};
 `;
 
+const ActorAvatarWrapper = styled.div`
+    border: 1px solid ${theme.color.neutral.separatorSubtle};
+    border-radius: ${theme.radius.radius8};
+    overflow: hidden;
+    flex-shrink: 0;
+`;
+
 type StatProps = {
     icon: React.JSX.Element
     value: string
@@ -173,7 +180,9 @@ export const ActorCard: React.FC<ActorCardProps> = ({
             <BoxRow>
                 <ActorHeaderWithActionButton>
                     <ActorHeader>
-                        <ActorAvatar size={40} name={actor.title} url={actor.pictureUrl} />
+                        <ActorAvatarWrapper>
+                            <ActorAvatar size={40} name={actor.title} url={actor.pictureUrl} />
+                        </ActorAvatarWrapper>
                         <ActorTitleWrapper>
                             <Text as="h3" weight="bold" color={theme.color.neutral.text} className="clampToOneLine" >{actor.title}</Text>
                             <BoxRow>

src/web/src/pages/ActorSearch/ActorSearch.skeleton.tsx

@@ -8,7 +8,7 @@ const Container = styled(Box)`
     display: flex;
     flex-direction: column;
     gap: ${theme.space.space8};
-    border-radius: ${theme.radius.radius8};
+    border-radius: ${theme.radius.radius12};
     border: 1px solid ${theme.color.neutral.separatorSubtle};
 `;
 
@@ -81,7 +81,7 @@ const ActorListItemSkeleton: React.FC<ActorListItemSkeletonProps> = () => {
 const ResultsContainer = styled(Box)`
     display: flex;
     flex-direction: column;
-    gap: ${theme.space.space12};
+    gap: ${theme.space.space8};
     width: 100%;
 `;
 
@@ -105,7 +105,7 @@ const DetailContainer = styled(Box)`
 
 const CardWrapper = styled(Box)`
     background: ${theme.color.neutral.background};
-    border-radius: ${theme.radius.radius8};
+    border-radius: ${theme.radius.radius12};
     border: 1px solid ${theme.color.neutral.separatorSubtle};
     display: flex;
     flex-direction: column;

src/web/src/pages/ActorSearch/ActorSearch.tsx

@@ -63,7 +63,7 @@ export const ActorSearch: React.FC = () => {
                 <EmptyState title="No actors found" description="Try a different search query" />
             ) : (
                 actors.map((actor: Actor) => (
-                    <ActorContainer key={actor.id} mb="space12">
+                    <ActorContainer key={actor.id} mb="space8">
                         <ActorCard actor={actor} />
                     </ActorContainer>
                 ))

src/web/src/pages/ActorSearch/ActorSearchDetail.tsx

@@ -26,7 +26,7 @@ const Container = styled(Box)`
     height: 100%;
     overflow: auto;
     background: ${theme.color.neutral.background};
-    border-radius: ${theme.radius.radius8};
+    border-radius: ${theme.radius.radius12};
     border: 1px solid ${theme.color.neutral.separatorSubtle};
 `;