From a0ae92841ee2908f35dc15a9e43faafd20dc6a7e Mon Sep 17 00:00:00 2001
From: AddisonDunn <dunnaddisonw@gmail.com>
Date: Wed, 4 Sep 2024 10:37:47 -0400
Subject: [PATCH 1/9] remove data preview bar on mobile

---
 .../apps/cloudcare/static/cloudcare/js/debugger/debugger.js | 5 +++++
 .../cloudcare/static/cloudcare/js/form_entry/form_ui.js     | 4 ++++
 .../apps/cloudcare/static/cloudcare/js/form_entry/utils.js  | 3 +++
 corehq/apps/cloudcare/static/cloudcare/js/formplayer/app.js | 6 ++++++
 .../cloudcare/templates/cloudcare/partials/debugger.html    | 3 ++-
 .../templates/cloudcare/partials/form_entry/form.html       | 2 +-
 6 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/corehq/apps/cloudcare/static/cloudcare/js/debugger/debugger.js b/corehq/apps/cloudcare/static/cloudcare/js/debugger/debugger.js
index ea6b16230b1b..931941d82da4 100644
--- a/corehq/apps/cloudcare/static/cloudcare/js/debugger/debugger.js
+++ b/corehq/apps/cloudcare/static/cloudcare/js/debugger/debugger.js
@@ -82,6 +82,11 @@ hqDefine('cloudcare/js/debugger/debugger', [
         self.registeredTabIds = self.options.tabs;
         self.tabs = DebuggerTabs;
 
+        self.smallScreenIsEnabled = ko.observable(options.smallScreenIsEnabled);
+        $.subscribe('smallScreenIsEnabled', function (e, enabled) {
+            self.smallScreenIsEnabled(enabled);
+        });
+
         self.evalXPath = new EvaluateXPath(options);
         self.isMinimized = ko.observable(true);
 
diff --git a/corehq/apps/cloudcare/static/cloudcare/js/form_entry/form_ui.js b/corehq/apps/cloudcare/static/cloudcare/js/form_entry/form_ui.js
index 014f17112126..7071b2dd1d98 100644
--- a/corehq/apps/cloudcare/static/cloudcare/js/form_entry/form_ui.js
+++ b/corehq/apps/cloudcare/static/cloudcare/js/form_entry/form_ui.js
@@ -10,6 +10,7 @@ hqDefine("cloudcare/js/form_entry/form_ui", [
     'cloudcare/js/utils',
     'cloudcare/js/form_entry/const',
     'cloudcare/js/form_entry/entries',
+    'cloudcare/js/formplayer/users/models',
     'cloudcare/js/form_entry/utils',
     'jquery-tiny-pubsub/dist/ba-tiny-pubsub',       // $.pubsub
 ], function (
@@ -23,6 +24,7 @@ hqDefine("cloudcare/js/form_entry/form_ui", [
     cloudcareUtils,
     constants,
     entries,
+    UsersModels,
     formEntryUtils
 ) {
     var groupNum = 0;
@@ -462,6 +464,8 @@ hqDefine("cloudcare/js/form_entry/form_ui", [
         self.hasSubmitAttempted = ko.observable(false);
         self.isSubmitting = ko.observable(false);
         self.isAnchoredSubmitStyle = toggles.toggleEnabled('WEB_APPS_ANCHORED_SUBMIT');
+        self.isAppPreview = UsersModels.getCurrentUser().isAppPreview;
+        self.smallScreenIsEnabled = cloudcareUtils.smallScreenIsEnabled();
 
         self.currentIndex = ko.observable("0");
         self.atLastIndex = ko.observable(false);
diff --git a/corehq/apps/cloudcare/static/cloudcare/js/form_entry/utils.js b/corehq/apps/cloudcare/static/cloudcare/js/form_entry/utils.js
index a47e8d31dc3e..f5191562b7b3 100644
--- a/corehq/apps/cloudcare/static/cloudcare/js/form_entry/utils.js
+++ b/corehq/apps/cloudcare/static/cloudcare/js/form_entry/utils.js
@@ -6,6 +6,7 @@ hqDefine("cloudcare/js/form_entry/utils", [
     '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.min',
     'hqwebapp/js/initial_page_data',
     'hqwebapp/js/toggles',
+    'cloudcare/js/utils',
     'cloudcare/js/form_entry/const',
     'cloudcare/js/form_entry/errors',
     'cloudcare/js/formplayer/constants',
@@ -16,6 +17,7 @@ hqDefine("cloudcare/js/form_entry/utils", [
     MapboxGeocoder,
     initialPageData,
     toggles,
+    cloudcareUtils,
     formEntryConst,
     errors
 ) {
@@ -72,6 +74,7 @@ hqDefine("cloudcare/js/form_entry/utils", [
                     username: formJSON.username,
                     restoreAs: formJSON.restoreAs,
                     domain: formJSON.domain,
+                    smallScreenIsEnabled: cloudcareUtils.smallScreenIsEnabled(),
                 });
                 ko.cleanNode($debug[0]);
                 $debug.koApplyBindings(cloudCareDebugger);
diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/app.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/app.js
index b3af68d9694a..398e9bb2d931 100644
--- a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/app.js
+++ b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/app.js
@@ -396,6 +396,11 @@ hqDefine("cloudcare/js/formplayer/app", [
                 $('.last').removeClass('last');
             }
         );
+
+        self.smallScreenListener = CloudcareUtils.smallScreenListener(smallScreenEnabled => {
+            $.publish('smallScreenIsEnabled', smallScreenEnabled);
+        });
+        self.smallScreenListener.listen();
     });
 
     FormplayerFrontend.on('configureDebugger', function () {
@@ -424,6 +429,7 @@ hqDefine("cloudcare/js/formplayer/app", [
                 tabs: [
                     TabIDs.EVAL_XPATH,
                 ],
+                smallScreenIsEnabled: CloudcareUtils.smallScreenIsEnabled(),
             });
             ko.cleanNode($debug[0]);
             $debug.koApplyBindings(cloudCareDebugger);
diff --git a/corehq/apps/cloudcare/templates/cloudcare/partials/debugger.html b/corehq/apps/cloudcare/templates/cloudcare/partials/debugger.html
index 481d43f63b13..3da531d1a0dd 100644
--- a/corehq/apps/cloudcare/templates/cloudcare/partials/debugger.html
+++ b/corehq/apps/cloudcare/templates/cloudcare/partials/debugger.html
@@ -7,7 +7,8 @@
             'debugger-minimized': isMinimized,
             'debugger-maximized': !isMinimized(),
             'debugger-updating': updating
-        }
+        },
+        visible: !smallScreenIsEnabled(),
         ">
     <!-- Tab title -->
     <div class="debugger-tab-title clickable" tabindex="0"
diff --git a/corehq/apps/cloudcare/templates/cloudcare/partials/form_entry/form.html b/corehq/apps/cloudcare/templates/cloudcare/partials/form_entry/form.html
index 676af685c7b2..f388f0d90c2a 100644
--- a/corehq/apps/cloudcare/templates/cloudcare/partials/form_entry/form.html
+++ b/corehq/apps/cloudcare/templates/cloudcare/partials/form_entry/form.html
@@ -47,7 +47,7 @@ <h1 class="title" data-bind="text: title, visible: !showInFormNavigation()"></h1
               visible: showSubmitButton,
               css: { 'sticky-submit': isAnchoredSubmitStyle },
               style: {
-                'bottom':isAnchoredSubmitStyle && {{ request.couch_user.can_edit_data|yesno:'true,false' }} {% if environment != "web-apps" %} && false {% endif %} ? '30px' : '0' {# data preview bar #}
+                'bottom':isAnchoredSubmitStyle && !isAppPreview && !smallScreenIsEnabled && {{ request.couch_user.can_edit_data|yesno:'true,false' }}? '30px' : '0' {# data preview bar #}
               }"
       >
         <div class="col-12 text-center submit">

From 55be2efbe8a309fc70a2cc0ad4e328acfd664db9 Mon Sep 17 00:00:00 2001
From: AddisonDunn <dunnaddisonw@gmail.com>
Date: Fri, 13 Sep 2024 15:59:04 -0400
Subject: [PATCH 2/9] move content padding to more intentional place

---
 .../apps/cloudcare/templates/cloudcare/formplayer_home.html   | 4 ++--
 .../static/cloudcare/scss/formplayer-webapp/case-tile.scss    | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/corehq/apps/cloudcare/templates/cloudcare/formplayer_home.html b/corehq/apps/cloudcare/templates/cloudcare/formplayer_home.html
index 8035261e565e..9fd88555fc58 100644
--- a/corehq/apps/cloudcare/templates/cloudcare/formplayer_home.html
+++ b/corehq/apps/cloudcare/templates/cloudcare/formplayer_home.html
@@ -108,8 +108,8 @@
         <div id="persistent-case-tile" class="print-container"></div>
       </div>
       <div class="d-lg-flex">
-        <div id="sidebar-region" class="noprint-sub-container"></div>
-        <div id="content-container" class="container">
+        <div id="sidebar-region" class="noprint-sub-container mt-3"></div>
+        <div id="content-container" class="container mt-3">
           <div id="menu-region" class="print-container"></div>
           <section id="webforms" data-bind="
                     template: {
diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/case-tile.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/case-tile.scss
index 6d63815e77c0..7beffce423b2 100644
--- a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/case-tile.scss
+++ b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/case-tile.scss
@@ -79,7 +79,6 @@
   background: transparent !important;
   > div {
     background: white;
-    margin-bottom: 20px;
     display: grid;
     container-type: inline-size;
   }

From 842ad5c0f249cdc5500229a46452574e1327e150 Mon Sep 17 00:00:00 2001
From: AddisonDunn <dunnaddisonw@gmail.com>
Date: Wed, 18 Sep 2024 15:26:04 -0400
Subject: [PATCH 3/9] rename main container

---
 corehq/apps/cloudcare/static/cloudcare/js/utils.js             | 2 +-
 corehq/apps/cloudcare/templates/cloudcare/formplayer_home.html | 2 +-
 corehq/apps/cloudcare/templates/cloudcare/preview_app.html     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/corehq/apps/cloudcare/static/cloudcare/js/utils.js b/corehq/apps/cloudcare/static/cloudcare/js/utils.js
index d0036906e06f..cecfaa07384b 100644
--- a/corehq/apps/cloudcare/static/cloudcare/js/utils.js
+++ b/corehq/apps/cloudcare/static/cloudcare/js/utils.js
@@ -130,7 +130,7 @@ hqDefine('cloudcare/js/utils', [
 
     var getRegionContainer = function () {
         const RegionContainer = Marionette.View.extend({
-            el: "#menu-container",
+            el: "#main-container",
 
             regions: {
                 main: "#menu-region",
diff --git a/corehq/apps/cloudcare/templates/cloudcare/formplayer_home.html b/corehq/apps/cloudcare/templates/cloudcare/formplayer_home.html
index 9fd88555fc58..1edacacc2c69 100644
--- a/corehq/apps/cloudcare/templates/cloudcare/formplayer_home.html
+++ b/corehq/apps/cloudcare/templates/cloudcare/formplayer_home.html
@@ -82,7 +82,7 @@
 
   <div id="cloudcare-main" class="cloudcare-home-content">
     <section id="cases"></section>
-    <div id="menu-container">
+    <div id="main-container">
       <section id="formplayer-progress-container"></section>
       <nav class="navbar navbar-cloudcare">
         <div class="d-flex container-fluid">
diff --git a/corehq/apps/cloudcare/templates/cloudcare/preview_app.html b/corehq/apps/cloudcare/templates/cloudcare/preview_app.html
index 939f830bded7..0f8ee11b6cf7 100644
--- a/corehq/apps/cloudcare/templates/cloudcare/preview_app.html
+++ b/corehq/apps/cloudcare/templates/cloudcare/preview_app.html
@@ -54,7 +54,7 @@
   {% endif %}
 
   <section id="cases"></section>
-  <div id="menu-container">
+  <div id="main-container">
     <div id="formplayer-progress-container"></div>
     <section id="cloudcare-notifications" class="notifications-container"></section>
     <div id="restore-as-region"></div>

From 7e2b3c1254dcec9eeeffbf2343c3796408fedc15 Mon Sep 17 00:00:00 2001
From: AddisonDunn <dunnaddisonw@gmail.com>
Date: Wed, 18 Sep 2024 15:32:24 -0400
Subject: [PATCH 4/9] make toolbar heights accessible variables

---
 .../hqwebapp/static/cloudcare/scss/formplayer-webapp-main.scss  | 2 ++
 .../static/cloudcare/scss/formplayer-webapp/navbar.scss         | 2 --
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp-main.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp-main.scss
index cc250be74532..a06b18f603ee 100644
--- a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp-main.scss
+++ b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp-main.scss
@@ -11,6 +11,8 @@ formplayer, please make changes to the cloudcare styles.
 **/
 
 $breadcrumb-height-cloudcare: 36px;
+$cloudcare-nav-height: 30px;
+$minimized-debugger-height: 30px;
 
 @import "formplayer-webapp/content";
 @import "formplayer-webapp/navbar";
diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/navbar.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/navbar.scss
index 895b23ba92dc..426dc7e62f3c 100644
--- a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/navbar.scss
+++ b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/navbar.scss
@@ -1,5 +1,3 @@
-$cloudcare-nav-height: 30px;
-
 .navbar-cloudcare {
   margin-bottom: 0;
   border: none;

From fa979a845d2cfa14c711174f8b04d5240b09d73e Mon Sep 17 00:00:00 2001
From: AddisonDunn <dunnaddisonw@gmail.com>
Date: Wed, 18 Sep 2024 15:41:41 -0400
Subject: [PATCH 5/9] make persistent menu nav a sidebar on desktop but still
 an overlay on mobile

---
 .../cloudcare/js/formplayer/menus/views.js    | 39 ++++++++++++++-----
 .../partials/menu/persistent_menu.html        | 33 +++++++---------
 .../scss/formplayer-webapp/menu.scss          | 22 ++++++++---
 3 files changed, 62 insertions(+), 32 deletions(-)

diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js
index 186018c57155..4df98cbf7531 100644
--- a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js
+++ b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js
@@ -1546,9 +1546,39 @@ hqDefine("cloudcare/js/formplayer/menus/views", [
         events: {
             'click #app-main': 'onClickAppMain',
         },
+        handleSmallScreenChange: function (smallScreenEnabled) {
+            const offcanvas = 'offcanvas';
+            const collapse = 'collapse';
+            const containerDesktopClasses = collapse + ' show position-relative';
+            const containerMobileClasses = offcanvas + ' offcanvas-start';
+            if (smallScreenEnabled) {
+                $('#persistent-menu-container').removeClass(containerDesktopClasses);
+                $('#persistent-menu-container').addClass(containerMobileClasses);
+                $('#persistent-menu-arrow-toggle').attr('aria-expanded', false);
+                $('#close-button').removeAttr('data-bs-toggle');
+                $('#close-button').attr('data-bs-dismiss', offcanvas);
+                $('#persistent-menu-arrow-toggle').attr('data-bs-toggle', offcanvas);
+            } else {
+                $('#persistent-menu-container').removeClass(containerMobileClasses);
+                $('#persistent-menu-container').addClass(containerDesktopClasses);
+                $('#persistent-menu-arrow-toggle').attr('aria-expanded', true);
+                $('#close-button').removeAttr('data-bs-dismiss');
+                $('#close-button').attr('data-bs-toggle', collapse);
+                $('#persistent-menu-arrow-toggle').attr('data-bs-toggle', collapse);
+            }
+        },
+        initialize: function (options) {
+            self.smallScreenListener = cloudcareUtils.smallScreenListener(smallScreenEnabled => {
+                this.handleSmallScreenChange(smallScreenEnabled);
+            });
+            self.smallScreenListener.listen();
+        },
         onRender: function () {
             this.showChildView('menu', new PersistentMenuListView({collection: this.collection}));
         },
+        onDomRefresh: function () {
+            this.handleSmallScreenChange(cloudcareUtils.smallScreenIsEnabled());
+        },
         templateContext: function () {
             const appId = formplayerUtils.currentUrlToObject().appId,
                 currentApp = AppsAPI.getAppEntity(appId),
@@ -1562,15 +1592,6 @@ hqDefine("cloudcare/js/formplayer/menus/views", [
         onClickAppMain: function () {
             FormplayerFrontend.trigger("persistentMenuSelect");
         },
-        onBeforeDetach: function () {
-            // Be sure to hide offcanvas element so scroll works properly
-            const openedCanvas = bootstrap.Offcanvas.getInstance(
-                document.getElementById('persistent-menu-container')
-            );
-            if (openedCanvas) {
-                openedCanvas.hide();
-            }
-        },
     });
 
     return {
diff --git a/corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html b/corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html
index 00d61489c8c0..2b2fda62a7b0 100644
--- a/corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html
+++ b/corehq/apps/cloudcare/templates/cloudcare/partials/menu/persistent_menu.html
@@ -1,35 +1,32 @@
 {% load i18n %}
 
 <script type="text/template" id="persistent-menu-template">
-  <a type="button"
+  <a id="persistent-menu-arrow-toggle"
+     type="button"
      href="#"
      tabindex="1"
-     data-bs-toggle="offcanvas"
      data-bs-target="#persistent-menu-container"
-     aria-expanded="false"
+     aria-expanded="true"
      aria-controls="persistent-menu-container"
      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 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">
+  <div id="persistent-menu-container" class="bg-white h-100 position-relative overflow-scroll"
+    aria-labelledby="persistent-menu-label">
+    <button type="button" id="close-button" class="btn-close text-reset position-absolute"
+      data-bs-target="#persistent-menu-container" aria-label="Close"></button>
+    <h2 class="title position-relative me-4" id="persistent-menu-label">
       <% if (imageUri) { %>
         <i class="fcc persistent-menu-image align-self-start flex-shrink-0" aria-hidden="true"
-           style="background-image: url('<%- imageUri %>');"></i>
+            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>
+        <i class="fcc fcc-flower persistent-menu-image" 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 p-3" data-bs-dismiss="offcanvas" aria-label="Close"></button>
-    </div>
-    <div class="offcanvas-body persistent-menu-max-width">
-      <div id="persistent-menu-content" class="persistent-menu"></div>
-    </div>
+      <a id="app-main" class="align-middle stretched-link text-reset" href="#">
+        <%- appName %>
+      </a>
+    </h2>
+    <div id="persistent-menu-content" class="persistent-menu"></div>
   </div>
 </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
index 7d4db2897327..8d307ebbff5c 100644
--- a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/menu.scss
+++ b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/menu.scss
@@ -13,6 +13,22 @@
   padding-bottom: 6px;
 }
 
+.collapsing#persistent-menu-container {
+  @include media-breakpoint-up(sm) {
+    transition: none !important;
+  }
+}
+
+#persistent-menu-container {
+  padding: 1.5rem 1.5rem 2.5rem 2.5rem;
+  font-size: 14px;
+}
+
+#persistent-menu-container .btn-close {
+  right: 15px;
+  top: 15px;
+}
+
 .persistent-menu-toggle {
   color: white;
   background-color: $cc-brand-mid;
@@ -22,7 +38,7 @@
   }
 }
 
-$persistent-menu-image-size: 2rem;
+$persistent-menu-image-size: 3rem;
 
 .persistent-menu-image {
   height: $persistent-menu-image-size;
@@ -51,7 +67,3 @@ $persistent-menu-image-size: 2rem;
     background-color: darken($cc-bg, 5);
   }
 }
-
-.persistent-menu-max-width {
-    max-width: 400px;
-}

From 4319ec4886472f62b7bb9c4d28dbafa965ae4bbf Mon Sep 17 00:00:00 2001
From: AddisonDunn <dunnaddisonw@gmail.com>
Date: Wed, 18 Sep 2024 15:54:40 -0400
Subject: [PATCH 6/9] reorganize main layout so that main content container is
 'locked'

and so that the sidebar persistent menu and main content container can be seperately scrollable, similar to how they are in Jira
---
 .../templates/cloudcare/formplayer_home.html  | 32 +++++++++++--------
 .../cloudcare/scss/corehq_overrides.scss      |  4 +++
 .../cloudcare/scss/formplayer-common.scss     |  1 +
 .../scss/formplayer-webapp/content.scss       | 20 +++++++-----
 .../scss/formplayer-webapp/form.scss          |  1 -
 .../scss/formplayer-webapp/menu.scss          |  5 ++-
 .../scss/formplayer-webapp/module.scss        |  4 ---
 7 files changed, 39 insertions(+), 28 deletions(-)
 create mode 100644 corehq/apps/hqwebapp/static/cloudcare/scss/corehq_overrides.scss

diff --git a/corehq/apps/cloudcare/templates/cloudcare/formplayer_home.html b/corehq/apps/cloudcare/templates/cloudcare/formplayer_home.html
index 1edacacc2c69..15501d4fc3e8 100644
--- a/corehq/apps/cloudcare/templates/cloudcare/formplayer_home.html
+++ b/corehq/apps/cloudcare/templates/cloudcare/formplayer_home.html
@@ -82,7 +82,7 @@
 
   <div id="cloudcare-main" class="cloudcare-home-content">
     <section id="cases"></section>
-    <div id="main-container">
+    <div id="main-container" class="d-lg-flex flex-column">
       <section id="formplayer-progress-container"></section>
       <nav class="navbar navbar-cloudcare">
         <div class="d-flex container-fluid">
@@ -102,27 +102,31 @@
       <div class="d-lg-none">
         <div id="mobile-restore-as-region"></div>
       </div>
-      <div id="breadcrumb-region" class="print-container sticky-top"></div>
+      <div id="breadcrumb-region" class="print-container"></div>
       <section id="cloudcare-notifications" class="container notifications-container"></section>
       <div class="container case-tile-container">
         <div id="persistent-case-tile" class="print-container"></div>
       </div>
-      <div class="d-lg-flex">
-        <div id="sidebar-region" class="noprint-sub-container mt-3"></div>
-        <div id="content-container" class="container mt-3">
-          <div id="menu-region" class="print-container"></div>
-          <section id="webforms" data-bind="
-                    template: {
-                        name: 'form-fullform-ko-template',
-                        afterRender: afterRender
-                    }">
-          </section>
+      <div id="content-plus-persistent-menu-container" class="flex-grow-1 d-lg-flex">
+        <div id="persistent-menu-region"></div>
+        <div id="content-plus-version-info-container" class="h-100 flex-grow-1 overflow-scroll d-lg-flex-column">
+          <div id="sidebar-and-content" class="d-lg-flex justify-content-center m-3">
+            <div id="sidebar-region" class="noprint-sub-container me-3"></div>
+            <div id="content-container" class="mx-0 flex-grow-1">
+              <div id="menu-region" class="print-container"></div>
+              <section id="webforms" data-bind="
+                template: {
+                name: 'form-fullform-ko-template',
+                afterRender: afterRender
+                }">
+              </section>
+            </div>
+          </div>
+          <small id="version-info" class="pb-5"></small>
         </div>
       </div>
-      <div id="persistent-menu-region"></div>
     </div>
     <div role="region" id="sr-notification-region" class="sr-only" aria-live="assertive" aria-relevant="all"></div>
-    <small id="version-info"></small>
     {% if request.couch_user.can_edit_data %}
       <section data-bind="template: { name: 'instance-viewer-ko-template' }"
                id="cloudcare-debugger"></section>
diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/corehq_overrides.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/corehq_overrides.scss
new file mode 100644
index 000000000000..a694ed357f26
--- /dev/null
+++ b/corehq/apps/hqwebapp/static/cloudcare/scss/corehq_overrides.scss
@@ -0,0 +1,4 @@
+.hq-container {
+    padding-bottom: 0;
+    margin-bottom: 0;
+}
diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common.scss
index 05578f8c1263..2ca4102778ab 100644
--- a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common.scss
+++ b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-common.scss
@@ -5,3 +5,4 @@
 @import "mixins";   // media-breakpoint-up and media-breakpoint-down
 
 @import "formplayer-common-main";
+@import "corehq_overrides";
diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/content.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/content.scss
index f317b3519061..57ec11fa25c7 100644
--- a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/content.scss
+++ b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/content.scss
@@ -1,13 +1,12 @@
 body {
-  overflow-x: hidden;
+  overflow: hidden;
   background-color: $cc-bg;
 }
 
-.cloudcare-home-content {
-  padding: 0 0 2rem;
+#cloudcare-main, #main-container {
+  height: 100vh;
 }
 
-
 #hq-footer {
   display: none;
 }
@@ -35,8 +34,17 @@ body {
   padding: 14px 8px 7px;
 }
 
+#content-plus-persistent-menu-container {
+  height: calc(100vh - #{$cloudcare-nav-height});
+}
+
+.has-breadcrumbs #content-plus-persistent-menu-container {
+  height: calc(100vh - #{$cloudcare-nav-height} - $breadcrumb-height-cloudcare);
+}
+
 #content-container {
   background: transparent;
+  max-width: 1000px;
 }
 
 @media print {
@@ -52,10 +60,6 @@ body {
     display: none !important;
   }
 
-  #cloudcare-main {
-    padding: 0px;
-  }
-
   video {
     border: 1px solid #ddd;
   }
diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/form.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/form.scss
index f6ad084e69df..a7870ef9c2e1 100644
--- a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/form.scss
+++ b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/form.scss
@@ -4,7 +4,6 @@ $form-text-size: 16px; // If updating, update .checkbox, .radio margin-top to fi
 .form-container {
   background-color: white;
   box-shadow: 0 0 10px 2px rgba(0,0,0,.1);
-  margin-bottom: 2rem;
   font-size: $form-text-size;   // Don't overshadow inputs
 
   .page-header h1 {
diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/menu.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/menu.scss
index 8d307ebbff5c..6e5ca1c5d54f 100644
--- a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/menu.scss
+++ b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/menu.scss
@@ -6,13 +6,16 @@
 #menu-region .module-case-list-container {
   background-color: white;
   box-shadow: 0 0 10px 2px rgba(0,0,0,.1);
-  margin-bottom: 2rem;
 }
 
 #menu-region .module-menu-container {
   padding-bottom: 6px;
 }
 
+#persistent-menu-region > div {
+  height: 100%;
+}
+
 .collapsing#persistent-menu-container {
   @include media-breakpoint-up(sm) {
     transition: none !important;
diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/module.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/module.scss
index 1c0faf6c3286..d8264686cb7c 100644
--- a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/module.scss
+++ b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/module.scss
@@ -4,10 +4,6 @@
   }
 }
 
-.has-breadcrumbs .query-button-container {
-  top: $breadcrumb-height-cloudcare;
-}
-
 .query-button-container .btn{
   width: 48%;
 }

From a78a36552d94a39639f5651ac74a11a229c933bc Mon Sep 17 00:00:00 2001
From: AddisonDunn <dunnaddisonw@gmail.com>
Date: Wed, 18 Sep 2024 15:55:15 -0400
Subject: [PATCH 7/9] make breadcrumb bottom shadow a border instead

---
 .../templates/cloudcare/partials/menu/breadcrumbs.html          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/corehq/apps/cloudcare/templates/cloudcare/partials/menu/breadcrumbs.html b/corehq/apps/cloudcare/templates/cloudcare/partials/menu/breadcrumbs.html
index 7c3a2d46528a..01893b185760 100644
--- a/corehq/apps/cloudcare/templates/cloudcare/partials/menu/breadcrumbs.html
+++ b/corehq/apps/cloudcare/templates/cloudcare/partials/menu/breadcrumbs.html
@@ -7,7 +7,7 @@
 </script>
 
 <script type="text/template" id="breadcrumb-list-template">
-  <nav style="--bsbreadcrumb-divider: '\f054';" class="breadcrumb-nav shadow-sm" aria-label="Breadcrumb">
+  <nav style="--bsbreadcrumb-divider: '\f054';" class="breadcrumb-nav border-bottom" aria-label="Breadcrumb">
     <ol class="breadcrumb">
       <li class="js-home breadcrumb-item">
         <a href="#">{% trans 'Home' %}</a>

From 919ed4f5ae819524999762fb9bcfd6df54aed61a Mon Sep 17 00:00:00 2001
From: AddisonDunn <dunnaddisonw@gmail.com>
Date: Wed, 18 Sep 2024 15:57:06 -0400
Subject: [PATCH 8/9] remove form margins on mobile

---
 corehq/apps/cloudcare/static/cloudcare/js/formplayer/app.js | 2 ++
 .../static/cloudcare/scss/formplayer-webapp/content.scss    | 6 ++++++
 2 files changed, 8 insertions(+)

diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/app.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/app.js
index 398e9bb2d931..9569318a4134 100644
--- a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/app.js
+++ b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/app.js
@@ -140,6 +140,7 @@ hqDefine("cloudcare/js/formplayer/app", [
         FormplayerFrontend.trigger('setUnsavedFormNotInProgress');
         $('#webforms').html("");
         $('.menu-scrollable-container').removeClass("d-none");
+        $('#sidebar-and-content').removeClass('remove-padding-on-mobile');
         $('#webforms-nav').html("");
         $('#cloudcare-debugger').html("");
         $('.atwho-container').remove();
@@ -306,6 +307,7 @@ hqDefine("cloudcare/js/formplayer/app", [
         var sess = WebFormSession.WebFormSession(data);
         sess.renderFormXml(data, $('#webforms'));
         $('.menu-scrollable-container').addClass("d-none");
+        $('#sidebar-and-content').addClass('remove-padding-on-mobile');
     });
 
     FormplayerFrontend.on("start", function (model, options) {
diff --git a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/content.scss b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/content.scss
index 57ec11fa25c7..d7f5dad0bf65 100644
--- a/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/content.scss
+++ b/corehq/apps/hqwebapp/static/cloudcare/scss/formplayer-webapp/content.scss
@@ -42,6 +42,12 @@ body {
   height: calc(100vh - #{$cloudcare-nav-height} - $breadcrumb-height-cloudcare);
 }
 
+#sidebar-and-content.remove-padding-on-mobile {
+  @include media-breakpoint-down(sm) {
+    margin: 0 !important;
+  }
+}
+
 #content-container {
   background: transparent;
   max-width: 1000px;

From e775d4f4bb0160a0d5607460ae92f104e7a6d2af Mon Sep 17 00:00:00 2001
From: AddisonDunn <dunnaddisonw@gmail.com>
Date: Tue, 24 Sep 2024 16:04:11 -0400
Subject: [PATCH 9/9] keep menu closed between pages if user closed it

---
 .../static/cloudcare/js/formplayer/menus/views.js   | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js
index 4df98cbf7531..5998f6fedd7c 100644
--- a/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js
+++ b/corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views.js
@@ -1549,10 +1549,10 @@ hqDefine("cloudcare/js/formplayer/menus/views", [
         handleSmallScreenChange: function (smallScreenEnabled) {
             const offcanvas = 'offcanvas';
             const collapse = 'collapse';
-            const containerDesktopClasses = collapse + ' show position-relative';
+            const containerDesktopClasses = collapse + ' position-relative';
             const containerMobileClasses = offcanvas + ' offcanvas-start';
             if (smallScreenEnabled) {
-                $('#persistent-menu-container').removeClass(containerDesktopClasses);
+                $('#persistent-menu-container').removeClass(containerDesktopClasses + ' show');
                 $('#persistent-menu-container').addClass(containerMobileClasses);
                 $('#persistent-menu-arrow-toggle').attr('aria-expanded', false);
                 $('#close-button').removeAttr('data-bs-toggle');
@@ -1561,6 +1561,9 @@ hqDefine("cloudcare/js/formplayer/menus/views", [
             } else {
                 $('#persistent-menu-container').removeClass(containerMobileClasses);
                 $('#persistent-menu-container').addClass(containerDesktopClasses);
+                if (sessionStorage.showPersistentMenu !== 'false') {
+                    $('#persistent-menu-container').addClass('show');
+                }
                 $('#persistent-menu-arrow-toggle').attr('aria-expanded', true);
                 $('#close-button').removeAttr('data-bs-dismiss');
                 $('#close-button').attr('data-bs-toggle', collapse);
@@ -1578,6 +1581,12 @@ hqDefine("cloudcare/js/formplayer/menus/views", [
         },
         onDomRefresh: function () {
             this.handleSmallScreenChange(cloudcareUtils.smallScreenIsEnabled());
+            $('#persistent-menu-container').on('hidden.bs.collapse', function () {
+                sessionStorage.showPersistentMenu = false;
+            });
+            $('#persistent-menu-container').on('show.bs.collapse', function () {
+                sessionStorage.showPersistentMenu = true;
+            });
         },
         templateContext: function () {
             const appId = formplayerUtils.currentUrlToObject().appId,