Jannik/MelodyMuse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Make layout fully responsive for mobile and tablet

Browse Source
This commit is contained in:
Jannik
2026-06-04 00:40:26 +02:00
parent 1a964a43a7
commit 478c611d05
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/HomePage.tsx
+8 -8
View File
@@ -346,14 +346,14 @@ export function HomePage() {
);
return (
<div className="flex flex-col h-screen overflow-hidden">
<div className="flex flex-col min-h-[100dvh] md:h-screen overflow-y-auto md:overflow-hidden">
{/* Liquid background blobs */}
<div className="liquid-blob-1" />
<div className="liquid-blob-2" />
<div className="liquid-blob-3" />
{/* Header */}
<header className="shrink-0 z-20 bg-bg-card/40 backdrop-blur-md border-b border-border shadow-sm">
<header className="shrink-0 z-30 sticky top-0 bg-bg-card/70 backdrop-blur-md border-b border-border shadow-sm">
<div className="max-w-screen-2xl mx-auto px-4 sm:px-6 h-12 flex items-center justify-between">
{/* Logo */}
<div className="flex items-center gap-2.5">
@@ -450,11 +450,11 @@ export function HomePage() {
</header>
{/* Main content: 1/3 left input + 2/3 right results */}
<div className="flex-1 min-h-0 flex overflow-hidden max-w-screen-2xl mx-auto w-full px-4 sm:px-6 py-4 gap-5">
<div className="flex-1 min-h-0 flex flex-col md:flex-row md:overflow-hidden max-w-screen-2xl mx-auto w-full px-4 sm:px-6 py-4 gap-5">
{/* LEFT PANEL — 1/3 — Input */}
<div className="w-[340px] xl:w-[380px] shrink-0 flex flex-col">
<div className="card p-4 flex flex-col flex-1 min-h-0">
<div className="w-full md:w-[340px] xl:w-[380px] shrink-0 flex flex-col">
<div className="card p-4 flex flex-col flex-none md:flex-1 min-h-0">
<InputPanel
values={input}
onChange={setInput}
@@ -475,8 +475,8 @@ export function HomePage() {
</div>
{/* RIGHT PANEL — 2/3 — Results */}
<div className="flex-1 min-w-0 flex flex-col overflow-hidden">
<div className="flex-1 overflow-y-auto scrollbar-thin px-1">
<div className="flex-1 min-w-0 flex flex-col md:overflow-hidden gap-4 md:gap-0 pb-4 md:pb-0">
<div className="flex-1 md:overflow-y-auto md:scrollbar-thin px-1">
<ResultsPanel
assets={assets}
originalAssets={originalAssets}
@@ -496,7 +496,7 @@ export function HomePage() {
{/* Download bar inside results column, always visible */}
{assets && (
<div className="shrink-0 pt-2">
<div className="shrink-0 pt-2 sticky bottom-4 md:static z-20">
<StickyZipBar
title={selectedTitle}
busy={loading}