update contentSecurity for frontendsupport

Author: dagda1

apps/frontendsupport/server.mts

@@ -82,10 +82,11 @@ export async function createServer(): Promise<{
             'https://plausible.io',
             'https://frontendrescue.scot',
             'https://res.cloudinary.com',
+            'https://assets.calendly.com',
           ],
           fontSrc: ["'self'", 'data:', 'https://fonts.gstatic.com', 'https://fonts.googleapis.com'],
           objectSrc: ["'self'", 'blob:'],
-          frameSrc: ["'self'", 'https://www.formlets.com'],
+          frameSrc: ["'self'", 'https://www.formlets.com', 'https://calendly.com'],
           manifestSrc: ['data:'],
         },
       }),

apps/frontendsupport/src/components/About/About.tsx

@@ -56,7 +56,7 @@ export function About(): JSX.Element {
               , often about practical web performance.
             </Text>
             <Text component="p">
-              I have 25+ years of experience shipping and improving frontends for organisations such as
+              I have 25+ years of experience shipping and improving frontends for organisations such as:
             </Text>
             <List>
               <Text>

apps/frontendsupport/src/components/Contact/ContactButtons.tsx

@@ -1,3 +1,4 @@
+import { Box } from '@cutting/component-library';
 import { lazy, Suspense } from 'react';
 import Skeleton from 'react-loading-skeleton';
 
@@ -24,7 +25,9 @@ export function ContactButtons({ justify: justify = 'flexStart' }: ContactButton
         </div>
       }
     >
-      <ContactForm callType="chat" justify={justify} />
+      <Box>
+        <ContactForm callType="chat" justify={justify} />
+      </Box>
     </Suspense>
   );
 }

apps/frontendsupport/src/pages/Home/Home.css.ts

@@ -1,3 +1,4 @@
+import { responsiveStyle, vars } from '@cutting/component-library';
 import { keyframes, style } from '@vanilla-extract/css';
 
 const fadeIn = keyframes({
@@ -12,6 +13,16 @@ const fadeIn = keyframes({
 export const home = style({
   fontFamily: "'Helvetica Now Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
   animation: `${fadeIn} 0.5s ease-in`,
+  ...responsiveStyle({
+    mobile: {
+      marginLeft: vars.space.medium,
+      marginRight: vars.space.medium,
+    },
+    desktop: {
+      marginLeft: 0,
+      marginRight: 0,
+    },
+  }),
 });
 
 export const ctaButton = style({