addressed James's comments

web/components/manalink-card.tsx

@@ -27,11 +27,10 @@ export function ManalinkCard(props: {
   const { expiresTime, maxUses, uses, amount, message } = info
   return (
     <Col>
-      <Col>
-        <div
+      <Col
         className={clsx(
           className,
-            'min-h-20 group flex flex-col rounded-xl bg-gradient-to-br shadow-lg transition-all',
+          'min-h-20 group rounded-lg bg-gradient-to-br drop-shadow-sm transition-all',
           getManalinkGradient(info.amount)
         )}
       >
@@ -55,8 +54,7 @@ export function ManalinkCard(props: {
           )}
           src="/logo-white.svg"
         />
-          <Row className="rounded-b-xl bg-white p-4">
-            <Col>
+        <Row className="rounded-b-lg bg-white p-4">
           <div
             className={clsx(
               'mb-1 text-xl text-indigo-500',
@@ -65,11 +63,9 @@ export function ManalinkCard(props: {
           >
             {formatMoney(amount)}
           </div>
-            </Col>
         </Row>
-        </div>
       </Col>
-      <div className="text-md mx-4 mt-2 mb-4 text-gray-500">{message}</div>
+      <div className="text-md mt-2 mb-4 text-gray-500">{message}</div>
     </Col>
   )
 }
@@ -81,7 +77,7 @@ export function ManalinkCardFromView(props: {
 }) {
   const { className, link, highlightedSlug } = props
   const { message, amount, expiresTime, maxUses, claims } = link
-  const [details, setDetails] = useState(false)
+  const [showDetails, setShowDetails] = useState(false)
 
   return (
     <Col>
@@ -92,14 +88,14 @@ export function ManalinkCardFromView(props: {
           link.slug === highlightedSlug ? 'shadow-md shadow-indigo-400' : ''
         )}
       >
-        <div
+        <Col
           className={clsx(
-            'relative flex flex-col rounded-t-lg bg-gradient-to-br transition-all',
+            'relative rounded-t-lg bg-gradient-to-br transition-all',
             getManalinkGradient(link.amount)
           )}
-          onClick={() => setDetails(!details)}
+          onClick={() => setShowDetails(!showDetails)}
         >
-          {details && (
+          {showDetails && (
             <ClaimsList
               className="absolute h-full w-full bg-white opacity-90"
               link={link}
@@ -121,9 +117,8 @@ export function ManalinkCardFromView(props: {
             className={clsx('my-auto block w-1/3 select-none self-center py-3')}
             src="/logo-white.svg"
           />
-        </div>
-        <Col className="w-full rounded-b-lg bg-white px-4 py-2 text-lg">
-          <Row className="relative gap-1">
+        </Col>
+        <Row className="relative w-full gap-1 rounded-b-lg bg-white px-4 py-2 text-lg">
           <div
             className={clsx(
               'my-auto mb-1 w-full',
@@ -141,10 +136,10 @@ export function ManalinkCardFromView(props: {
             copyPayload={getManalinkUrl(link.slug)}
           />
           <button
-              onClick={() => setDetails(!details)}
+            onClick={() => setShowDetails(!showDetails)}
             className={clsx(
               contractDetailsButtonClassName,
-                details
+              showDetails
                 ? 'bg-gray-200 text-gray-600 hover:bg-gray-200 hover:text-gray-600'
                 : ''
             )}
@@ -153,8 +148,7 @@ export function ManalinkCardFromView(props: {
           </button>
         </Row>
       </Col>
-      </Col>
-      <div className="mx-4 mt-2 mb-4 text-xs text-gray-500 md:text-sm">
+      <div className="mt-2 mb-4 text-xs text-gray-500 md:text-sm">
         {message || ''}
       </div>
     </Col>

web/pages/links.tsx

@@ -98,14 +98,13 @@ function ManalinksDisplay(props: {
     return (
       <>
         <Col className="grid w-full gap-4 md:grid-cols-2">
-          {displayedLinks.map((link) => {
-            return (
+          {displayedLinks.map((link) => (
             <ManalinkCardFromView
+              key={link.slug + link.createdTime}
               link={link}
               highlightedSlug={highlightedSlug}
             />
-            )
-          })}
+          ))}
         </Col>
         <Pagination
           page={page}