fix news UI

app/components/news.py

@@ -161,24 +161,16 @@ def display_scrollable_news_section(df: pd.DataFrame, section_title: str, sectio
         """, unsafe_allow_html=True)
         return
 
-    # Build header HTML
-    header_html = f"""
-    <div style="
-        background: linear-gradient(135deg, #2A2E39 0%, #1E222D 100%);
-        border: 1px solid #363A45;
-        border-radius: 8px 8px 0 0;
-        padding: 16px 20px;
-        margin-bottom: 0;
-    ">
-        <div style="display: flex; justify-content: space-between; align-items: center;">
-            <div>
-                <h3 style="color: #D1D4DC; margin: 0; font-size: 18px; font-weight: 600;">{section_icon} {section_title}</h3>
-                <p style="color: #787B86; margin: 4px 0 0 0; font-size: 12px;">{section_subtitle}</p>
-            </div>
-            <div style="background: rgba(56, 97, 251, 0.15); color: #3861FB; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 600;">{len(df.head(max_items))} stories</div>
-        </div>
-    </div>
-    """
+    # Build header HTML (no leading whitespace)
+    header_html = f"""<div style="background: linear-gradient(135deg, #2A2E39 0%, #1E222D 100%); border: 1px solid #363A45; border-radius: 8px 8px 0 0; padding: 16px 20px; margin-bottom: 0;">
+<div style="display: flex; justify-content: space-between; align-items: center;">
+<div>
+<h3 style="color: #D1D4DC; margin: 0; font-size: 18px; font-weight: 600;">{section_icon} {section_title}</h3>
+<p style="color: #787B86; margin: 4px 0 0 0; font-size: 12px;">{section_subtitle}</p>
+</div>
+<div style="background: rgba(56, 97, 251, 0.15); color: #3861FB; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 600;">{len(df.head(max_items))} stories</div>
+</div>
+</div>"""
 
     # Render header
     st.markdown(header_html, unsafe_allow_html=True)
@@ -213,55 +205,57 @@ def display_scrollable_news_section(df: pd.DataFrame, section_title: str, sectio
 
         sentiment_symbol = '▲' if news_item['sentiment'] == 'positive' else '▼' if news_item['sentiment'] == 'negative' else '●'
 
-        # Build card HTML
-        news_cards_html += f"""
-        <div style="background: linear-gradient(135deg, #1E222D 0%, #131722 100%); border: 1px solid #2A2E39; border-radius: 8px; padding: 16px; margin-bottom: 12px; transition: all 0.2s ease; cursor: pointer; position: relative; overflow: hidden;" onmouseover="this.style.borderColor='#3861FB'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 12px rgba(56, 97, 251, 0.15)';" onmouseout="this.style.borderColor='#2A2E39'; this.style.transform='translateY(0)'; this.style.boxShadow='none';">
-            <div style="position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: {impact_color};"></div>
-            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; margin-left: 8px;">
-                <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
-                    <span style="color: #3861FB; font-weight: 600; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;">{source}</span>
-                    <span style="background: {impact_color}; color: white; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px;">{news_item['impact'].upper()}</span>
-                    <span style="color: {sentiment_color}; font-size: 11px; font-weight: 600; padding: 2px 6px; border: 1px solid {sentiment_color}; border-radius: 4px;">{sentiment_symbol} {news_item['sentiment'].upper()}</span>
-                    <span style="color: #787B86; font-size: 11px; background: rgba(120, 123, 134, 0.1); padding: 2px 6px; border-radius: 4px;">#{category}</span>
-                </div>
-                <span style="color: #787B86; font-size: 11px; white-space: nowrap;">{time_ago}</span>
-            </div>
-            <div style="color: #D1D4DC; font-size: 14px; line-height: 1.5; margin-bottom: 8px; margin-left: 8px; font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;">{summary}</div>
-            <a href="{url}" target="_blank" style="color: #3861FB; font-size: 12px; text-decoration: none; margin-left: 8px; display: inline-flex; align-items: center; gap: 4px; font-weight: 500;" onmouseover="this.style.color='#5880FF';" onmouseout="this.style.color='#3861FB';">Read Full Story →</a>
-        </div>
-        """
-
-    # Render scrollable container with all news cards using st.markdown
-    scrollable_html = f"""
-    <style>
-    .news-scroll-container {{
-        height: {height};
-        overflow-y: auto;
-        background: #0D0E13;
-        border: 1px solid #2A2E39;
-        border-top: none;
-        border-radius: 0 0 8px 8px;
-        padding: 16px;
-    }}
-    .news-scroll-container::-webkit-scrollbar {{
-        width: 8px;
-    }}
-    .news-scroll-container::-webkit-scrollbar-track {{
-        background: #1E222D;
-        border-radius: 4px;
-    }}
-    .news-scroll-container::-webkit-scrollbar-thumb {{
-        background: #363A45;
-        border-radius: 4px;
-    }}
-    .news-scroll-container::-webkit-scrollbar-thumb:hover {{
-        background: #434651;
-    }}
-    </style>
-    <div class="news-scroll-container">
-    {news_cards_html}
-    </div>
-    """
+        # Build card HTML (no leading whitespace)
+        news_cards_html += f"""<div style="background: linear-gradient(135deg, #1E222D 0%, #131722 100%); border: 1px solid #2A2E39; border-radius: 8px; padding: 16px; margin-bottom: 12px; transition: all 0.2s ease; cursor: pointer; position: relative; overflow: hidden;" onmouseover="this.style.borderColor='#3861FB'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 4px 12px rgba(56, 97, 251, 0.15)';" onmouseout="this.style.borderColor='#2A2E39'; this.style.transform='translateY(0)'; this.style.boxShadow='none';">
+<div style="position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: {impact_color};"></div>
+<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; margin-left: 8px;">
+<div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
+<span style="color: #3861FB; font-weight: 600; font-size: 13px; font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;">{source}</span>
+<span style="background: {impact_color}; color: white; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px;">{news_item['impact'].upper()}</span>
+<span style="color: {sentiment_color}; font-size: 11px; font-weight: 600; padding: 2px 6px; border: 1px solid {sentiment_color}; border-radius: 4px;">{sentiment_symbol} {news_item['sentiment'].upper()}</span>
+<span style="color: #787B86; font-size: 11px; background: rgba(120, 123, 134, 0.1); padding: 2px 6px; border-radius: 4px;">#{category}</span>
+</div>
+<span style="color: #787B86; font-size: 11px; white-space: nowrap;">{time_ago}</span>
+</div>
+<div style="color: #D1D4DC; font-size: 14px; line-height: 1.5; margin-bottom: 8px; margin-left: 8px; font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;">{summary}</div>
+<a href="{url}" target="_blank" style="color: #3861FB; font-size: 12px; text-decoration: none; margin-left: 8px; display: inline-flex; align-items: center; gap: 4px; font-weight: 500;" onmouseover="this.style.color='#5880FF';" onmouseout="this.style.color='#3861FB';">Read Full Story →</a>
+</div>
+"""
+
+    # Generate unique class name to avoid conflicts
+    import random
+    unique_id = f"news-scroll-{random.randint(10000, 99999)}"
+
+    # Render scrollable container with all news cards using st.markdown (no leading whitespace)
+    scrollable_html = f"""<style>
+.{unique_id} {{
+height: {height};
+overflow-y: auto;
+background: #0D0E13;
+border: 1px solid #2A2E39;
+border-top: none;
+border-radius: 0 0 8px 8px;
+padding: 16px;
+}}
+.{unique_id}::-webkit-scrollbar {{
+width: 8px;
+}}
+.{unique_id}::-webkit-scrollbar-track {{
+background: #1E222D;
+border-radius: 4px;
+}}
+.{unique_id}::-webkit-scrollbar-thumb {{
+background: #363A45;
+border-radius: 4px;
+}}
+.{unique_id}::-webkit-scrollbar-thumb:hover {{
+background: #434651;
+}}
+</style>
+<div class="{unique_id}">
+{news_cards_html}
+</div>
+"""
 
     st.markdown(scrollable_html, unsafe_allow_html=True)