Merge pull request #35123 from dimagi/ml/persistent-menu-whitespace

Get rid of extraneous white space from persistent menu navigation
dimagi · Sep 17, 2024 · 9749254 · 9749254
2 parents eae54b8 + eab4073
commit 9749254
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 19 deletions.
diff --git a/corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html b/corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html
@@ -11,40 +11,42 @@
      class="position-fixed top-50 start-0 rounded-end persistent-menu-toggle">
     <i class="fa fa-chevron-right"></i>
   </a>
-  <div id="persistent-menu-container" class="offcanvas offcanvas-start" tabindex="-1" aria-labelledby="persistent-menu-label">
-    <div class="offcanvas-header">
-      <h5 class="offcanvas-title position-relative" id="persistent-menu-label">
-        <% if (imageUri) { %>
-          <i class="fcc persistent-menu-image" aria-hidden="true"
-             style="background-image: url('<%- imageUri %>');"></i>
-        <% } else { %>
-          <i class="fcc fcc-flower persistent-menu-image" aria-hidden="true"></i>
-        <% } %>
-        <a id="app-main" class="align-middle stretched-link text-reset" href="#"
+  <div id="persistent-menu-container" class="offcanvas offcanvas-start w-auto" tabindex="-1" aria-labelledby="persistent-menu-label">
+    <div class="offcanvas-header persistent-menu-max-width d-flex align-items-center justify-content-between">
+      <% if (imageUri) { %>
+        <i class="fcc persistent-menu-image align-self-start flex-shrink-0" aria-hidden="true"
+           style="background-image: url('<%- imageUri %>');"></i>
+      <% } else { %>
+        <i class="fcc fcc-flower persistent-menu-image align-self-start flex-shrink-0" aria-hidden="true"></i>
+      <% } %>
+      <h5 class="offcanvas-title position-relative mx-2 flex-grow-1" id="persistent-menu-label">
+        <a id="app-main" class="stretched-link text-reset d-block" href="#"
            data-bs-toggle="offcanvas" data-bs-target="#persistent-menu-container">
           <%- appName %>
         </a>
       </h5>
-      <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      <button type="button" class="btn-close text-reset p-3" data-bs-dismiss="offcanvas" aria-label="Close"></button>
     </div>
-    <div class="offcanvas-body">
+    <div class="offcanvas-body persistent-menu-max-width">
       <div id="persistent-menu-content" class="persistent-menu"></div>
     </div>
   </div>
 </script>
 
 <script type="text/template" id="persistent-menu-item">
-  <div class="position-relative persistent-menu-item rounded">
+  <div class="position-relative persistent-menu-item rounded d-flex align-items-center">
     <% if (imageUri) { %>
-      <i class="fcc persistent-menu-image" aria-hidden="true"
+      <i class="fcc persistent-menu-image align-self-start flex-shrink-0" aria-hidden="true"
          style="background-image: url('<%- imageUri %>');"></i>
     <% } else { %>
-      <i class="fa <%- iconClass %> persistent-menu-image" aria-hidden="true"></i>
+      <i class="fa <%- iconClass %> persistent-menu-image align-self-start flex-shrink-0" aria-hidden="true"></i>
     <% } %>
-    <a class="align-middle stretched-link text-reset <%= isActive ? 'fw-bold' : '' %>" href="#"
-       data-bs-toggle="offcanvas" data-bs-target="#persistent-menu-container">
-      <%- displayText %>
-    </a>
+    <div class="mx-3 flex-grow-1">
+      <a class="d-block stretched-link text-reset <%= isActive ? 'fw-bold' : '' %>" href="#"
+         data-bs-toggle="offcanvas" data-bs-target="#persistent-menu-container">
+        <%- displayText %>
+      </a>
+    </div>
   </div>
   <ul></ul>
 </script>
diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/menu.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/menu.scss
@@ -51,3 +51,7 @@ $persistent-menu-image-size: 2rem;
     background-color: darken($cc-bg, 5);
   }
 }
+
+.persistent-menu-max-width {
+    max-width: 400px;
+}