UI polish

client/src/sites/pg/components/PgAlgoliaFilterCard.tsx

@@ -109,7 +109,7 @@ export function PgMobileCollapsible(props: {
         <Stack gap="gap.sm">
           {props.facetsTopbar}
 
-          <HStack gap="gap.sm" align="flex-start" flexWrap="wrap">
+          <HStack columnGap="gap.md" rowGap="gap.sm" align="flex-start" flexWrap="wrap">
             <PgAlgoliaFacetsActive config={props.facetsActive} />
             <PgRefinesClearButton
               onClear={props.facetsActive.onClearAdditional}

client/src/sites/pg/components/PgHeader.tsx

@@ -25,7 +25,7 @@ const style = {
     py: "5",
   },
   hero: {
-    pl: layout.style.header.paddingX,
+    pl: { base: "30px", md: layout.style.header.paddingX.md, lg: "158px" },
     pr: { base: "30px", md: layout.style.header.paddingX.md },
   },
   logo: { w: "140px", h: "70px" },
@@ -104,7 +104,7 @@ export function PgHeroHeader(props: { navLinks: NavLink[]; isLoading: boolean })
         <Text
           as="h1"
           fontFamily="heading"
-          fontSize={{ base: "26px", md: "6xl" }}
+          fontSize={{ base: "26px", md: "53px", lg: "6xl" }}
           lineHeight={{ base: "32px", md: "1.2" }}
         >
           Find a job that&apos;s good,
@@ -114,15 +114,15 @@ export function PgHeroHeader(props: { navLinks: NavLink[]; isLoading: boolean })
             as="span"
             fontFamily="heading"
             fontStyle="italic"
-            fontSize={{ base: "26px", md: "6xl" }}
+            fontSize={{ base: "26px", md: "53px", lg: "6xl" }}
             lineHeight={{ base: "32px", md: "1.2" }}
           >
             and
           </Box>{" "}
           for the world.
         </Text>
         <Text
-          fontSize={{ base: "19px", md: "23px" }}
+          fontSize={{ base: "17px", md: "20px", lg: "23px" }}
           lineHeight={{ base: "25px", md: "1.4" }}
           mt={{ base: "4", md: "12" }}
         >

client/src/sites/pg/pages/jobs/list/JobCard.tsx

@@ -112,7 +112,7 @@ export function JobCard(props: {
         gap="gap.sm"
         mb={{ base: cardState === CardState.OpenByUser ? "gap.md" : "0", md: "gap.lg" }}
       >
-        <Flex gap={{ base: "gap.sm", md: "gap.lg" }}>
+        <Flex gap={{ base: "gap.md", md: "gap.lg" }}>
           {props.job.org?.logo ? (
             <Image
               src={props.job.org.logo.url}
@@ -144,8 +144,9 @@ export function JobCard(props: {
           <Flex flex="1" minW="0" justify="space-between" gap="gap.md">
             <VStack
               align="flex-start"
-              justify={{ md: "space-between" }}
+              justify="space-between"
               gap={{ base: "3px", md: "0" }}
+              h="full"
             >
               <JobTitleLink
                 job={props.job}
@@ -320,12 +321,20 @@ function JobExpanded(props: { job: JobFragmentType }) {
           <Text fontSize="sm">{props.job.org.description}</Text>
         </Stack>
       )}
-      <Flex gap="gap.md" align="center" w="fit-content" pos="relative" zIndex="2">
+      <Flex
+        gap="gap.md"
+        align="center"
+        w={{ base: "full", md: "fit-content" }}
+        pr={{ base: "30px", md: "0" }}
+        pos="relative"
+        zIndex="2"
+      >
         {props.job.url_external && (
           <Button
             asChild
             variant="pg-primary"
-            w={{ base: "150px", md: "190px" }}
+            w={{ base: "auto", md: "190px" }}
+            flex={{ base: "1", md: "initial" }}
             h="10"
             focusRingColor="transparent"
           >