Update src/streamlit_app.py

src/streamlit_app.py

@@ -302,27 +302,64 @@ elif page:
 elif search_query:
     st.title(f"Search Results for '{search_query}'")
     filtered = movie_df[movie_df["clean_title"].str.contains(search_query, case=False, na=False)]
-
+    
     if filtered.empty:
         st.warning("No movies found.")
     else:
+        st.markdown("""
+        <style>
+        .movie-box {
+            background-color: #1a1a1a;
+            padding: 15px;
+            border-radius: 10px;
+            margin-bottom: 15px;
+            transition: all 0.3s ease-in-out;
+        }
+        .movie-box:hover {
+            background-color: #262626;
+        }
+        .movie-box.expanded {
+            border-left: 6px solid #b32d2e;
+            background-color: #2a2a2a;
+        }
+        .movie-title {
+            font-size: 18px;
+            font-weight: bold;
+            color: #e63946;
+        }
+        .movie-details {
+            margin-top: 10px;
+        }
+        </style>
+        """, unsafe_allow_html=True)
+
         for _, movie in filtered.iterrows():
-            expander_html_id = f"expander_{movie['movieId']}"
-            with st.expander(f"{movie['clean_title']}", expanded=False):
-                st.markdown(f"<style>#{expander_html_id} {{ background-color: #2a2a2a; border-left: 4px solid #b32d2e; padding: 10px; }}</style>", unsafe_allow_html=True)
-                col1, col2 = st.columns([1, 3])
+            with st.expander(f"🎬 {movie['clean_title']}", expanded=False):
+                container = st.container()
+                with container:
+                    st.markdown(f"""
+                    <div class="movie-box expanded">
+                        <div class="movie-details">
+                            <p><strong>Genres:</strong> {movie['genres']}</p>
+                            <p><strong>Year:</strong> {movie['year']}</p>
+                            <a href="/?movie_id={movie['movieId']}" style="color:#b32d2e;">🔍 Details</a>
+                        </div>
+                    </div>
+                    """, unsafe_allow_html=True)
+            # Show image even when collapsed
+            poster_url, _ = get_tmdb_data(movie["clean_title"], movie["year"])
+            with st.container():
+                col1, col2 = st.columns([1, 4])
                 with col1:
-                    poster_url, _ = get_tmdb_data(movie["clean_title"], movie["year"])
                     if poster_url and "placeholder.com" not in poster_url:
                         st.image(poster_url, width=100)
                     else:
                         st.markdown("""
-                        <div style='width:100px;border:2px dashed gray;height:150px;display:flex;align-items:center;justify-content:center;color:gray;font-size:12px;'>No picture<br>available</div>
+                        <div style='width:100px;border:2px dashed gray;height:150px;display:flex;align-items:center;justify-content:center;color:gray;'>
+                            No Image
+                        </div>
                         """, unsafe_allow_html=True)
-                with col2:
-                    st.markdown(f"**Genres:** {movie['genres']}")
-                    st.markdown(f"**Year:** {movie['year']}")
-                    st.markdown(f"[🔍 Details](/?movie_id={movie['movieId']})", unsafe_allow_html=True)
+
 else:
     st.title("Welcome to Movie Recommender")