diff --git a/src/components/Common/StatusBadgeMini/index.tsx b/src/components/Common/StatusBadgeMini/index.tsx
index 0071126c..a7e24a37 100644
--- a/src/components/Common/StatusBadgeMini/index.tsx
+++ b/src/components/Common/StatusBadgeMini/index.tsx
@@ -7,31 +7,47 @@ interface StatusBadgeMiniProps {
status: MediaStatus;
is4k?: boolean;
inProgress?: boolean;
+ // Should the badge shrink on mobile to a smaller size? (TitleCard)
+ shrink?: boolean;
}
const StatusBadgeMini = ({
status,
is4k = false,
inProgress = false,
+ shrink = false,
}: StatusBadgeMiniProps) => {
- const badgeStyle = ['w-5 rounded-full p-0.5 ring-1 bg-opacity-80'];
+ const badgeStyle = [
+ `rounded-full bg-opacity-80 shadow-md ${
+ shrink ? 'w-4 sm:w-5 border p-0' : 'w-5 ring-1 p-0.5'
+ }`,
+ ];
+
let indicatorIcon: React.ReactNode;
switch (status) {
case MediaStatus.PROCESSING:
- badgeStyle.push('bg-indigo-500 ring-indigo-400 text-indigo-100');
+ badgeStyle.push(
+ 'bg-indigo-500 border-indigo-400 ring-indigo-400 text-indigo-100'
+ );
indicatorIcon =