fix(ui): adjust gradient, button spacing, feed title persistence, and optimistic read status

web/src/components/ArticleCard.tsx

@@ -36,8 +36,8 @@ export function ArticleCard({ article, onClick, onToggleRead, onToggleFavorite }
 
             {/* Image Placeholder with Gradient Overlay */}
             <div className="aspect-[16/10] overflow-hidden rounded-t-xl rounded-b-none bg-carbon-light relative mb-6">
-                {/* Gradient lowered to 50% height to avoid covering too much image */}
-                <div className="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-t from-white via-white/80 to-transparent opacity-100 z-10"></div>
+                {/* Gradient lowered to 30% height and reduced opacity to avoid covering too much image */}
+                <div className="absolute bottom-0 left-0 right-0 h-1/3 bg-gradient-to-t from-white via-white/60 to-transparent opacity-90 z-10"></div>
 
                 {/* Visual placeholder or real image */}
                 <div
@@ -73,7 +73,7 @@ export function ArticleCard({ article, onClick, onToggleRead, onToggleFavorite }
                     </p>
                 )}
 
-                <div className="mt-auto flex items-center justify-between pt-4 pb-2 border-t border-white/5">
+                <div className="mt-auto flex items-center justify-between pt-6 pb-4 border-t border-white/5">
                     <div className="flex space-x-2">
                         <button
                             onClick={(e) => {