Fixed skeleton loader size mismatch on Admin > Manage Kudos

Author: thelenw

web-ui/src/components/kudos/PublicKudos.css

@@ -1,6 +1,16 @@
+.public-kudos {
+  width: 100%;
+}
+
 .public-kudos .kudos-title {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
-}
+}
+
+.kudos-list {
+  width: 100%;
+}
+
+

web-ui/src/components/kudos/PublicKudos.jsx

@@ -62,7 +62,7 @@ const PublicKudos = () => {
           {kudosLoading ? (
             <div className="kudos-list">
               {Array.from({ length: 5 }).map((_, index) => (
-                <SkeletonLoader width={400} key={index} type="kudos" />
+                <SkeletonLoader width="100%" key={index} type="kudos" />
               ))}
             </div>
           ) : !kudosLoading && kudos?.length > 0 ? (

web-ui/src/components/skeleton_loader/SkeletonLoader.jsx

@@ -11,7 +11,7 @@ const classes = {
 
 const StyledCard = styled(Card)(() => ({
   [`&.${classes.card}`]: {
-    width: '340px'
+    width: '100%'
   }
 }));
 
@@ -185,7 +185,7 @@ export default function SkeletonLoader({ type, delay = 300 }) {
     );
   } else if (type === 'kudos') {
     return (
-      <Box width={400}>
+      <Box width="100%">
         <StyledCard padding={0}>
           <CardContent style={{ paddingBottom: 0 }}>
             <Box