Add fallback clipboard copy and wrap content in layout container

frontend/app.js

@@ -6029,11 +6029,38 @@
     },
 
     _copyPath(path) {
-      navigator.clipboard.writeText(path).then(() => {
-        showToast(`Chemin copié : ${path}`, 'success');
-      }).catch(() => {
+      // Try modern clipboard API first, fall back to execCommand for non-secure contexts
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        navigator.clipboard.writeText(path).then(() => {
+          showToast(`Chemin copié : ${path}`, 'success');
+        }).catch(() => {
+          this._copyPathFallback(path);
+        });
+      } else {
+        this._copyPathFallback(path);
+      }
+    },
+
+    _copyPathFallback(path) {
+      const textarea = document.createElement('textarea');
+      textarea.value = path;
+      textarea.style.position = 'fixed';
+      textarea.style.left = '-9999px';
+      textarea.style.top = '-9999px';
+      document.body.appendChild(textarea);
+      textarea.focus();
+      textarea.select();
+      try {
+        const success = document.execCommand('copy');
+        if (success) {
+          showToast(`Chemin copié : ${path}`, 'success');
+        } else {
+          showToast('Erreur lors de la copie', 'error');
+        }
+      } catch (e) {
         showToast('Erreur lors de la copie', 'error');
-      });
+      }
+      document.body.removeChild(textarea);
     }
   };
 

frontend/index.html

@@ -348,13 +348,15 @@
       <!-- Sidebar resize handle -->
       <div class="sidebar-resize-handle" id="sidebar-resize-handle"></div>
 
-      <!-- Tab bar -->
-      <div class="tab-bar" id="tab-bar" hidden>
-        <div class="tab-list" id="tab-list"></div>
-      </div>
+      <!-- Content Wrapper (tab bar + content area) -->
+      <div class="content-wrapper">
+        <!-- Tab bar -->
+        <div class="tab-bar" id="tab-bar" hidden>
+          <div class="tab-list" id="tab-list"></div>
+        </div>
 
-      <!-- Content -->
-      <main class="content-area" id="content-area" aria-label="Contenu principal">
+        <!-- Content -->
+        <main class="content-area" id="content-area" aria-label="Contenu principal">
         <div id="dashboard-home" class="dashboard-home" role="region" aria-label="Tableau de bord">
           <!-- Bookmarks Section -->
           <div id="dashboard-bookmarks-section" class="dashboard-section">
@@ -406,6 +408,7 @@
           </div>
         </div>
       </main>
+      </div><!-- /content-wrapper -->
 
       <!-- Right sidebar resize handle -->
       <div class="right-sidebar-resize-handle" id="right-sidebar-resize-handle"></div>

frontend/style.css

@@ -1036,6 +1036,15 @@ select {
   pointer-events: none;
 }
 
+/* --- Content Wrapper (tabs + content) --- */
+.content-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+}
+
 /* --- Content Area --- */
 .content-area {
   flex: 1;
@@ -1049,7 +1058,7 @@ select {
 }
 
 /* Center content when sidebar is hidden */
-.sidebar.hidden ~ .content-area {
+.sidebar.hidden ~ .content-wrapper .content-area {
   margin: 0 auto;
   max-width: 1200px;
 }