remove padding on last element

ui/marketplace/Rating/PopoverContent.tsx

@@ -69,7 +69,7 @@ const PopoverContent = ({ appId, rating, userRating, rate, isSending, source }:
           onClickFactory={ handleRateFactory }
         />
         { (filledIndex >= 0) && (
-          <Text fontSize="md" ml={ 2 }>
+          <Text fontSize="md" ml={ 3 }>
             { ratingDescriptions[filledIndex] }
           </Text>
         ) }

ui/marketplace/Rating/Rating.tsx

@@ -50,7 +50,7 @@ const Rating = ({
       { fullView && (
         <>
           <Stars filledIndex={ (rating?.value || 0) - 1 }/>
-          <Text fontSize="md" ml={ 1 }>{ rating?.value }</Text>
+          <Text fontSize="md" ml={ 2 }>{ rating?.value }</Text>
         </>
       ) }
       <Box ref={ popoverRef }>

ui/marketplace/Rating/Stars.tsx

-import { useColorModeValue } from '@chakra-ui/react';
+import { Flex, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 import type { MouseEventHandler } from 'react';
 
@@ -15,7 +15,7 @@ const Stars = ({ filledIndex, onMouseOverFactory, onMouseOut, onClickFactory }:
   const disabledStarColor = useColorModeValue('gray.200', 'gray.700');
   const outlineStartColor = onMouseOverFactory ? 'gray.400' : disabledStarColor;
   return (
-    <>
+    <Flex>
       { Array(5).fill(null).map((_, index) => (
         <IconSvg
           key={ index }
@@ -24,13 +24,14 @@ const Stars = ({ filledIndex, onMouseOverFactory, onMouseOut, onClickFactory }:
           w={ 6 } // 5 + 1 padding
           h={ 5 }
           pr={ 1 } // use padding intead of margin so that there are no empty spaces between stars without hover effect
+          _last={{ w: 5, pr: 0 }}
           cursor={ onMouseOverFactory ? 'pointer' : 'default' }
           onMouseOver={ onMouseOverFactory?.(index) }
           onMouseOut={ onMouseOut }
           onClick={ onClickFactory?.(index) }
         />
       )) }
-    </>
+    </Flex>
   );
 };