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

Adjust sidebar layout to match content height

Browse Source 
Remove aspect-ratio from weather widget and adjust parent container to allow sidebar content to expand and fill available height, aligning it with the main content.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 7b9e3bba-cabe-4c7f-80c0-0f32c6ad7dfd
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:05:50 +00:00
parent 4282e1c591
commit 919e7ab446
3 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772474664853.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 437 KiB

2
client/src/components/weather-widget.tsx
View File

@ -209,7 +209,7 @@ export function SidebarWeatherWidget() {
if (!weather) return null;
return (
<div className="bg-gradient-to-br from-card to-card/80 rounded-lg border border-card-border p-4 aspect-square flex flex-col justify-between" data-testid="sidebar-weather">
<div className="bg-gradient-to-br from-card to-card/80 rounded-lg border border-card-border p-4 flex flex-col justify-between" data-testid="sidebar-weather">
<div className="flex items-center justify-between">
<div className="flex items-center gap-1.5">
<MapPin className="w-3.5 h-3.5 text-primary" />

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

@ -568,9 +568,11 @@ export default function Home() {
</div>
)}
</div>
<div className="lg:col-span-1 space-y-4">
<div className="lg:col-span-1 flex flex-col gap-4">
<SidebarWeatherWidget />
{articles && articles.length > 0 && <TopStoriesList articles={[...articles].sort((a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime()).slice(0, 4)} />}
<div className="flex-1">
{articles && articles.length > 0 && <TopStoriesList articles={[...articles].sort((a, b) => new Date(b.publishedAt).getTime() - new Date(a.publishedAt).getTime()).slice(0, 4)} />}
</div>
<SidebarAd />
</div>
</div>