From c1a5b6760381c6ff053655e52ed7eb7736d3d412 Mon Sep 17 00:00:00 2001
From: Robin Scholtes <robin@theweirdscience.com>
Date: Mon, 17 Apr 2023 13:28:14 +1200
Subject: [PATCH] Set favourites icon in pane controls following a consistent
 template pattern

---
 src/web/App.mjs                            |  3 ---
 src/web/html/index.html                    | 19 ++++++++++++-------
 src/web/stylesheets/layout/_banner.css     |  2 +-
 src/web/stylesheets/layout/_operations.css |  6 +-----
 src/web/stylesheets/layout/_structure.css  |  1 +
 5 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/web/App.mjs b/src/web/App.mjs
index 5db558b7c..6963f7793 100755
--- a/src/web/App.mjs
+++ b/src/web/App.mjs
@@ -252,9 +252,6 @@ class App {
      * @fires Manager#oplistcreate
      */
     populateOperationsList() {
-        // Move edit button away before we overwrite it
-        document.body.appendChild(document.getElementById("edit-favourites"));
-
         let html = "";
         let i;
 
diff --git a/src/web/html/index.html b/src/web/html/index.html
index db8b21b82..0668a1fd1 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -179,21 +179,26 @@
                         <span class="desktop-only">About / Support</span>
                         <i class="material-icons">help</i>
                     </a>
-<!--                    @TODO:-->
-<!--                    <button type="button" class="btn btn-warning bmd-btn-icon" id="edit-favourites" data-toggle="tooltip" title="Edit favourites">-->
-<!--                        <i class="material-icons">star</i>-->
-<!--                    </button>-->
                 </div>
             </div>
 
             <div id="workspace-wrapper">
                 <!--operations-->
-                <div id="operations" class="no-select">
+                <div id="operations"
+                     class="no-select">
                     <div class="title no-select"
                          data-help-title="Operations list"
-                         data-help="<p>The Operations list contains all the operations in CyberChef arranged into
-                         categories. Some operations may be present in multiple categories. You can search for operations using the search box.</p><p>To use an operation, either double click it, or drag it into the Recipe pane. You will then be able to configure its arguments (or 'Ingredients' in CyberChef terminology).</p>">
+                         data-help="<p>The Operations list contains all the operations in CyberChef arranged into categories. Some operations may be present in multiple categories. You can search for operations using the search box.</p><p>To use an operation, either double click it, or drag it into the Recipe pane. You will then be able to configure its arguments (or 'Ingredients' in CyberChef terminology).</p>">
                         Operations
+                        <span class="pane-controls hide-on-maximised-output">
+                            <button type="button"
+                                    class="btn btn-warning bmd-btn-icon"
+                                    id="edit-favourites"
+                                    data-toggle="tooltip"
+                                    title="Edit favourites">
+                                <i class="material-icons">star</i>
+                            </button>
+                        </span>
                     </div>
                     <input id="search"
                            type="search"
diff --git a/src/web/stylesheets/layout/_banner.css b/src/web/stylesheets/layout/_banner.css
index b614533c2..ff5025c5a 100755
--- a/src/web/stylesheets/layout/_banner.css
+++ b/src/web/stylesheets/layout/_banner.css
@@ -15,7 +15,7 @@
     color: var(--banner-font-colour);
     background-color: var(--banner-bg-colour);
     margin: 0;
-    /* flex is applied through .row */
+    /* flex is applied through .row on the banner element */
     justify-content: space-between;
 }
 
diff --git a/src/web/stylesheets/layout/_operations.css b/src/web/stylesheets/layout/_operations.css
index 1766f6dc1..6adacf62c 100755
--- a/src/web/stylesheets/layout/_operations.css
+++ b/src/web/stylesheets/layout/_operations.css
@@ -20,11 +20,6 @@
         linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
 }
 
-/*#edit-favourites {*/
-/*    float: right;*/
-/*    margin-top: -7px;*/
-/*}*/
-
 .favourites-hover {
     color: var(--rec-list-operation-font-colour);
     background-color: var(--rec-list-operation-bg-colour);
@@ -42,3 +37,4 @@
     filter: brightness(98%);
 }
 
+
diff --git a/src/web/stylesheets/layout/_structure.css b/src/web/stylesheets/layout/_structure.css
index 78607ae66..01702f9cb 100755
--- a/src/web/stylesheets/layout/_structure.css
+++ b/src/web/stylesheets/layout/_structure.css
@@ -37,6 +37,7 @@ body {
     height: 20vh;
 }
 
+#operations .title,
 #recipe .title,
 #input .title,
 #output .title {