full width list idems on mobile (#915)

components/List.tsx

@@ -5,7 +5,7 @@ import classNames from "@lib/classNames";
 
 export function List(props: JSX.IntrinsicElements["ul"]) {
   return (
-    <ul {...props} className={classNames("overflow-hidden rounded-sm sm:mx-0", props.className)}>
+    <ul {...props} className={classNames("sm:overflow-hidden rounded-sm sm:mx-0 -mx-4", props.className)}>
       {props.children}
     </ul>
   );

lib/integrations/getIntegrations.ts

@@ -58,7 +58,7 @@ export const ALL_INTEGRATIONS = [
     type: "stripe_payment",
     title: "Stripe",
     imageSrc: "integrations/stripe.svg",
-    description: "Receive payments",
+    description: "Collect payments",
     variant: "payment",
   },
 ] as const;

pages/integrations/index.tsx

@@ -384,11 +384,11 @@ export default function IntegrationsPage() {
                         )}
                       </li>
                     ))}
-
-                    <h2 className="font-bold text-gray-900 flex items-center content-center mb-2 mt-4">
-                      Connect an additional calendar
-                    </h2>
                   </List>
+                  <ShellSubHeading
+                    className="mt-6"
+                    title={<SubHeadingTitleWithConnections title="Connect an additional calendar" />}
+                  />
                 </>
               )}
               <List>