fix(app): clip rounded session panels (#31462)

packages/app/src/pages/session.tsx

@@ -1745,22 +1745,25 @@ export default function Page() {
 
         <div
           classList={{
-            "@container relative shrink-0 flex flex-col min-h-0 h-full bg-background-stronger flex-1 md:flex-none": true,
+            "@container relative shrink-0 flex flex-col min-h-0 h-full flex-1 md:flex-none": true,
             "duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
               !size.active() && !ui.reviewSnap,
             "transition-[width]": !isV2NewSessionPage(),
-            "rounded-[10px] shadow-[var(--v2-elevation-raised)]": settings.general.newLayoutDesigns() && !!params.id,
           }}
           style={{
             width: sessionPanelWidth(),
           }}
         >
           <div
-            class="flex-1 min-h-0 overflow-hidden"
             classList={{
-              "rounded-[10px]": settings.general.newLayoutDesigns(),
+              "flex-1 min-h-0 flex flex-col": true,
+              "bg-v2-background-bg-deep": isV2NewSessionPage(),
+              "bg-background-stronger": !isV2NewSessionPage(),
+              "rounded-[10px] overflow-hidden": settings.general.newLayoutDesigns(),
+              "shadow-[var(--v2-elevation-raised)]": settings.general.newLayoutDesigns() && !!params.id,
             }}
           >
+            <div class="flex-1 min-h-0 overflow-hidden">
               <Switch>
                 <Match when={params.id && mobileChanges()}>
                   <div class="relative h-full overflow-hidden">
@@ -1819,6 +1822,7 @@ export default function Page() {
             </div>
 
             <Show when={params.id || !newSessionDesign()}>{composerRegion("dock")}</Show>
+          </div>
 
           <Show when={desktopReviewOpen()}>
             <div onPointerDown={() => size.start()}>