lesson css try

phase/Student_view/lesson.py

@@ -570,46 +570,41 @@ def _render_lesson():
         t_title, t_text = topics[topic_idx]
 
         st.markdown(f"""
-        <div class="lesson-card">
-            <div class="unit-header">
-                <span class="unit-info">Unit {topic_idx + 1} of {len(topics)}</span>
-                <div class="read-time">
-                    <span>🕐</span>
-                    <span>5-8 min read</span>
-                </div>
+    <div class="lesson-card">
+        <div class="unit-header">
+            <span class="unit-info">Unit {topic_idx + 1} of {len(topics)}</span>
+            <div class="read-time">
+                <span>🕐</span>
+                <span>5-8 min read</span>
             </div>
-            <div class="lesson-content">
-        """, unsafe_allow_html=True)
+        </div>
+        <div class="lesson-content">
+            {t_text.strip() if t_text else "<p>Content coming soon.</p>"}
+        </div>
+    """, unsafe_allow_html=True)
 
-        if t_text:
-            st.markdown(t_text.strip(), unsafe_allow_html=True)
+    # Conditionally render takeaways inside the card
+    if t_text:
+        takeaways = _extract_takeaways(t_text)
+        if takeaways:
+            st.markdown(f"""
+            <div class="takeaways-section">
+                <div class="takeaways-header">
+                    <span style="color: #10b981;">●</span>
+                    <span>Key Takeaways</span>
+                </div>
+                {''.join([
+                    f'<div class="takeaway-item"><span class="takeaway-check">✓</span><span>{tk}</span></div>'
+                    for tk in takeaways
+                ])}
+            </div>
+            </div> <!-- Closing lesson-card -->
+            """, unsafe_allow_html=True)
         else:
-            st.info("Content coming soon.")
-
-        st.markdown("</div>", unsafe_allow_html=True)
-
-        if t_text:
-            takeaways = _extract_takeaways(t_text)
-            if takeaways:
-                st.markdown("""
-                <div class="takeaways-section" style="min-height: 150px;">
-                    <div class="takeaways-header">
-                        <span style="color: #10b981;">●</span>
-                        <span>Key Takeaways</span>
-                    </div>
-                """, unsafe_allow_html=True)
-                
-                for takeaway in takeaways:
-                    st.markdown(f"""
-                    <div class="takeaway-item">
-                        <span class="takeaway-check">✓</span>
-                        <span>{takeaway}</span>
-                    </div>
-                    """, unsafe_allow_html=True)
-                
-                st.markdown("</div>", unsafe_allow_html=True)
+            st.markdown("</div>", unsafe_allow_html=True)  # Close .lesson-card
+    else:
+        st.markdown("</div>", unsafe_allow_html=True)  # Close .lesson-card if no takeaways
 
-        st.markdown("</div>", unsafe_allow_html=True)
 
         st.markdown('<div class="nav-buttons">', unsafe_allow_html=True)