From 5a6bc8936ef04cb1941bf7f68b86742e235aedab Mon Sep 17 00:00:00 2001
From: William Moore <w.moore@dundee.ac.uk>
Date: Mon, 8 Aug 2022 14:08:27 +0100
Subject: [PATCH] Only show legend-container above right panel when editing

---
 omero_figure/static/figure/css/figure.css | 2 +-
 src/js/views/legend_view.js               | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/omero_figure/static/figure/css/figure.css b/omero_figure/static/figure/css/figure.css
index 171f3e91b..003b87280 100644
--- a/omero_figure/static/figure/css/figure.css
+++ b/omero_figure/static/figure/css/figure.css
@@ -139,7 +139,7 @@
 
     /* -- Legend -- */
     .legend-container {
-        z-index: 100;
+        z-index: 1;
         position:fixed;
         bottom: 54px;
         width: 60%;
diff --git a/src/js/views/legend_view.js b/src/js/views/legend_view.js
index 680bd3b20..1b4fbf0fb 100644
--- a/src/js/views/legend_view.js
+++ b/src/js/views/legend_view.js
@@ -143,11 +143,14 @@ var LegendView = Backbone.View.extend({
                 var html = '<textarea class="form-control" rows="9" style="resize:none">'
                             + legendText + '</textarea>';
                 $legend.html(html);
+                // Show above the right-hand panel when editing
+                $(".legend-container").css("z-index", 100);
             } else {
                 // ...only show 'edit' button
                 $edit.show();
                 $save.hide();
                 $cancel.hide();
+                $(".legend-container").css("z-index", 1);
 
                 $panel.removeClass('editing');
                 if (legendText.length === 0) {