minor style and merge request improvements

packages/web/components/Patron/Join/PerksHeader.tsx

@@ -20,7 +20,7 @@ export const PerksHeader = ({ title, count, pSeeds, amountUsd }: Props) => {
     : pSeedLabel;
   let amountDisplay = (
     <Text color="white" fontSize="md">
-      {amountLabel}
+      current req: {amountLabel}
     </Text>
   );
   if (amountUsd != null) {
@@ -28,7 +28,7 @@ export const PerksHeader = ({ title, count, pSeeds, amountUsd }: Props) => {
   }
   return (
     <Flex
-      direction="row"
+      direction={{ base: 'column', sm: 'row' }}
       justify="space-between"
       p="4"
       roundedTop="lg"

packages/web/components/Patron/Join/RankedLeagues.tsx

@@ -169,7 +169,7 @@ export const RankedLeagues: React.FC<Props> = ({
         <Box
           className={'mg-patron-join-card-bg'}
           borderRadius={8}
-          maxW="lg"
+          width={{ base: '100%', md: 'lg' }}
           my={2}
           p={4}
         >

packages/web/components/Patron/PatronTile.tsx

@@ -49,7 +49,7 @@ export const PatronTile: React.FC<Props> = ({ index, patron, pSeedPrice }) => {
     [index],
   );
 
-  const { label: timeZone = null, offset = null } = useMemo(
+  const { label: timeZone = null } = useMemo(
     () =>
       getTimeZoneFor({ location: player.profile?.timeZone ?? undefined }) ?? {
         label: null,
@@ -123,10 +123,9 @@ export const PatronTile: React.FC<Props> = ({ index, patron, pSeedPrice }) => {
                 </WrapItem>
               </Wrap>
               {timeZone && (
-                <HStack alignItems="baseline" w="auto" justify="center">
+                <HStack alignItems="center" w="auto" justify="center">
                   <FaGlobe color="blueLight" fontSize="0.875rem" />
-                  <Text fontSize="lg">{timeZone || '―'}</Text>
-                  {offset != null && <Text fontSize="sm">{offset}</Text>}
+                  <Text fontSize="sm">{timeZone || '―'}</Text>
                 </HStack>
               )}
               {displayDescription && (