From adccb1602b399044923703c9f973f2917563127f Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Sat, 21 Feb 2026 23:49:59 +0100
Subject: [PATCH] fix: improve widget card styling and fix recent-comments
 widget

Widget cards now have white bg, border, and shadow in light mode for
clear visual separation. Each widget has bottom margin for spacing.

Recent-comments widget updated to use standard .widget/.widget-title
classes instead of custom sidebar-widget class.
---
 _includes/components/widgets/recent-comments.njk | 6 +++---
 css/tailwind.css                                 | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/_includes/components/widgets/recent-comments.njk b/_includes/components/widgets/recent-comments.njk
index 486c37e..dad7828 100644
--- a/_includes/components/widgets/recent-comments.njk
+++ b/_includes/components/widgets/recent-comments.njk
@@ -1,7 +1,7 @@
 {# Recent Comments Widget — sidebar #}
 {% if recentComments and recentComments.length %}
-<div class="sidebar-widget">
-  <h3 class="text-sm font-semibold text-surface-600 dark:text-surface-400 uppercase tracking-wide mb-3">Recent Comments</h3>
+<div class="widget">
+  <h3 class="widget-title">Recent Comments</h3>
   <ul class="space-y-3">
     {% for comment in recentComments %}
     <li class="text-sm">
@@ -14,7 +14,7 @@
           <span class="font-medium">{{ comment.author.name or "Anonymous" }}</span>
           <p class="text-surface-600 dark:text-surface-400 line-clamp-2">{{ comment.content.text | truncate(80) }}</p>
           {% if comment["comment-target"] %}
-          <a href="{{ comment['comment-target'] }}" class="text-xs text-surface-500 hover:underline">View post</a>
+          <a href="{{ comment['comment-target'] }}" class="text-xs text-primary-600 dark:text-primary-400 hover:underline">View post</a>
           {% endif %}
         </div>
       </div>
diff --git a/css/tailwind.css b/css/tailwind.css
index 3965d03..27fdabf 100644
--- a/css/tailwind.css
+++ b/css/tailwind.css
@@ -280,7 +280,7 @@
 
   /* Widget cards */
   .widget {
-    @apply p-4 bg-surface-100 dark:bg-surface-800 rounded-lg overflow-hidden;
+    @apply p-4 mb-4 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden;
   }
 
   .widget-title {