From 54fa21dd4619949aa698a5305a1aa803c619cff4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Mon, 27 Jul 2026 11:16:17 +0000
Subject: [PATCH] workspace: panel-level responsiveness via CSS container
 queries
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Panels are now container contexts (@container → container-type: inline-size)
on both the normal and transparent PanelSlot render paths, so panel content
can respond to the *panel's* width instead of only the viewport's. Non-
breaking: existing screens keep their viewport (lg:/md:) variants untouched.

First adopter: the bTop system-monitor grid reflows on panel drag —
grid-cols-1 → 2 at @min-[600px] → 3 at @min-[960px] (panel width), keeping
cards ≥300px so they no longer squeeze on a narrow panel.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/workspaces/officerdev/src/apps/SystemMonitor/BtopView.tsx | 2 +-
 .../officerdev/src/components/Workspace/PanelSlot.tsx         | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/workspaces/officerdev/src/apps/SystemMonitor/BtopView.tsx b/src/workspaces/officerdev/src/apps/SystemMonitor/BtopView.tsx
index 416e5727..8f1f5094 100644
--- a/src/workspaces/officerdev/src/apps/SystemMonitor/BtopView.tsx
+++ b/src/workspaces/officerdev/src/apps/SystemMonitor/BtopView.tsx
@@ -86,7 +86,7 @@ export const BtopView = () => {
 
         {stats && (
           <>
-            <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
+            <div className="grid grid-cols-1 gap-4 @min-[600px]:grid-cols-2 @min-[960px]:grid-cols-3">
               <Card title="CPU" icon={Cpu}>
                 <div className="flex items-end justify-between">
                   <span className="text-3xl font-semibold text-foreground">{stats.cpu.usagePct.toFixed(0)}%</span>
diff --git a/src/workspaces/officerdev/src/components/Workspace/PanelSlot.tsx b/src/workspaces/officerdev/src/components/Workspace/PanelSlot.tsx
index 7a30e014..a3001b38 100644
--- a/src/workspaces/officerdev/src/components/Workspace/PanelSlot.tsx
+++ b/src/workspaces/officerdev/src/components/Workspace/PanelSlot.tsx
@@ -280,7 +280,7 @@ export const PanelSlot = ({ panel, registry, components, interactive, locked, no
   if (entry?.transparent) {
     return contextMenu(
       <div data-panel-id={panel.id} className="group/panel relative h-full w-full p-1">
-        <div className="relative h-full w-full overflow-hidden">
+        <div className="@container relative h-full w-full overflow-hidden">
           <AppComponent panelId={panel.id} />
         </div>
         {overlays}
@@ -344,7 +344,7 @@ export const PanelSlot = ({ panel, registry, components, interactive, locked, no
   ) : headerContent;
 
   const body = (
-    <div className="flex-1 min-h-0">
+    <div className="@container flex-1 min-h-0">
       <Card className="h-full w-full overflow-hidden p-0 rounded-none border-0 shadow-none">
         <AppComponent panelId={panel.id} />
       </Card>