sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust text size and spacing in top stories section

Browse Source 
Update font sizes, padding, and margins within the Top Stories component to ensure text fits within its container without horizontal scrolling.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 8c471362-0d7a-4f1d-a270-58ae41f388c9
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/drGbo1a
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 21:02:32 +00:00
parent b1b7de007e
commit dca73b8990
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
client/src/pages/home.tsx
View File

@ -220,19 +220,19 @@ function NativeAdCard() {
function TopStoriesList({ articles }: { articles: Article[] }) {
return (
<div className="bg-card rounded-lg border border-card-border p-4 h-full" data-testid="sidebar-top-stories">
<h3 className="font-bold text-card-foreground text-sm mb-3 flex items-center gap-2">
<span className="w-1 h-4 bg-primary rounded-full" />
<div className="bg-card rounded-lg border border-card-border p-3 h-full" data-testid="sidebar-top-stories">
<h3 className="font-bold text-card-foreground text-xs mb-2 flex items-center gap-2">
<span className="w-1 h-3.5 bg-primary rounded-full" />
Top-Storys
</h3>
<div className="space-y-0">
{articles.slice(0, 5).map((article) => (
<Link key={article.id} href={`/article/${article.slug}`}>
<div className="group cursor-pointer py-2.5 border-b border-card-border last:border-0" data-testid={`card-top-${article.id}`}>
<h4 className="text-sm font-medium text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug">{article.title}</h4>
<div className="flex items-center gap-1.5 mt-1">
<span className="text-[11px] text-muted-foreground">{article.author}</span>
<span className="text-muted-foreground/50 text-[11px]">{timeAgo(new Date(article.publishedAt))}</span>
<div className="group cursor-pointer py-1.5 border-b border-card-border last:border-0" data-testid={`card-top-${article.id}`}>
<h4 className="text-xs font-medium text-card-foreground line-clamp-2 group-hover:text-primary transition-colors leading-snug">{article.title}</h4>
<div className="flex items-center gap-1.5 mt-0.5">
<span className="text-[10px] text-muted-foreground">{article.author}</span>
<span className="text-muted-foreground/50 text-[10px]">{timeAgo(new Date(article.publishedAt))}</span>
</div>
</div>
</Link>