From 9e4134c63e56134959e5f30509748d19f5523f7c Mon Sep 17 00:00:00 2001
From: davida-ps <david.a@prompt.security>
Date: Mon, 9 Feb 2026 11:33:42 +0100
Subject: [PATCH] fix: adjust layout and spacing in AdvisoryCard and FeedSetup
 components (#15)

* fix: adjust layout and spacing in AdvisoryCard and FeedSetup components

* fix: update README to include Product Hunt promotion and badge
---
 README.md                   |  4 ++++
 components/AdvisoryCard.tsx | 10 +++++-----
 components/Header.tsx       |  2 +-
 pages/FeedSetup.tsx         |  4 ++--
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 663574c..4c9199d 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,10 @@
 
 <div align="center">
 
+<p><strong>We are featured on Product Hunt - upvote us and help us spread the word.</strong></p>
+
+<a href="https://www.producthunt.com/products/clawsec-by-prompt-security?embed=true&amp;utm_source=badge-featured&amp;utm_medium=badge&amp;utm_campaign=badge-clawsec-by-prompt-security-2" target="_blank" rel="noopener noreferrer"><img alt="ClawSec by Prompt Security - A Security Skill Suite for OpenClaw Agents | Product Hunt" width="250" height="54" src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=1076044&amp;theme=light&amp;t=1770632815547"></a>
+
 ## Secure Your OpenClaw Bots with a Complete Security Skill Suite
 
 <h4>Brought to you by <a href="https://prompt.security">Prompt Security</a>, the Platform for AI Security</h4>
diff --git a/components/AdvisoryCard.tsx b/components/AdvisoryCard.tsx
index e0517da..e1cb6b0 100644
--- a/components/AdvisoryCard.tsx
+++ b/components/AdvisoryCard.tsx
@@ -47,19 +47,19 @@ export const AdvisoryCard: React.FC<AdvisoryCardProps> = ({ advisory, formatDate
   return (
     <Link
       to={`/feed/${encodeURIComponent(advisory.id)}`}
-      className="block bg-clawd-800 border border-clawd-700 rounded-xl p-5 hover:border-clawd-accent/30 transition-all group cursor-pointer"
+      className="block h-full bg-clawd-800 border border-clawd-700 rounded-xl p-5 hover:border-clawd-accent/30 transition-all group cursor-pointer"
     >
-      <div className="flex justify-between items-start mb-3">
-        <div className="flex flex-wrap gap-2">
+      <div className="grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-2 gap-y-2 mb-3">
+        <div className="flex min-w-0 flex-wrap gap-2">
           <span className={`text-xs font-bold px-2 py-1 rounded uppercase ${getSeverityClasses(advisory.severity)}`}>
             {advisory.severity}
             {advisory.cvss_score && <span className="ml-1 opacity-75">({advisory.cvss_score})</span>}
           </span>
-          <span className="text-xs px-2 py-1 rounded bg-clawd-700 text-gray-400">
+          <span className="text-xs px-2 py-1 rounded bg-clawd-700 text-gray-400 min-w-0 max-w-full truncate">
             {getTypeLabel(advisory.type)}
           </span>
         </div>
-        <span className="text-xs text-gray-500 font-mono">{formatDate(advisory.published)}</span>
+        <span className="text-xs text-gray-500 font-mono text-right whitespace-nowrap">{formatDate(advisory.published)}</span>
       </div>
       <h3 className="text-white font-bold mb-2 group-hover:text-clawd-accent transition-colors text-sm">
         {advisory.id}
diff --git a/components/Header.tsx b/components/Header.tsx
index 3608962..5519e3e 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -52,7 +52,7 @@ export const Header: React.FC = () => {
       {desktopNav}
 
       {/* Mobile top bar */}
-      <header className="md:hidden fixed top-0 left-0 right-0 z-50 backdrop-blur-md bg-[#26115d]/92 border-b border-[#3a1f7a]">
+      <header className="md:hidden fixed top-[72px] left-0 right-0 z-50 backdrop-blur-md bg-[#26115d]/92 border-b border-[#3a1f7a]">
         <div className="px-4 h-14 flex items-center justify-between">
           <NavLink to="/" className="flex items-center gap-2 text-white font-semibold text-lg">
             <img src="/img/favicon.ico" alt="" className="w-5 h-5 rounded-sm" />
diff --git a/pages/FeedSetup.tsx b/pages/FeedSetup.tsx
index 40ae029..5b75090 100644
--- a/pages/FeedSetup.tsx
+++ b/pages/FeedSetup.tsx
@@ -102,7 +102,7 @@ export const FeedSetup: React.FC = () => {
           </div>
         ) : (
           <>
-            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
               {currentAdvisories.map((item) => (
                 <AdvisoryCard key={item.id} advisory={item} formatDate={formatDate} />
               ))}
@@ -221,4 +221,4 @@ export const FeedSetup: React.FC = () => {
       <Footer />
     </div>
   );
-};
\ No newline at end of file
+};