From 65d8338a4c3e07aaa035eded7290f2dca1ca3075 Mon Sep 17 00:00:00 2001
From: scanash00 <scan@scanash.com>
Date: Wed, 28 Jan 2026 16:20:32 -0900
Subject: [PATCH] Make cards separated independent of each other instead of
 stacked

---
 web/src/css/annotations.css |  7 ++++++-
 web/src/css/collections.css | 10 ++++++++++
 web/src/css/feed.css        | 18 +++++++++++-------
 3 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/web/src/css/annotations.css b/web/src/css/annotations.css
index 6865e26..47294a1 100644
--- a/web/src/css/annotations.css
+++ b/web/src/css/annotations.css
@@ -54,9 +54,13 @@
 
 .feed > .annotation-card,
 .feed > .card {
-  border-radius: 0;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border);
+  background: var(--bg-card) !important;
+  overflow: hidden;
 }
 
+/* 
 .feed > .annotation-card:first-child,
 .feed > .card:first-child {
   border-top-left-radius: var(--radius-lg) !important;
@@ -73,6 +77,7 @@
 .feed > .card:only-child {
   border-radius: var(--radius-lg) !important;
 }
+*/
 
 .annotation-header {
   display: flex;
diff --git a/web/src/css/collections.css b/web/src/css/collections.css
index 671b16f..44deffa 100644
--- a/web/src/css/collections.css
+++ b/web/src/css/collections.css
@@ -13,6 +13,8 @@
   padding: 10px 20px;
   background: var(--bg-secondary);
   border-bottom: 1px solid var(--border);
+  border-top-left-radius: var(--radius-lg);
+  border-top-right-radius: var(--radius-lg);
 }
 
 .collection-context-inner {
@@ -328,3 +330,11 @@
   border-color: rgba(255, 69, 58, 0.3);
   color: var(--error);
 }
+
+.collection-item-wrapper .card,
+.collection-feed-item .card {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none;
+  border-radius: 0;
+}
diff --git a/web/src/css/feed.css b/web/src/css/feed.css
index dbd11ab..b14c044 100644
--- a/web/src/css/feed.css
+++ b/web/src/css/feed.css
@@ -1,16 +1,16 @@
 .feed-container {
-  background: var(--bg-elevated);
-  border: 1px solid var(--border-hover);
-  border-radius: var(--radius-xl);
+  /* background: var(--bg-elevated); */
+  /* border: 1px solid var(--border-hover); */
+  /* border-radius: var(--radius-xl); */
   overflow: visible;
-  padding: 8px;
+  /* padding: 8px; */
   position: relative;
 }
 
 .feed {
   display: flex;
   flex-direction: column;
-  gap: 0;
+  gap: 12px;
   width: 100%;
   overflow: visible;
   border-radius: var(--radius-lg);
@@ -18,12 +18,15 @@
 }
 
 .feed > * {
-  border-bottom: 1px solid var(--border);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
   position: relative;
+  overflow: hidden;
 }
 
 .feed > *:last-child {
-  border-bottom: none;
+  border-bottom: 1px solid var(--border);
 }
 
 .feed > *:hover {
@@ -38,6 +41,7 @@
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
-- 
2.51.2