From 053e43d53abecae6aab2e051c4bfb14a5fdd8036 Mon Sep 17 00:00:00 2001
From: Pierre-Charles David <pierre-charles.david@obeo.fr>
Date: Wed, 21 Feb 2024 15:50:49 +0100
Subject: [PATCH] [3141] Make the header of portal-embedded representations
 sticky

Bug: https://github.com/eclipse-sirius/sirius-web/issues/3141
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>
---
 CHANGELOG.adoc                                            | 1 +
 .../src/representations/RepresentationFrame.tsx           | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index 5170d336c5..7d1b56f901 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -126,6 +126,7 @@ image:doc/screenshots/showDeletionConfirmation.png[Deletion Confirmation Dialog,
 - https://github.com/eclipse-sirius/sirius-web/issues/2480[#2480] [diagram] Merge the rectangle node and the image node into FreeFormNode.
 - https://github.com/eclipse-sirius/sirius-web/issues/3079[#3079] [deck] Add a name attribute on CardDescription and LaneDescription
 - https://github.com/eclipse-sirius/sirius-web/issues/3019[#3019] [sirius-web] Improve the new architecture to let product builders reuse Sirius Web
+- https://github.com/eclipse-sirius/sirius-web/issues/3141[#3141] [portal] Make the header of embedded representations sticky so that it (and its icon) are always visible.
 
 == v2024.1.0
 
diff --git a/packages/portals/frontend/sirius-components-portals/src/representations/RepresentationFrame.tsx b/packages/portals/frontend/sirius-components-portals/src/representations/RepresentationFrame.tsx
index e129240d2e..d9cc3bf3e6 100644
--- a/packages/portals/frontend/sirius-components-portals/src/representations/RepresentationFrame.tsx
+++ b/packages/portals/frontend/sirius-components-portals/src/representations/RepresentationFrame.tsx
@@ -38,11 +38,18 @@ const useFrameStyles = makeStyles((theme) => ({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
+    position: 'sticky',
+    top: 0,
+    zIndex: 1,
   },
   title: {
     marginLeft: theme.spacing(1),
     flexGrow: 1,
   },
+  removeIcon: {
+    position: 'sticky',
+    right: 0,
+  },
 }));
 
 export const RepresentationFrame = ({
@@ -71,6 +78,7 @@ export const RepresentationFrame = ({
           {portalMode === 'edit' ? (
             <IconButton
               aria-label="remove"
+              className={classes.removeIcon}
               onClick={(e) => {
                 e.preventDefault();
                 onDelete();