Improve card padding

src/components/banner/FormWarningBanner.tsx

@@ -1,12 +1,12 @@
 import { ComponentProps } from 'react';
 
 import { WarningBanner } from '../../components/banner/WarningBanner';
+import { cardStyles } from '../layout/Card';
 
 export function FormWarningBanner({ className, ...props }: ComponentProps<typeof WarningBanner>) {
   return (
     <WarningBanner
-      // The margins here should be the inverse of those in Card.tsx
+      className={`z-20 ${cardStyles.inverseMargin} mb-0 sm:mb-0 md:mb-0 ${className}`}
-      className={`z-20 -m-1.5 mb-0 xs:-m-2 sm:-m-3 sm:mb-0 md:-m-3.5 md:mb-0 ${className}`}
       {...props}
     />
   );

src/components/layout/Card.tsx

@@ -7,9 +7,16 @@ interface Props {
 export function Card({ className, children }: PropsWithChildren<Props>) {
   return (
     <div
-      className={`p-1.5 xs:p-2 sm:p-3 md:p-3.5 relative bg-white rounded-2xl overflow-auto ${className}`}
+      className={`${cardStyles.padding} relative bg-white rounded-2xl overflow-auto ${className}`}
     >
       {children}
     </div>
   );
 }
+
+export const cardStyles = {
+  padding: 'p-1.5 xs:p-2 sm:p-3 md:p-4',
+  // Should be inverse of cardPadding, used when something
+  // should be flush with card edge
+  inverseMargin: '-m-1.5 xs:-m-2 sm:-m-3 md:-m-4',
+};