place recycle link roughly where it will go in the cart.

patch an issue found with scrolling when modal open

src/iss-components/cart-dropdown/cart-dropdown.vue

@@ -16,6 +16,7 @@
         <div
             id="cart-table"
             class="cart-table">
+            <!-- Deductible Line Item -->
             <div
                 id="cart-deductible-or-base-price"
                 class="mt-4 cart-line-item color-gray-100 px-5 py-1">
@@ -38,22 +39,26 @@
                     <span id="base-price-value">{{ getDisplayed(baseServicePrice) }}</span>
                 </div>
             </div>
-            <!-- This next block of code will go inside the cart -->
-            <!-- *********************************************** -->
-            <br />
-            <textLink
-                linkType="text"
-                text="Recycling"
-                href="javascript:void(0)"
-                @clickEvent="openModal(recyclingModalCmsWidgetName)" />
-            <!-- *********************************************** -->
-            <!-- This block of code above, will go inside the cart -->
-            <contentGroupModal
-                ref="RecycleModal"
-                cmsWidgetName="RecycleModal">
-                <textBlock cmsWidgetName="RecycleTextBlock" />
-            </contentGroupModal>
+
+            <!-- Packaged Cart Items -->
+
+            <!-- Nonpackaged Cart Items -->
+            <!-- This will be a loop when this is implemented -->
+            <div class="non-packaged-cart-item">
+                <textLink
+                    linkType="text"
+                    text="Recycling"
+                    href="javascript:void(0)"
+                    @clickEvent="openModal(recyclingModalCmsWidgetName)" />
+            </div>
+
+            <!-- Sub total, sales tax, total columns -->
         </div>
+        <contentGroupModal
+            ref="RecycleModal"
+            cmsWidgetName="RecycleModal">
+            <textBlock cmsWidgetName="RecycleTextBlock" />
+        </contentGroupModal>
     </div>
 </template>
 
@@ -73,8 +78,9 @@ export default {
         textBlock,
         textLink },
     props: {
-        showAsPaid: Boolean,
-        amountDueLabel: String
+        amountDueLabel: String,
+        recyclingModalCmsWidgetName: String,
+        showAsPaid: Boolean
     },
     data() {
         const { currentDeductible } = useMainStore().order;

src/styles/common-styles.scss

@@ -78,6 +78,10 @@ body {
 
     // Prevent scroll when modal is open
     &.modal-open {
+        div.page-container-grouped-styles {
+            overflow: hidden;
+        }
+
         .fade-on-route-transition {
             overflow: hidden;
         }