fix temporal visualizations: use container width and constrain x-axis to data range

src/streamlit_app.py

@@ -510,10 +510,15 @@ def create_temporal_visualizations(df: pd.DataFrame) -> Dict[str, go.Figure]:
         df['created_utc'] = pd.to_datetime(df['created_utc'])
         df = df.sort_values('created_utc')
     
-    # Get actual date range of collected data
+    # Get actual date range of collected data with padding
     date_min = df['created_utc'].min()
     date_max = df['created_utc'].max()
     date_range = (date_max - date_min).days
+
+    # Add 2% padding to prevent edge clipping
+    padding = pd.Timedelta(days=max(1, int(date_range * 0.02)))
+    date_min_padded = date_min - padding
+    date_max_padded = date_max + padding
     
     # 1. Hourly activity heatmap
     df['hour'] = df['created_utc'].dt.hour
@@ -593,17 +598,17 @@ def create_temporal_visualizations(df: pd.DataFrame) -> Dict[str, go.Figure]:
     )
     
     fig_timeline.update_layout(
-        height=600, 
+        height=600,
         showlegend=True,
         title=f'Activity Timeline ({date_min.strftime("%Y-%m-%d")} to {date_max.strftime("%Y-%m-%d")})'
     )
     fig_timeline.update_xaxes(
-        title_text="Date", 
+        title_text="Date",
         row=2, col=1,
-        range=[date_min, date_max]  # Constrain to actual data range
+        range=[date_min_padded, date_max_padded]
     )
     fig_timeline.update_xaxes(
-        range=[date_min, date_max],  # Apply to both subplots
+        range=[date_min_padded, date_max_padded],
         row=1, col=1
     )
     fig_timeline.update_yaxes(title_text="Count", row=1, col=1)
@@ -639,7 +644,7 @@ def create_temporal_visualizations(df: pd.DataFrame) -> Dict[str, go.Figure]:
         fig_monthly.update_layout(
             title=f'Monthly Posting Trends ({date_min.strftime("%Y-%m")} to {date_max.strftime("%Y-%m")})',
             xaxis_title='Month',
-            xaxis=dict(range=[date_min, date_max]),  # Constrain to actual data range
+            xaxis=dict(range=[date_min_padded, date_max_padded]),
             yaxis=dict(title='Post Count', side='left'),
             yaxis2=dict(title='Average Score', side='right', overlaying='y'),
             height=400,
@@ -675,7 +680,7 @@ def create_temporal_visualizations(df: pd.DataFrame) -> Dict[str, go.Figure]:
         fig_weekly.update_layout(
             title=f'Weekly Posting Trends ({date_min.strftime("%Y-%m-%d")} to {date_max.strftime("%Y-%m-%d")})',
             xaxis_title='Week',
-            xaxis=dict(range=[date_min, date_max]),  # Constrain to actual data range
+            xaxis=dict(range=[date_min_padded, date_max_padded]),
             yaxis=dict(title='Post Count', side='left'),
             yaxis2=dict(title='Average Score', side='right', overlaying='y'),
             height=400,
@@ -690,13 +695,13 @@ def create_temporal_visualizations(df: pd.DataFrame) -> Dict[str, go.Figure]:
         top_flairs = df['flair'].value_counts().head(10).index
         flair_time_filtered = flair_time[flair_time['flair'].isin(top_flairs)]
         
-        fig_flair = px.line(flair_time_filtered, x='created_utc', y='count', 
-                           color='flair', 
+        fig_flair = px.line(flair_time_filtered, x='created_utc', y='count',
+                           color='flair',
                            title=f'Weekly Posting Patterns by Flair ({date_min.strftime("%Y-%m-%d")} to {date_max.strftime("%Y-%m-%d")})',
                            labels={'count': 'Number of Posts', 'created_utc': 'Week'})
         fig_flair.update_layout(
             height=400,
-            xaxis=dict(range=[date_min, date_max])  # Constrain to actual data range
+            xaxis=dict(range=[date_min_padded, date_max_padded])
         )
         figures['flair'] = fig_flair
     
@@ -1063,31 +1068,31 @@ def main():
                     temporal_figs = create_temporal_visualizations(df)
                 
                     # Activity heatmap
-                    st.plotly_chart(temporal_figs.get('heatmap'), width="stretch")
-                
+                    st.plotly_chart(temporal_figs.get('heatmap'), use_container_width=True)
+
                     # Time series
-                    st.plotly_chart(temporal_figs.get('timeline'), width="stretch")
-                
+                    st.plotly_chart(temporal_figs.get('timeline'), use_container_width=True)
+
                     # Monthly trends
                     col1, col2 = st.columns(2)
                     with col1:
-                        st.plotly_chart(temporal_figs.get('monthly'), width="stretch")
+                        st.plotly_chart(temporal_figs.get('monthly'), use_container_width=True)
                     with col2:
                         if 'flair' in temporal_figs:
-                            st.plotly_chart(temporal_figs.get('flair'), width="stretch")
+                            st.plotly_chart(temporal_figs.get('flair'), use_container_width=True)
                 
                 with tab2:
                     st.header("Engagement Analysis")
                 
                     engagement_figs = create_engagement_analytics(df)
-                
+
                     col1, col2 = st.columns(2)
                     with col1:
-                        st.plotly_chart(engagement_figs['score_dist'], width="stretch")
+                        st.plotly_chart(engagement_figs['score_dist'], use_container_width=True)
                     with col2:
-                        st.plotly_chart(engagement_figs['correlation'], width="stretch")
-                
-                    st.plotly_chart(engagement_figs['top_posts'], width="stretch")
+                        st.plotly_chart(engagement_figs['correlation'], use_container_width=True)
+
+                    st.plotly_chart(engagement_figs['top_posts'], use_container_width=True)
             
                 with tab3:
                     st.header("Raw Data View")