fix: side peek des bases repasse en vanilla JS + largeur 1100px standard (v7.49.0)

- Panneau peek: les bindings Alpine (x-data absent du conteneur) rendaient
  loovverture et le redimensionnement inoperants -> cblage direct sur le document.
- Helper unique window.fdWirePeekResize (app.js): pointer capture, 300px-90vw,
  clic=fermer, largeur persiste fd_peek_width partagee entre les 4 peeks.
- database-table-container margin:0 (tableau colle a gauche, marge Library).
- .lib-container remonte dans app.css (trash etait pleine largeur), .db-index 1100px.
- ObsiGate verifie sans code: creation .xlsx OK (openpyxl, #186).

static/css/app.css

@@ -433,9 +433,12 @@ html.fd-sidebar-collapsed .editor-statusbar { left: 0; }
   padding: 6px 6px; margin: 0 2px;
 }
 .nav-icon-btn {
+  position: relative;
   display: flex; align-items: center; gap: 8px;
   padding: 6px; border-radius: 6px;
   color: var(--text-secondary); transition: background 0.15s, color 0.15s;
+  border: none; background: none; cursor: pointer; font-family: inherit;
+  text-decoration: none;
 }
 .nav-icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
 .nav-icon-btn.active { background: var(--bg-active); color: var(--text-primary); }
@@ -447,6 +450,91 @@ html.fd-sidebar-collapsed .editor-statusbar { left: 0; }
 /* Collapse button on the right */
 .nav-icon-btn.collapse-btn { margin-left: auto; }
 
+/* ── Collapsible tabs (Home / Chat / Meeting / Inbox) ──
+   The active tab expands into a pill showing icon + label, the inactive ones
+   collapse to the bare icon so the row stays compact. */
+.nav-tab-btn {
+  gap: 0;
+  padding: 6px;
+  min-width: 30px;
+  justify-content: center;
+  border-radius: 15px;
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.nav-tab-btn .nav-tab-label {
+  display: none;
+  max-width: 110px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.nav-tab-btn.active {
+  background: var(--bg-active);
+  color: var(--text-primary);
+  gap: 7px;
+  padding: 6px 12px 6px 10px;
+}
+.nav-tab-btn.active .nav-tab-label { display: inline-block; }
+.nav-tab-badge {
+  position: absolute;
+  top: -1px; right: -1px;
+  min-width: 15px; height: 15px;
+  padding: 0 4px;
+  border-radius: 8px;
+  background: var(--text-dim);
+  color: var(--bg-primary);
+  font-size: 10px; font-weight: 700; line-height: 15px;
+  text-align: center;
+}
+.nav-tab-badge-accent { background: #E03E3E; color: #fff; }
+.nav-tab-btn.active .nav-tab-badge { display: none; }
+
+/* Tab panels — one replaces the whole sidebar content at a time */
+.sidebar-tab-panel { display: flex; flex-direction: column; gap: 2px; }
+.sb-panel-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 6px 10px 4px;
+}
+.sb-panel-title { font-size: 12px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
+.sb-panel-count { color: var(--text-secondary); font-weight: 600; }
+.sb-panel-action {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 22px; height: 22px; padding: 0 5px;
+  border: none; border-radius: 5px; background: none;
+  color: var(--text-secondary); font-size: 11px; cursor: pointer;
+}
+.sb-panel-action:hover { background: var(--bg-hover); color: var(--text-primary); }
+.sb-filter-row { display: flex; gap: 4px; padding: 2px 8px 6px; }
+.sb-filter-chip {
+  padding: 3px 10px; border: 1px solid var(--border); border-radius: 12px;
+  background: none; color: var(--text-secondary);
+  font-size: 11px; cursor: pointer;
+}
+.sb-filter-chip.active { background: var(--bg-active); color: var(--text-primary); border-color: transparent; }
+.sb-quick-actions { display: flex; flex-direction: column; gap: 2px; padding: 2px 6px 8px; }
+.sb-quick-btn {
+  display: flex; align-items: center; gap: 8px;
+  padding: 5px 8px; border: none; border-radius: 6px; background: none;
+  color: var(--text-secondary); font-size: 12px; text-align: left; cursor: pointer;
+}
+.sb-quick-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
+.sb-hidden-input { display: none; }
+.sb-agent-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 10px; }
+.sb-agent-avatar {
+  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border);
+  background: var(--bg-hover); cursor: pointer; font-size: 15px; line-height: 1;
+  display: flex; align-items: center; justify-content: center;
+}
+.sb-agent-avatar:hover { border-color: var(--accent); }
+.sb-item-meta { margin-left: auto; font-size: 11px; color: var(--text-dim); flex-shrink: 0; }
+.sb-item-sub {
+  display: block; font-size: 11px; color: var(--text-dim);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.sb-item-unread { background: rgba(35, 131, 226, .10); }
+
 /* Empty hint */
 .sidebar-item.empty-hint { color: var(--text-dim); font-size: 12px; cursor: default; }
 .sidebar-item.empty-hint:hover { background: none; }
@@ -1042,6 +1130,11 @@ html.fd-sidebar-collapsed .editor-statusbar { left: 0; }
   min-width: 0;
 }
 
+/* Conteneur standard des pages listes (Library, Trash, …) — largeur unique
+   1100px, centrée. Défini ici (global) et non dans le <style> de
+   library.html, sinon /trash rendait la classe sans style = pleine largeur. */
+.lib-container{max-width:1100px;margin:0 auto;padding:20px 24px;}
+
 /* Topbar */
 .topbar {
   display: flex;
@@ -3779,11 +3872,14 @@ button.breadcrumb-current { max-width: 260px; }
    Database Table View (Notion-style)
    ═══════════════════════════════════════════════════════════ */
 
+/* Base = viewport du contenu ; les vues tabulaires larges (bases de
+   données) s'alignent à gauche, au ras de la marge, à la même largeur
+   que Library (1100px). */
 .database-table-container {
   width: 100%;
-  max-width: 100%;
-  padding: 0 96px;
-  margin-top: 24px;
+  max-width: 1100px;
+  margin: 0;
+  padding: 0 24px;
   box-sizing: border-box;
 }
 
@@ -4297,6 +4393,7 @@ button.breadcrumb-current { max-width: 260px; }
 /* ── Responsive ── */
 @media (max-width: 768px) {
   .database-table-container { padding: 0 16px; }
+  .db-side-peek { width: 100vw; max-width: 100vw; }
   .db-th-property { min-width: 120px; }
   .db-td-cell { min-width: 120px; }
 }
@@ -4304,22 +4401,27 @@ button.breadcrumb-current { max-width: 260px; }
 /* ── Database Side Peek Panel ── */
 .db-side-peek {
   position: fixed; top: 0; right: 0;
-  width: 560px; height: 100vh;
-  background: var(--bg-primary);
-  box-shadow: -4px 0 20px rgba(0,0,0,0.12);
-  z-index: 900;
+  width: 560px; max-width: 90vw; height: 100vh;
+  background: var(--bg-modal);
+  border-left: 1px solid var(--border);
+  box-shadow: -8px 0 32px rgba(0,0,0,0.25);
+  z-index: 500;
   display: flex; flex-direction: column;
+  transform: translateX(100%);
+  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1);
 }
-.db-side-peek-resize {
-  position: absolute; top: 0; left: 0;
-  width: 6px; height: 100%;
-  cursor: col-resize;
-  z-index: 2;
+.db-side-peek.open { transform: translateX(0); }
+/* Poignée partagée des side peeks (bases) — les autres peeks portent la
+   même géométrie en style en ligne. */
+.peek-resize-handle {
+  position: absolute; left: -4px; top: 0;
+  width: 8px; height: 100%; cursor: col-resize;
+  z-index: 501;
 }
-.db-side-peek-resize:hover { background: var(--accent, #2383E2); }
+.peek-resize-handle:hover { background: var(--accent, #2383E2); }
 .db-side-peek-header {
   display: flex; align-items: center; justify-content: space-between;
-  padding: 8px 12px; border-bottom: 1px solid var(--border);
+  padding: 12px 16px; border-bottom: 1px solid var(--border);
   flex-shrink: 0;
 }
 .db-side-peek-close, .db-side-peek-full {
@@ -4329,7 +4431,13 @@ button.breadcrumb-current { max-width: 260px; }
   font-size: 18px; color: var(--text-dim);
 }
 .db-side-peek-close:hover, .db-side-peek-full:hover { background: var(--bg-hover); }
-.db-side-peek iframe { flex: 1; }
+.db-side-peek-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
+.db-side-peek-loading { text-align: center; padding: 40px; color: var(--text-dim); }
+.db-side-peek iframe { flex: 1; min-height: 0; }
+
+@media (max-width: 768px) {
+  .db-side-peek { width: 100vw; max-width: 100vw; }
+}
 
 /* ─── Simple Table block (v4.8.0) ─── */
 .ftable-editor { flex: 1; min-width: 0; min-height: 0; padding: 4px 2px; }