From 5a6d650f904f48b1afd383abb36b8ba79063d4ec Mon Sep 17 00:00:00 2001
From: Lucio Lelii <lucio.lelii@isti.cnr.it>
Date: Wed, 30 Sep 2026 12:54:16 +0200
Subject: [PATCH] style(container): add identifying tab

---
 .../nodes/container-node/container-node.css   | 55 +++++++++++--------
 .../nodes/container-node/container-node.html  |  5 +-
 2 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/src/app/shared/nodes/container-node/container-node.css b/src/app/shared/nodes/container-node/container-node.css
index 58159ff..4011ef7 100644
--- a/src/app/shared/nodes/container-node/container-node.css
+++ b/src/app/shared/nodes/container-node/container-node.css
@@ -18,15 +18,28 @@
   overflow: visible;
 }
 
-/* A clearly separated inner contour makes Containers recognizable at a glance. */
-.container-node::before {
-  content: '';
+.container-node__tab {
   position: absolute;
-  inset: 4px;
-  z-index: 30;
-  border: 1px solid #cbd5e1;
-  border-radius: 12px;
-  pointer-events: none;
+  left: 14px;
+  bottom: 100%;
+  z-index: 31;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 23px;
+  padding: 0 10px;
+  border: 1px solid #99d8d0;
+  border-bottom: 0;
+  border-radius: 9px 9px 0 0;
+  background: #ecfdfb;
+  color: #0f766e;
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  line-height: 1;
+  text-transform: uppercase;
+  white-space: nowrap;
+  box-shadow: 0 -4px 10px rgba(15, 118, 110, 0.1);
 }
 
 .container-node__focus-backdrop {
@@ -146,8 +159,10 @@
   box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.24), 0 12px 28px rgba(15, 23, 42, 0.16);
 }
 
-:host.selected .container-node::before {
-  border-color: #93c5fd;
+:host.selected .container-node__tab {
+  border-color: #60a5fa;
+  background: #eff6ff;
+  color: #1d4ed8;
 }
 
 :host.validation-highlighted .container-node {
@@ -155,8 +170,10 @@
   box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18), 0 18px 38px rgba(127, 29, 29, 0.16);
 }
 
-:host.validation-highlighted .container-node::before {
-  border-color: #fca5a5;
+:host.validation-highlighted .container-node__tab {
+  border-color: #f87171;
+  background: #fff1f2;
+  color: #b91c1c;
 }
 
 .container-node__lane-chip {
@@ -165,10 +182,10 @@
   gap: 4px;
   margin-top: 2px;
   padding: 1px 7px;
-  border: 1px solid rgba(255, 255, 255, 0.5);
+  border: 1px solid #cbd5e1;
   border-radius: 999px;
-  background: rgba(255, 255, 255, 0.16);
-  color: rgba(255, 255, 255, 0.92);
+  background: #f8fafc;
+  color: #475569;
   font-size: 9px;
   font-weight: 700;
   letter-spacing: 0.02em;
@@ -208,14 +225,6 @@
   line-height: 1.25;
 }
 
-.container-node__eyebrow {
-  order: -1;
-  font-size: 11.5px;
-  font-weight: 500;
-  letter-spacing: 0;
-  color: #1d4ed8;
-}
-
 .container-node__name {
   font-size: 14px;
   font-weight: 600;
diff --git a/src/app/shared/nodes/container-node/container-node.html b/src/app/shared/nodes/container-node/container-node.html
index 8fc5fca..ae368b4 100644
--- a/src/app/shared/nodes/container-node/container-node.html
+++ b/src/app/shared/nodes/container-node/container-node.html
@@ -25,6 +25,10 @@
   @if (deleteConfirmOpen) {
   <div class="container-node__delete-overlay"></div>
   }
+  <div class="container-node__tab" aria-hidden="true">
+    <i class="bi bi-box-seam"></i>
+    <span>{{ containerLabel }}</span>
+  </div>
   <div class="container-node__header" [class.cursor-move]="!isReadonly">
     <div class="container-node__icon">
       @if (nodeIcon().type === 'class') {
@@ -34,7 +38,6 @@
       }
     </div>
     <div class="container-node__titles">
-      <div class="container-node__eyebrow">{{ containerLabel }}</div>
       <div class="container-node__name-row">
         <div class="container-node__name">{{ name }}</div>
         @if (!isReadonly) {