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

Align sidebar height with main content for a consistent page layout

Browse Source 
Update `home.tsx` to make the sidebar stretch to the full height of the main content by applying `items-stretch` to the grid parent and `h-full` to the sidebar container, ensuring vertical alignment between the main content and sidebar columns. Adjust `TopStoriesList` to accept a `className` prop for flexible height management.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 40bf732d-d120-4be6-89c1-a898bb90cba4
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/nFw7xof
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-03-02 18:08:14 +00:00
parent 4ca5e0859f
commit 9af28cf166
2 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772474840087.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 439 KiB

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

@ -303,9 +303,9 @@ function NativeAdCard() {
); );
} }
function TopStoriesList({ articles }: { articles: Article[] }) { function TopStoriesList({ articles, className }: { articles: Article[]; className?: string }) {
return ( return (
<div className="bg-card rounded-lg border border-card-border p-4" data-testid="sidebar-top-stories"> <div className={`bg-card rounded-lg border border-card-border p-4 ${className || ""}`} data-testid="sidebar-top-stories">
<h3 className="font-bold text-card-foreground text-sm mb-3 flex items-center gap-2"> <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" /> <span className="w-1 h-4 bg-primary rounded-full" />
Zuletzt hinzugefügt Zuletzt hinzugefügt
@ -557,7 +557,7 @@ export default function Home() {
<Header /> <Header />
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 space-y-4"> <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 space-y-4">
<div className="grid grid-cols-1 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 lg:grid-cols-4 gap-4 items-stretch">
<div className="lg:col-span-3 space-y-4"> <div className="lg:col-span-3 space-y-4">
<FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} /> <FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} />
{widePickedArticles.length > 0 && ( {widePickedArticles.length > 0 && (
@ -568,12 +568,11 @@ export default function Home() {
</div> </div>
)} )}
</div> </div>
<div className="lg:col-span-1 flex flex-col gap-4"> <div className="lg:col-span-1 flex flex-col gap-4 h-full">
<SidebarWeatherWidget /> <SidebarWeatherWidget />
<div className="flex-1"> <div className="flex-1 flex flex-col">
{articles && articles.length > 0 && <TopStoriesList articles={[...articles].sort((a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime()).slice(0, 4)} />} {articles && articles.length > 0 && <TopStoriesList articles={[...articles].sort((a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime()).slice(0, 4)} className="flex-1" />}
</div> </div>
<SidebarAd />
</div> </div>
</div> </div>