Update app.py

app.py

@@ -286,15 +286,12 @@ button {
 </script>
 """
 def app():
-    with gr.Blocks() as demo:
-        gr.HTML("""
-            <script>
-                function scrollToTop() {
-                    window.scrollTo(0, 0); // Reset the scroll position to the top of the page
-                }
-            </script>
-        """)
-
+    with gr.Blocks(css="""
+        #cart-section { 
+            height: 760px; /* Fixed height for the Cart Page */
+            overflow-y: auto; /* Enable scrolling if content exceeds height */
+        }
+    """) as demo:
         # Login Page
         with gr.Column(visible=True) as login_section:
             gr.Markdown("# Login Page")
@@ -374,7 +371,7 @@ def app():
             gr.HTML(modal_and_cart_js)
 
         # Cart & Final Order Page
-        with gr.Column(visible=False) as cart_section:
+        with gr.Column(visible=False, elem_id="cart-section") as cart_section:
             gr.Markdown("### Cart & Final Order Page")
 
             # Floating cart display
@@ -417,20 +414,6 @@ def app():
             lambda: (gr.update(visible=False), gr.update(visible=True)),
             outputs=[menu_section, cart_section],
         )
-        # Inject Scroll-to-Top Trigger
-        gr.HTML("""
-            <script>
-                // Listen for view cart button click and reset scroll position
-                const viewCartButton = document.querySelector('button:contains("View Cart")');
-                if (viewCartButton) {
-                    viewCartButton.addEventListener("click", () => {
-                        setTimeout(() => {
-                            scrollToTop(); // Reset scroll position when transitioning to Cart Page
-                        }, 100); // Ensure transition happens before scrolling
-                    });
-                }
-            </script>
-        """)
         # Navigate Back to Menu Page
         back_to_menu_button.click(
             lambda: (gr.update(visible=True), gr.update(visible=False)),