Update src/streamlit_app.py

src/streamlit_app.py

@@ -26,42 +26,6 @@ from gliner import GLiNER
 from streamlit_extras.stylable_container import stylable_container
 
 
-# --- Conditional Mobile Warning ---
-st.markdown(
-    """
-    <style>
-    /* CSS Media Query: Only show the content inside this selector when the screen width is 600px or less (typical mobile size) */
-    @media (max-width: 600px) {
-        #mobile-warning-container {
-            display: block; /* Show the warning container */
-            background-color: #ffcccc; /* Light red/pink background */
-            color: #cc0000; /* Dark red text */
-            padding: 10px;
-            border-radius: 5px;
-            text-align: center;
-            margin-bottom: 20px;
-            font-weight: bold;
-            border: 1px solid #cc0000;
-        }
-    }
-    
-    /* Hide the content by default (for larger screens) */
-    @media (min-width: 601px) {
-        #mobile-warning-container {
-            display: none; /* Hide the warning container on desktop */
-        }
-    }
-    </style>
-    
-    <div id="mobile-warning-container">
-        ⚠️ **Tip for Mobile Users:** For the best viewing experience of the charts and tables, please switch your browser to **"Desktop Site"** view.
-    </div>
-    """,
-    unsafe_allow_html=True
-)
-# ----------------------------------
-
-
 
 
 
@@ -481,6 +445,49 @@ def generate_html_report(df, text_input, elapsed_time, df_topic_data):
 st.set_page_config(layout="wide", page_title="NER & Topic Report App")
 
 
+# --- Conditional Mobile Warning ---
+st.markdown(
+    """
+    <style>
+    /* CSS Media Query: Only show the content inside this selector when the screen width is 600px or less (typical mobile size) */
+    @media (max-width: 600px) {
+        #mobile-warning-container {
+            display: block; /* Show the warning container */
+            background-color: #ffcccc; /* Light red/pink background */
+            color: #cc0000; /* Dark red text */
+            padding: 10px;
+            border-radius: 5px;
+            text-align: center;
+            margin-bottom: 20px;
+            font-weight: bold;
+            border: 1px solid #cc0000;
+        }
+    }
+    
+    /* Hide the content by default (for larger screens) */
+    @media (min-width: 601px) {
+        #mobile-warning-container {
+            display: none; /* Hide the warning container on desktop */
+        }
+    }
+    </style>
+    
+    <div id="mobile-warning-container">
+        ⚠️ **Tip for Mobile Users:** For the best viewing experience of the charts and tables, please switch your browser to **"Desktop Site"** view.
+    </div>
+    """,
+    unsafe_allow_html=True
+)
+# ----------------------------------
+
+
+
+
+
+
+
+
+
 st.markdown(
     """
     <style>