From 7817a430a985e8bc887508b3e039357c8b44ddb4 Mon Sep 17 00:00:00 2001
From: object-Object <object@objectobject.ca>
Date: Fri, 29 Mar 2024 17:05:30 -0400
Subject: [PATCH] Improve appearance of pattern rendering dropdown

---
 .../_templates/index.css.jinja                |  6 +++
 .../hexcasting/manual_pattern.html.jinja      | 51 ++++++++++++-------
 2 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/doc/src/hexdoc_hexcasting/_templates/index.css.jinja b/doc/src/hexdoc_hexcasting/_templates/index.css.jinja
index d0bbb7d44..1f9481c35 100644
--- a/doc/src/hexdoc_hexcasting/_templates/index.css.jinja
+++ b/doc/src/hexdoc_hexcasting/_templates/index.css.jinja
@@ -70,4 +70,10 @@ img.spell-viz {
   cursor: pointer;
 }
 
+.spell-settings-dropdown {
+  position: absolute;
+}
 
+.spell-settings-toggle {
+  font-size: large;
+}
diff --git a/doc/src/hexdoc_hexcasting/_templates/pages/hexcasting/manual_pattern.html.jinja b/doc/src/hexdoc_hexcasting/_templates/pages/hexcasting/manual_pattern.html.jinja
index be5b09120..d0a92a613 100644
--- a/doc/src/hexdoc_hexcasting/_templates/pages/hexcasting/manual_pattern.html.jinja
+++ b/doc/src/hexdoc_hexcasting/_templates/pages/hexcasting/manual_pattern.html.jinja
@@ -3,29 +3,46 @@
 {% block inner_body %}
   <details class="details-collapsible">
     <summary class="collapse-details collapse-spell"></summary>
-    <li class="dropdown">
-      <a
-        href=""
-        class="dropdown-toggle"
-        data-toggle="dropdown"
-        role="button"
-        aria-haspopup="true"
-        aria-expanded="false"
-      >{{ _("hexdoc.renderer.renders")}} <span class="caret"></span></a>
-      <ul class="dropdown-menu dropdown-menu-left render-dropdowns"></ul>
-    </li>
 
-    <li class="dropdown">
-      <a
+    <div class="dropdown spell-settings-dropdown">
+      <span
         href=""
-        class="dropdown-toggle"
+        class="dropdown-toggle spell-settings-toggle"
         data-toggle="dropdown"
         role="button"
         aria-haspopup="true"
         aria-expanded="false"
-      >{{ _("hexdoc.renderer.palettes")}} <span class="caret"></span></a>
-      <ul class="dropdown-menu dropdown-menu-left palette-dropdowns"></ul>
-    </li>
+      >
+        <i class="bi bi-gear-fill"></i>
+      </span>
+
+      <ul class="dropdown-menu">
+        <li class="dropdown-submenu">
+          <a
+            href=""
+            class="dropdown-toggle"
+            data-toggle="dropdown"
+            role="button"
+            aria-haspopup="true"
+            aria-expanded="false"
+          >{{ _("hexdoc.renderer.renders")}}</a>
+          <ul class="dropdown-menu dropdown-menu-left render-dropdowns"></ul>
+        </li>
+
+        <li class="dropdown-submenu">
+          <a
+            href=""
+            class="dropdown-toggle"
+            data-toggle="dropdown"
+            role="button"
+            aria-haspopup="true"
+            aria-expanded="false"
+          >{{ _("hexdoc.renderer.palettes")}}</a>
+          <ul class="dropdown-menu dropdown-menu-left palette-dropdowns"></ul>
+        </li>
+      </ul>
+    </div>
+
     {% for pattern in page.patterns %}
       <canvas
         class="spell-viz"