From 89595d42f314c9f2facb13ea55dad92998487878 Mon Sep 17 00:00:00 2001
From: J M Rossy <jm.rossy@gmail.com>
Date: Thu, 26 Sep 2024 15:58:48 -0400
Subject: [PATCH] Improve card padding

---
 src/components/banner/FormWarningBanner.tsx | 4 ++--
 src/components/layout/Card.tsx              | 9 ++++++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/banner/FormWarningBanner.tsx b/src/components/banner/FormWarningBanner.tsx
index 9615b6d..b45cfa0 100644
--- a/src/components/banner/FormWarningBanner.tsx
+++ b/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 -m-1.5 mb-0 xs:-m-2 sm:-m-3 sm:mb-0 md:-m-3.5 md:mb-0 ${className}`}
+      className={`z-20 ${cardStyles.inverseMargin} mb-0 sm:mb-0 md:mb-0 ${className}`}
       {...props}
     />
   );
diff --git a/src/components/layout/Card.tsx b/src/components/layout/Card.tsx
index ed6b199..ad8ee55 100644
--- a/src/components/layout/Card.tsx
+++ b/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',
+};