let button overhang container and add span to expand click area

corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html

@@ -1,18 +1,22 @@
 {% load i18n %}
 
 <script type="text/template" id="persistent-menu-template">
-  <div id="persistent-menu-container" class="d-none d-lg-block bg-white h-100 position-absolute border-end border-dark-subtle border-1"
+  <div id="persistent-menu-container"
+    class="d-none d-lg-block bg-white h-100 position-absolute border-end border-dark-subtle border-1 overflow-visible"
     style="width: 30px;"
     aria-labelledby="persistent-menu-label">
     <button id="persistent-menu-arrow-toggle"
+      class="btn btn-md btn-outline-primary rounded-circle position-absolute top-50 d-flex justify-content-center align-items-center"
+      style="right: -18px;"
       role="button"
       aria-label="Expand Persistent Menu"
       tabindex="1"
       aria-expanded="true"
-      aria-controls="persistent-menu-container"
-      class="btn btn-outline-primary me-1 rounded-circle position-absolute top-50 end-0">
+      aria-controls="persistent-menu-container">
       <i class="fa fs-3 fa-chevron-right"></i>
-      <span></span>
+      <span class="position-absolute"
+        style="width: 60px; height: 60px;">
+      </span>
     </button>
     <div id="persistent-menu-container-content" class="d-none text-break">
       <h2 class="title position-relative me-4" id="persistent-menu-label">