From 8da7d0bd909b0a96aa7b22428eba631c83d67377 Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Sat, 6 Jun 2026 01:11:45 -0400
Subject: [PATCH] fix: single rounded-2xl overflow-hidden container clips all
 cells

Remove individual cell rounded corners. Parent grid has rounded-2xl + overflow-hidden
for unified frame shape. Each cell still has own bg-white/40 + backdrop-blur-xl.
Center cell stays transparent.
---
 frontend/src/App.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index efe85c2..4a3487e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -116,10 +116,10 @@ export default function App() {
 
       <Particles type={currentScene.particles ?? 'none'} />
       <div className="relative z-20 h-full p-4">
-        <div className="h-full grid grid-rows-[auto_1fr_auto] grid-cols-[288px_1fr_256px]">
+        <div className="h-full grid grid-rows-[auto_1fr_auto] grid-cols-[288px_1fr_256px] rounded-2xl overflow-hidden">
 
           {/* ── Top bar: scene selector + clock ── */}
-          <div className="col-span-3 flex items-center justify-between px-5 py-3 shrink-0 bg-white/40 backdrop-blur-xl rounded-t-2xl">
+          <div className="col-span-3 flex items-center justify-between px-5 py-3 shrink-0 bg-white/40 backdrop-blur-xl">
             <div className="flex items-center gap-1">
               {SCENES.map((s) => (
                 <button key={s.id} onClick={() => handleSceneChange(s.id)}
@@ -138,7 +138,7 @@ export default function App() {
           </div>
 
           {/* ── Left sidebar ── */}
-          <div className="flex flex-col gap-3 p-3 overflow-y-auto bg-white/40 backdrop-blur-xl rounded-bl-2xl">
+          <div className="flex flex-col gap-3 p-3 overflow-y-auto bg-white/40 backdrop-blur-xl">
             <div className="shrink-0">
               <Timer />
             </div>
@@ -162,7 +162,7 @@ export default function App() {
           </div>
 
           {/* ── Right sidebar ── */}
-          <div className="flex flex-col p-3 overflow-y-auto bg-white/40 backdrop-blur-xl rounded-br-2xl">
+          <div className="flex flex-col p-3 overflow-y-auto bg-white/40 backdrop-blur-xl">
             <div className="flex-1 flex flex-col gap-3 overflow-y-auto">
               <MusicPlayer />
               <WhiteNoise />
@@ -171,7 +171,7 @@ export default function App() {
           </div>
 
           {/* ── Bottom status bar ── */}
-          <div className="col-span-3 shrink-0 px-5 py-2 flex items-center justify-between text-[11px] text-kira-plum/30 bg-white/40 backdrop-blur-xl rounded-b-2xl">
+          <div className="col-span-3 shrink-0 px-5 py-2 flex items-center justify-between text-[11px] text-kira-plum/30 bg-white/40 backdrop-blur-xl">
             <div className="flex items-center gap-2">
               <span className={`w-1.5 h-1.5 rounded-full ${
                 isRecording ? 'bg-red-400 animate-pulse'