hover box css fixes, docs

docs/WORKFLOWS.md

@@ -63,68 +63,8 @@ You can include multiple actions that should execute once the conditions are met
 
 # Examples
 
-Below you can find a couple of configuration examples.
+You can find a couple of configuration examples in [Workflow Examples](WORKFLOW_EXAMPLES.md).
 
-![Workflow example](./img/WORKFLOWS/workflows.png)
-
----
-
-## Example 1: Assign Device to Network Node Based on IP
-
-This workflow assigns newly added devices with IP addresses in the `192.168.1.*` range to the device with the MAC address `6c:6d:6d:6c:6c:6c`.
-
-### Trigger:
-- **Object Type**: `Devices`
-- **Event Type**: `insert`
-
-### Conditions:
-- **Logic**: `AND`
-  - `Field`: `devLastIP`
-  - `Operator`: `contains`
-  - `Value`: `192.168.1.`
-  
-  This condition ensures that the workflow only applies to devices with an IP address in the `192.168.1.*` range.
-
-### Actions:
-- **Action Type**: `update_field`
-  - **Field**: `devNetworkNode`
-  - **Value**: `6c:6d:6d:6c:6c:6c`
-
----
-
-## Example 2: Mark Device as Not New and Delete If from Google Vendor
-
-This workflow automates the process of marking Google devices as not new and deleting them if they meet the criteria.
-
-### Trigger:
-- **Object Type**: `Devices`
-- **Event Type**: `update`
-
-### Conditions:
-- **Logic**: `AND`
-  - `Field`: `devVendor`
-  - `Operator`: `contains`
-  - `Value`: `Google`
-  
-  This condition checks if the device's vendor is `Google`.
-
-- **Logic**: `AND`
-  - `Field`: `devIsNew`
-  - `Operator`: `equals`
-  - `Value`: `1`
-  
-  This ensures the workflow applies only to new devices.
-
-### Actions:
-1. **Action Type**: `update_field`
-   - **Field**: `devIsNew`
-   - **Value**: `0`
-
-   This action marks the device as no longer new.
-
-2. **Action Type**: `delete_device`
-   
-   This action deletes the device after it is marked as not new.
 
 > [!TIP]
 > Share your workflows in [Discord](https://discord.com/invite/NczTUTWyRr) or [GitHub Discussions](https://github.com/jokob-sk/NetAlertX/discussions).  

docs/WORKFLOW_EXAMPLES.md

@@ -2,7 +2,7 @@
 
 Workflows in NetAlertX automate actions based on real-time events and conditions. Below are practical examples that demonstrate how to build automation using triggers, conditions, and actions.
 
-## Un-archive devices if detected online
+## Example 1: Un-archive devices if detected online
 
 This workflow automatically unarchives a device if it was previously archived but has now been detected as online.
 
@@ -57,4 +57,129 @@ Sometimes devices are manually archived (e.g., no longer expected on the network
 
 ### ✅ Result
 
-Whenever a previously archived device shows up during a network scan, it will be automatically unarchived — allowing it to reappear in your device lists and dashboards.
+Whenever a previously archived device shows up during a network scan, it will be automatically unarchived — allowing it to reappear in your device lists and dashboards.
+
+
+Here is your updated version of **Example 2** and **Example 3**, fully aligned with the format and structure of **Example 1** for consistency and professionalism:
+
+---
+
+## Example 2: Assign Device to Network Node Based on IP
+
+This workflow assigns newly added devices with IP addresses in the `192.168.1.*` range to a specific network node with MAC address `6c:6d:6d:6c:6c:6c`.
+
+### 📋 Use Case
+
+When new devices join your network, assigning them to the correct network node is important for accurate topology and grouping. This workflow ensures devices in a specific subnet are automatically linked to the intended node.
+
+### ⚙️ Workflow Configuration
+
+```json
+{
+  "name": "Assign Device to Network Node Based on IP",
+  "trigger": {
+    "object_type": "Devices",
+    "event_type": "insert"
+  },
+  "conditions": [
+    {
+      "logic": "AND",
+      "conditions": [
+        {
+          "field": "devLastIP",
+          "operator": "contains",
+          "value": "192.168.1."
+        }
+      ]
+    }
+  ],
+  "actions": [
+    {
+      "type": "update_field",
+      "field": "devNetworkNode",
+      "value": "6c:6d:6d:6c:6c:6c"
+    }
+  ],
+  "enabled": "Yes"
+}
+```
+
+### 🔍 Explanation
+
+* **Trigger**: Activates when a new device is added.
+* **Condition**:
+
+  * `devLastIP` contains `192.168.1.` (matches subnet).
+* **Action**:
+
+  * Sets `devNetworkNode` to the specified MAC address.
+
+### ✅ Result
+
+New devices with IPs in the `192.168.1.*` subnet are automatically assigned to the correct network node, streamlining device organization and reducing manual work.
+
+---
+
+## Example 3: Mark Device as Not New and Delete If from Google Vendor
+
+This workflow automatically marks newly detected Google devices as not new and deletes them immediately.
+
+### 📋 Use Case
+
+You may want to automatically clear out newly detected Google devices (such as Chromecast or Google Home) if they’re not needed in your device database. This workflow handles that clean-up automatically.
+
+### ⚙️ Workflow Configuration
+
+```json
+{
+  "name": "Mark Device as Not New and Delete If from Google Vendor",
+  "trigger": {
+    "object_type": "Devices",
+    "event_type": "update"
+  },
+  "conditions": [
+    {
+      "logic": "AND",
+      "conditions": [
+        {
+          "field": "devVendor",
+          "operator": "contains",
+          "value": "Google"
+        },
+        {
+          "field": "devIsNew",
+          "operator": "equals",
+          "value": "1"
+        }
+      ]
+    }
+  ],
+  "actions": [
+    {
+      "type": "update_field",
+      "field": "devIsNew",
+      "value": "0"
+    },
+    {
+      "type": "delete_device"
+    }
+  ],
+  "enabled": "Yes"
+}
+```
+
+### 🔍 Explanation
+
+* **Trigger**: Runs on device updates.
+* **Conditions**:
+
+  * Vendor contains `Google`.
+  * Device is marked as new (`devIsNew` is `1`).
+* **Actions**:
+
+  1. Set `devIsNew` to `0` (mark as not new).
+  2. Delete the device.
+
+### ✅ Result
+
+Any newly detected Google devices are cleaned up instantly — first marked as not new, then deleted — helping you avoid clutter in your device records.

front/css/app.css

@@ -1739,9 +1739,19 @@ input[readonly] {
     float: left;
 }
 
+#hover-box .line
+{
+    float: left;
+    width: 100%;
+}
+
 #hover-box span
 {
     float: right;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: block;
+    max-width: 200px;
 }
 
 #networkTree .netCollapse

front/js/ui_components.js

@@ -810,7 +810,7 @@ function initSelect2() {
   {
     setTimeout(() => {
       initSelect2()
-    }, 700);
+    }, 1000);
   }  
 }
 
@@ -861,14 +861,28 @@ function initHoverNodeInfo() {
       const status =`<span class="badge ${badge.cssClass}">${badge.iconHtml} ${badge.status}</span>`
 
       const html = `
-        <b> <div class="iconPreview">${atob(icon)}</div> </b><b class="devName"> ${name}</b><br>
+        <div>
+          <b> <div class="iconPreview">${atob(icon)}</div> </b><b class="devName"> ${name}</b><br>
+        </div>
         <hr/>
-        <b>Status:</b> <span>${status}</span><br>
-        <b>IP:</b> <span>${ip}</span><br>
-        <b>MAC:</b> <span>${mac}</span><br>
-        <b>Vendor:</b> <span>${vendor}</span><br>
-        <b>Last seen:</b> <span>${lastseen}</span><br>
-        <b>Relationship:</b> <span class="${getRelationshipConf(relationship).cssClass}">${relationship}</span>
+        <div class="line">
+          <b>Status:</b> <span>${status}</span><br>
+        </div>
+        <div class="line">  
+          <b>IP:</b> <span>${ip}</span><br>
+        </div>
+        <div class="line">  
+          <b>MAC:</b> <span>${mac}</span><br>
+        </div>
+        <div class="line">  
+          <b>Vendor:</b> <span>${vendor}</span><br>
+        </div>
+        <div class="line">  
+          <b>Last seen:</b> <span>${lastseen}</span><br>
+        </div>
+        <div class="line">  
+          <b>Relationship:</b> <span class="${getRelationshipConf(relationship).cssClass}">${relationship}</span>
+        </div>
       `;
 
       $('#hover-box').html(html).fadeIn(150);