Update app.py

app.py

@@ -55,17 +55,26 @@ st.markdown(
         background-color:#FFB6C1;
         border: 2px solid black;
         border-radius: 8px;
-        padding: 5px;
-        margin: 5px;
+        padding: 10px 15px;
+        margin: 5px 10px;
+        text-align: center;
+        font-size: 18px;
+        color: black;
+    }
+    .info-container {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 20px;
+    }
+    .center-title {
         text-align: center;
-        width: auto;
     }
     </style>
     """,
     unsafe_allow_html=True,
 )
 
-st.title("🌟 Gradient Descent Interactive Tool 🌟")
+st.markdown("""<h1 class="center-title">🌟 Gradient Descent Interactive Tool 🌟</h1>""", unsafe_allow_html=True)
 
 col1, col2 = st.columns([1, 2])
 
@@ -172,7 +181,7 @@ with col2:
                 bordercolor="#001A6E",
                 borderwidth=2
             ),
-            margin=dict(l=10, r=80, t=10, b=10),
+            margin=dict(l=10, r=100, t=10, b=10),  # Increase right margin here
             width=800,
             height=400,
             showlegend=True
@@ -185,11 +194,13 @@ with col2:
 
 st.markdown(
     f"""
-    <div class="info-box">
-        🧑‍💻 Iteration: {st.session_state.iteration}
-    </div>
-    <div class="info-box">
-        📍 Current Point: ({st.session_state.x:.4f}, {st.session_state.y_vals[-1]:.4f})
+    <div class="info-container">
+        <div class="info-box">
+            🧑‍💻 Iteration: {st.session_state.iteration}
+        </div>
+        <div class="info-box">
+            📍 Current Point: ({st.session_state.x:.4f}, {st.session_state.y_vals[-1]:.4f})
+        </div>
     </div>
     """,
     unsafe_allow_html=True,