also fixed new link timing out bug

web/components/manalink-card.tsx

@@ -26,6 +26,7 @@ export function ManalinkCard(props: {
   const { className, info, preview = false } = props
   const { expiresTime, maxUses, uses, amount, message } = info
   return (
+    <Col>
       <Col>
         <div
           className={clsx(
@@ -64,11 +65,12 @@ export function ManalinkCard(props: {
               >
                 {formatMoney(amount)}
               </div>
-            <div>{message}</div>
             </Col>
           </Row>
         </div>
       </Col>
+      <div className="text-md mx-4 mt-2 mb-4 text-gray-500">{message}</div>
+    </Col>
   )
 }
 
@@ -82,11 +84,12 @@ export function ManalinkCardFromView(props: {
   const [details, setDetails] = useState(false)
 
   return (
+    <Col>
       <Col
         className={clsx(
           'group z-10 rounded-lg drop-shadow-sm transition-all hover:drop-shadow-lg',
           className,
-        link.slug === highlightedSlug ? 'animate-pulse' : ''
+          link.slug === highlightedSlug ? 'shadow-md shadow-indigo-400' : ''
         )}
       >
         <div
@@ -149,9 +152,12 @@ export function ManalinkCardFromView(props: {
               <DotsHorizontalIcon className="h-[24px] w-5" />
             </button>
           </Row>
-        <div className="my-2 text-xs md:text-sm">{message || '\n\n'}</div>
         </Col>
       </Col>
+      <div className="mx-4 mt-2 mb-4 text-xs text-gray-500 md:text-sm">
+        {message || ''}
+      </div>
+    </Col>
   )
 }
 

web/components/manalinks/create-links-button.tsx

@@ -37,7 +37,6 @@ export function CreateLinksButton(props: {
                 message: newManalink.message,
               })
               setHighlightedSlug(slug || '')
-              setTimeout(() => setHighlightedSlug(''), 3700)
             }}
           />
         </Col>
@@ -165,6 +164,7 @@ function CreateManalinkForm(props: {
               <label className="label">Message</label>
               <Textarea
                 placeholder={defaultMessage}
+                maxLength={200}
                 className="input input-bordered resize-none"
                 autoFocus
                 value={newManalink.message}

web/pages/links.tsx

@@ -85,10 +85,10 @@ function ManalinksDisplay(props: {
 
   if (unclaimedLinks.length === 0) {
     return (
-      <div>
+      <p className="text-gray-500">
         You don't have any unclaimed manalinks. Send some more to spread the
         wealth!
-      </div>
+      </p>
     )
   } else {
     const [page, setPage] = useState(0)