.

modules/customers/src/web/list/ui/pages/list-customers-page.tsx

@@ -1,6 +1,11 @@
 import { PageHeader, SimpleSearchInput } from "@erp/core/components";
 import { AppContent, AppHeader, BackHistoryButton } from "@repo/rdx-ui/components";
-import { Button } from "@repo/shadcn-ui/components";
+import {
+  Button,
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@repo/shadcn-ui/components";
 import { PlusIcon } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 
@@ -22,6 +27,31 @@ export const ListCustomersPage = () => {
     //onDeleteClick: (customer) => null, //confirmDelete(inv.id),
   });
 
+  const isPanelOpen = panelCtrl.panelState.isOpen;
+
+  const listContent = (
+    <div className="h-full min-w-0 overflow-auto w-full">
+      <div className="flex items-center justify-between gap-16">
+        <SimpleSearchInput
+          loading={listCtrl.isFetching}
+          onSearchChange={listCtrl.setSearchValue}
+          value={listCtrl.search}
+        />
+      </div>
+
+      <CustomersGrid
+        columns={columns}
+        data={listCtrl.data}
+        fetching={listCtrl.isFetching}
+        loading={listCtrl.isLoading}
+        onPageChange={listCtrl.setPageIndex}
+        onPageSizeChange={listCtrl.setPageSize}
+        pageIndex={listCtrl.pageIndex}
+        pageSize={listCtrl.pageSize}
+      />
+    </div>
+  );
+
   if (listCtrl.isError) {
     return (
       <AppContent>
@@ -51,43 +81,45 @@ export const ListCustomersPage = () => {
           title={t("pages.list.title")}
         />
       </AppHeader>
+
       <AppContent className="min-h-0">
-        <div className="flex min-h-0 flex-1 overflow-hidden gap-4">
+        {isPanelOpen ? (
-          <div className="min-w-0 flex-1 overflow-auto">
+          <ResizablePanelGroup
-            <div className="flex items-center justify-between gap-16">
+            autoSave="list-customers-page"
-              <SimpleSearchInput
+            className="h-full"
-                loading={listCtrl.isFetching}
+            orientation="horizontal"
-                onSearchChange={listCtrl.setSearchValue}
+          >
-                value={listCtrl.search}
+            <ResizablePanel defaultSize="65%" maxSize="75%" minSize="25%">
-              />
+              {listContent}
-            </div>
+            </ResizablePanel>
 
-            <CustomersGrid
+            <ResizableHandle className="mx-4" withHandle />
-              columns={columns}
-              data={listCtrl.data}
-              fetching={listCtrl.isFetching}
-              loading={listCtrl.isLoading}
-              onPageChange={listCtrl.setPageIndex}
-              onPageSizeChange={listCtrl.setPageSize}
-              onRowClick={() => null}
-              pageIndex={listCtrl.pageIndex}
-              pageSize={listCtrl.pageSize}
-            />
-          </div>
 
-          <CustomerSummaryPanel
+            <ResizablePanel defaultSize="35%" maxSize="75%" minSize="25%">
-            customer={panelCtrl.customer}
+              <div className="h-full">
-            mode={panelCtrl.panelState.mode}
+                <CustomerSummaryPanel
-            onEdit={(customer) => navigate(`/customers/${customer.id}/edit`)}
+                  className="border bg-background"
-            onOpenChange={(open) => {
+                  customer={panelCtrl.customer}
-              if (open) panelCtrl.panelState.onOpenChange(true);
+                  mode={panelCtrl.panelState.mode}
-              else panelCtrl.closePanel();
+                  onEdit={(customer) => navigate(`/customers/${customer.id}/edit`)}
-            }}
+                  onOpenChange={(open) => {
-            onTogglePinned={panelCtrl.panelState.togglePinned}
+                    if (!open) {
-            open={panelCtrl.panelState.isOpen}
+                      panelCtrl.closePanel();
-            visibility={panelCtrl.panelState.visibility}
+                      return;
-          />
+                    }
-        </div>
+
+                    panelCtrl.panelState.onOpenChange(true);
+                  }}
+                  onTogglePinned={panelCtrl.panelState.togglePinned}
+                  open={panelCtrl.panelState.isOpen}
+                  visibility={panelCtrl.panelState.visibility}
+                />
+              </div>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        ) : (
+          <div className="flex min-h-0 flex-1 overflow-hidden border">{listContent}</div>
+        )}
       </AppContent>
     </>
   );

packages/rdx-ui/src/components/right-panel/right-panel.tsx

@@ -17,37 +17,30 @@ export const RightPanel = ({
   return (
     <aside
       aria-labelledby="right-panel-title"
-      className={cn(
+      className={cn("flex h-full flex-col bg-background", className)}
-        "ml-4", // separación real
-        "border bg-background",
-        "w-[420px] xl:w-[460px]",
-        className
-      )}
     >
-      <div className="flex h-full flex-col">
+      <div className="flex items-center justify-between border-b px-4 py-3">
-        <div className="flex items-center justify-between border-b px-4 py-3">
+        <h2 className="truncate text-sm font-semibold" id="right-panel-title">
-          <h2 className="truncate text-sm font-semibold" id="right-panel-title">
+          {title}
-            {title}
+        </h2>
-          </h2>
 
-          <div className="flex items-center gap-1">
+        <div className="flex items-center gap-1">
-            {headerActions}
+          {headerActions}
 
-            {onOpenChange ? (
+          {onOpenChange ? (
-              <Button
+            <Button
-                aria-label="Cerrar panel"
+              aria-label="Cerrar panel"
-                onClick={() => onOpenChange(false)}
+              onClick={() => onOpenChange(false)}
-                size="icon-sm"
+              size="icon-sm"
-                variant="ghost"
+              variant="ghost"
-              >
+            >
-                <XIcon className="size-4" />
+              <XIcon className="size-4" />
-              </Button>
+            </Button>
-            ) : null}
+          ) : null}
-          </div>
         </div>
-
-        <div className="flex-1 overflow-auto">{children}</div>
       </div>
+
+      <div className="flex-1 overflow-auto">{children}</div>
     </aside>
   );
 };

packages/shadcn-ui/src/styles/globals.css

@@ -149,7 +149,7 @@
   --sidebar-border: oklch(0.6427 0.1407 253.94);
   --sidebar-ring: oklch(1 0 0);
 
-  --radius: 0.25rem;
+  --radius: 0.325rem;
   --shadow-x: 0;
   --shadow-y: 1px;
   --shadow-blur: 3px;
@@ -200,7 +200,7 @@
   --sidebar-accent-foreground: oklch(0.9851 0 0);
   --sidebar-border: oklch(1 0 0);
   --sidebar-ring: oklch(0.4915 0.2776 263.8724);
-  --radius: 0.25rem;
+  --radius: 0.325rem;
   --shadow-2xs: 1px 1px 6px 0px hsl(0 0% 0% / 0.05);
   --shadow-xs: 1px 1px 6px 0px hsl(0 0% 0% / 0.05);
   --shadow-sm: 1px 1px 6px 0px hsl(0 0% 0% / 0.1), 1px 1px 2px -1px hsl(0 0% 0% / 0.1);