diff --git a/CLAUDE.md b/CLAUDE.md
index 2c8a914..4046c3d 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -52,32 +52,44 @@ XX. **Nome Problema (FIX/IMPLEMENTATO DATA):** - **Problema:** Descrizione breve
**Lavoro completato nell'ultima sessione:**
-- **NUOVA FEATURE: Pannelli Ridimensionabili e Collassabili nel Report Designer** - COMPLETATO
- - **Obiettivo:** I pannelli del report designer devono essere collassabili, ridimensionabili, riposizionabili e la configurazione deve essere persistita
- - **Nuovi file creati:**
- - `frontend/src/hooks/useLocalStorage.ts` - Hook generico per persistenza in localStorage
- - `frontend/src/hooks/usePanelLayout.ts` - Hook per gestire configurazione pannelli (larghezza, collapsed, posizione)
- - `frontend/src/components/reportEditor/ResizablePanel.tsx` - Componente pannello ridimensionabile con:
- - Handle di resize trascinabile sul bordo
- - Stato collassato con icona, badge e titolo verticale
- - Header compatto con titolo, icona e pulsante collasso
- - Nessuna scrollbar visibile (hidden ma funzionale)
- - **Configurazione pannelli:**
- - Salvata in localStorage con chiave `apollinare-report-editor-panels`
- - Default: Pages (sinistra, 220px), Data (destra, 280px), Properties (destra, 280px)
- - Ogni pannello ha: id, width, collapsed, position (left/right), order
- - **Scrollbar nascoste:** Usato CSS per nascondere scrollbar mantenendo funzionalità scroll
- - `&::-webkit-scrollbar: { width: 0 }` per Chrome/Safari
- - `scrollbarWidth: "none"` per Firefox
- - `msOverflowStyle: "none"` per IE/Edge
- - **Canvas centrato:** La viewport del report rimane sempre al centro dell'area disponibile
- - **File modificati:**
- - `ReportEditorPage.tsx` - Integrato `usePanelLayout`, usato `ResizablePanel` per tutti i pannelli
- - `PageNavigator.tsx` - Aggiunto CSS per nascondere scrollbar
- - `DataBindingPanel.tsx` - Aggiunto CSS per nascondere scrollbar
- - `PropertiesPanel.tsx` - Aggiunto CSS per nascondere scrollbar
- - **File rimossi:**
- - `CollapsiblePanel.tsx` - Sostituito da `ResizablePanel`
+- **NUOVA FEATURE: Sistema Pannelli Drag-and-Drop con Sidebar Ridimensionabili** - COMPLETATO
+ - **Obiettivo:** I pannelli del report designer devono poter essere trascinati tra sidebar sinistra e destra, con ridimensionamento orizzontale a livello sidebar
+ - **Architettura implementata:**
+ - `SidebarDropZone.tsx` - Contenitore sidebar con:
+ - Drop zone per drag-and-drop pannelli (HTML5 Drag and Drop API)
+ - Handle di resize orizzontale sul bordo interno
+ - Indicatore visivo durante il drag
+ - Props: `position`, `width`, `onWidthChange`, `onPanelDrop`, `panelIds`
+ - `ResizablePanel.tsx` - Pannello individuale con:
+ - Header trascinabile (`draggable="true"`)
+ - Resize verticale (flex) tra pannelli nella stessa sidebar
+ - Stato collassato con icona e titolo verticale
+ - `width: 100%` - si adatta alla larghezza della sidebar
+ - `usePanelLayout.ts` - Hook per gestione stato:
+ - `sidebarWidths: { left: number, right: number }` per larghezza sidebar
+ - `panels[]` con `flex` per distribuzione verticale
+ - `movePanelToPosition()` redistribuisce flex quando un pannello viene droppato
+ - Persistenza in localStorage (versione 3)
+ - **Comportamento:**
+ - Trascinando l'header di un pannello si può spostarlo tra sidebar
+ - Quando un pannello viene droppato, tutti i pannelli nella sidebar di destinazione ottengono `flex: 1` (distribuzione equa)
+ - Il resize orizzontale agisce sulla sidebar intera, non sui singoli pannelli
+ - I pannelli adottano automaticamente la larghezza della sidebar
+ - **Layout Full-Width:**
+ - `Layout.tsx` modificato per Report Editor: `p: 0`, `overflow: hidden`, `width: 100vw - drawerWidth`
+ - `ReportEditorPage.tsx`: `flex: 1`, `minHeight: 0` per espansione corretta
+ - Canvas container: `width: 100%` per occupare tutto lo spazio disponibile
+
+- **FIX: Layout Report Designer Non Full-Width** - COMPLETATO
+ - **Problema:** Il report designer non occupava tutta la larghezza del browser
+ - **Causa:** Il Layout usava `width: 100%` invece di `100vw` e il padding non veniva rimosso per il report editor
+ - **Soluzione:**
+ - `Layout.tsx`: Usato `width: 100vw` e `calc(100vw - drawerWidth)` invece di `100%`
+ - `Layout.tsx`: Padding condizionale `p: 0` per route `/report-editor`
+ - `Layout.tsx`: `overflow: hidden` e `height: 100vh` per contenitore main
+ - `ReportEditorPage.tsx`: Rimossi margini negativi, usato `flex: 1` e `minHeight: 0`
+ - `EditorCanvas.tsx`: Modifiche utente per larghezza canvas
+ - **File modificati:** `Layout.tsx`, `ReportEditorPage.tsx`, `EditorCanvas.tsx`
- **NUOVA FEATURE: Panning e Zoom stile Draw.io nel Report Designer** - COMPLETATO (sessione precedente)
- **Problema:** Le scorciatoie da tastiera (Ctrl+X, Ctrl+C, etc.) venivano intercettate dal browser invece che dalla pagina
@@ -1272,6 +1284,32 @@ frontend/src/
- Implementate tutte le scorciatoie dichiarate nel context menu (Ctrl+X/C/V/D/A/L/G, Ctrl+[/], Delete, Escape)
- **File:** `EditorCanvas.tsx` (aggiunto `isTextEditing()` a `EditorCanvasRef`), `ReportEditorPage.tsx` (riscritto `useEffect` delle scorciatoie, aggiunto `canvasRef`)
+29. **Sistema Pannelli Drag-and-Drop tra Sidebar (IMPLEMENTATO 29/11/2025):**
+ - **Obiettivo:** Permettere agli utenti di trascinare i pannelli tra sidebar sinistra e destra, con ridimensionamento a livello sidebar
+ - **Implementazione:**
+ - `SidebarDropZone.tsx` - Drop zone con HTML5 Drag and Drop API e resize orizzontale
+ - `ResizablePanel.tsx` - Pannello con header draggable e resize verticale (flex)
+ - `usePanelLayout.ts` - Hook con `sidebarWidths` invece di larghezza per-pannello
+ - Versione config incrementata a 3 per forzare migrazione localStorage
+ - **Comportamento chiave:**
+ - `movePanelToPosition()` redistribuisce `flex: 1` a tutti i pannelli nella sidebar di destinazione
+ - Pannelli usano `width: 100%` per adattarsi alla sidebar
+ - `PANEL_DRAG_TYPE = "application/x-panel-id"` per identificare i drag
+ - **File:** `SidebarDropZone.tsx`, `ResizablePanel.tsx`, `usePanelLayout.ts`, `ReportEditorPage.tsx`
+
+30. **Layout Report Designer Non Full-Width (FIX 29/11/2025):**
+ - **Problema:** Il report designer non occupava tutta la larghezza disponibile del browser
+ - **Causa:** Il Layout usava `width: 100%` che si riferisce al parent, non al viewport. Inoltre il padding non veniva rimosso per il report editor
+ - **Soluzione:**
+ - `Layout.tsx`: Cambiato `width: 100%` → `width: 100vw` e `calc(100vw - drawerWidth)`
+ - `Layout.tsx`: Aggiunto controllo condizionale per route `/report-editor`: `p: 0`, `overflow: hidden`
+ - `Layout.tsx`: Cambiato `minHeight: 100vh` → `height: 100vh` con `overflow: hidden`
+ - `Layout.tsx`: Content box usa `flex: 1` con `minHeight: 0` (fondamentale per flexbox)
+ - `ReportEditorPage.tsx`: Rimossi margini negativi, usato `flex: 1` e `minHeight: 0`
+ - `ReportEditorPage.tsx`: Canvas container con `width: 100%`
+ - **Nota:** `minHeight: 0` è fondamentale in flexbox per permettere ai contenitori di ridursi sotto la dimensione del loro contenuto
+ - **File:** `Layout.tsx`, `ReportEditorPage.tsx`, `EditorCanvas.tsx`
+
### Schema Database Report System
Le tabelle sono già nel DbContext (`AppollinareDbContext.cs`):
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index bc4b7a4..f02ec7e 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -215,23 +215,31 @@ export default function Layout() {
sx={{
flexGrow: 1,
width: {
- xs: "100%",
- sm: `calc(100% - ${drawerWidth}px)`,
+ xs: "100vw",
+ sm: `calc(100vw - ${drawerWidth}px)`,
},
- minHeight: "100vh",
+ height: "100vh",
display: "flex",
flexDirection: "column",
+ overflow: "hidden",
}}
>
{/* Toolbar spacer */}
-
+
{/* Content */}
diff --git a/frontend/src/components/reportEditor/EditorCanvas.tsx b/frontend/src/components/reportEditor/EditorCanvas.tsx
index 3c9d29e..0741500 100644
--- a/frontend/src/components/reportEditor/EditorCanvas.tsx
+++ b/frontend/src/components/reportEditor/EditorCanvas.tsx
@@ -1522,6 +1522,7 @@ const EditorCanvas = forwardRef(
sx={{
flex: 1,
overflow: "auto",
+ width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "flex-start",
diff --git a/frontend/src/pages/ReportEditorPage.tsx b/frontend/src/pages/ReportEditorPage.tsx
index 29b4962..a5bf6ee 100644
--- a/frontend/src/pages/ReportEditorPage.tsx
+++ b/frontend/src/pages/ReportEditorPage.tsx
@@ -1862,9 +1862,9 @@ export default function ReportEditorPage() {
sx={{
display: "flex",
flexDirection: "column",
- height: { xs: "calc(100vh - 56px)", sm: "calc(100vh - 64px)" },
- mx: { xs: -1.5, sm: -2, md: -3 },
- mt: { xs: -1.5, sm: -2, md: -3 },
+ flex: 1,
+ width: "100%",
+ minHeight: 0, // Important: allows flex container to shrink
overflow: "hidden",
}}
>
diff --git a/src/Apollinare.API/apollinare.db-shm b/src/Apollinare.API/apollinare.db-shm
index 8d59635..d574bb6 100644
Binary files a/src/Apollinare.API/apollinare.db-shm and b/src/Apollinare.API/apollinare.db-shm differ
diff --git a/src/Apollinare.API/apollinare.db-wal b/src/Apollinare.API/apollinare.db-wal
index bcce40c..c42d95d 100644
Binary files a/src/Apollinare.API/apollinare.db-wal and b/src/Apollinare.API/apollinare.db-wal differ