added fiel tecnici tags additional 2 and fixed menu

public/userarea/production_tools.php

@@ -11,7 +11,6 @@
 
     <!-- jQuery, Bootstrap, DataTables, SweetAlert -->
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
     <link rel="stylesheet"
@@ -76,6 +75,68 @@
             font-weight: 600;
             padding: 10px 18px;
         }
+
+        /* Tabella attrezzature: colonne fisse, testo a capo, ridimensionabili */
+        #tabTools {
+            width: 100% !important;
+            table-layout: fixed;
+            font-size: .95rem;
+        }
+
+        #tabTools td {
+            white-space: normal !important;
+            overflow-wrap: anywhere;
+        }
+
+        /* Titoli: a capo solo tra le parole, mai a metà */
+        #tabTools th {
+            position: relative;
+            white-space: normal !important;
+            word-break: normal;
+            overflow-wrap: normal;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+
+        /* Maniglia per ridimensionare */
+        .col-resizer {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 7px;
+            height: 100%;
+            cursor: col-resize;
+            user-select: none;
+            z-index: 2;
+        }
+
+        .col-resizer:hover,
+        .col-resizer.resizing {
+            background: rgba(13, 110, 253, .35);
+        }
+
+        /* Lineetta sempre visibile tra i titoli */
+        .col-resizer::after {
+            content: "";
+            position: absolute;
+            top: 20%;
+            bottom: 20%;
+            right: 3px;
+            width: 2px;
+            border-radius: 2px;
+            background: #cbd5e1;
+        }
+
+        .col-resizer:hover::after,
+        .col-resizer.resizing::after {
+            background: #0d6efd;
+        }
+
+        body.col-resizing {
+            cursor: col-resize;
+            user-select: none;
+        }
     </style>
 </head>
 
@@ -298,11 +359,15 @@
             </div>
         </div>
     </div>
-
+    <?php include('jsinclude.php'); ?>
     <script>
         $(document).ready(function() {
 
             $('#tabTools').DataTable({
+                autoWidth: false,
+                initComplete: function() {
+                    initColResize();
+                },
                 order: [
                     [0, 'asc']
                 ],
@@ -312,6 +377,104 @@
                 }
             });
 
+            // ↔️ COLONNE RIDIMENSIONABILI (salvate nel browser, doppio clic = ripristina)
+            function initColResize() {
+                const table = document.getElementById("tabTools");
+                const ths = Array.from(table.querySelectorAll("thead th"));
+                const KEY = "tabTools_colWidths_v2";
+                const MIN = 50;
+                let justResized = false;
+
+                // Nome, N.Reg, N.Seriale, Tipo, Produttore, Descrizione, Stato, Azioni (totale 100)
+                const DEFAULT = [30, 10, 10, 10, 10, 16, 8, 6];
+
+                function applyPct(pcts) {
+                    ths.forEach((th, i) => th.style.width = pcts[i] + "%");
+                }
+
+                applyPct(DEFAULT);
+
+                try {
+                    const saved = JSON.parse(localStorage.getItem(KEY) || "null");
+                    if (Array.isArray(saved) && saved.length === ths.length) applyPct(saved);
+                } catch (e) {}
+
+                function savePct() {
+                    const total = ths.reduce((s, th) => s + th.offsetWidth, 0);
+                    const pcts = ths.map(th => +(th.offsetWidth / total * 100).toFixed(2));
+                    applyPct(pcts);
+                    try {
+                        localStorage.setItem(KEY, JSON.stringify(pcts));
+                    } catch (e) {}
+                }
+
+                // Evita che il rilascio del mouse dopo il trascinamento faccia ordinare la colonna
+                table.querySelector("thead").addEventListener("click", function(e) {
+                    if (justResized) {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        justResized = false;
+                    }
+                }, true);
+
+                ths.forEach((th, i) => {
+                    if (i === ths.length - 1) return; // l'ultima colonna non ha maniglia
+
+                    const handle = document.createElement("div");
+                    handle.className = "col-resizer";
+                    handle.title = "Trascina per allargare · doppio clic per ripristinare";
+                    th.appendChild(handle);
+
+                    handle.addEventListener("click", e => e.stopPropagation());
+
+                    handle.addEventListener("dblclick", e => {
+                        e.stopPropagation();
+                        try {
+                            localStorage.removeItem(KEY);
+                        } catch (err) {}
+                        applyPct(DEFAULT);
+                    });
+
+                    handle.addEventListener("mousedown", e => {
+                        e.preventDefault();
+                        e.stopPropagation();
+
+                        const next = ths[i + 1];
+                        const widths = ths.map(t => t.offsetWidth);
+                        ths.forEach((t, j) => t.style.width = widths[j] + "px");
+
+                        const startX = e.pageX;
+                        const startW = widths[i];
+                        const startN = widths[i + 1];
+
+                        handle.classList.add("resizing");
+                        document.body.classList.add("col-resizing");
+
+                        function onMove(ev) {
+                            let d = ev.pageX - startX;
+                            d = Math.max(MIN - startW, Math.min(startN - MIN, d));
+                            th.style.width = (startW + d) + "px";
+                            next.style.width = (startN - d) + "px";
+                        }
+
+                        function onUp() {
+                            document.removeEventListener("mousemove", onMove);
+                            document.removeEventListener("mouseup", onUp);
+                            handle.classList.remove("resizing");
+                            document.body.classList.remove("col-resizing");
+                            justResized = true;
+                            setTimeout(() => {
+                                justResized = false;
+                            }, 0);
+                            savePct();
+                        }
+
+                        document.addEventListener("mousemove", onMove);
+                        document.addEventListener("mouseup", onUp);
+                    });
+                });
+            }
+
             // ➕ ADD TOOL
             $("#addToolForm").on("submit", function(e) {
                 e.preventDefault();