feat: enhance chat layout and responsiveness for user feedback and messages

Author: yesidc

pages/static/style.css

@@ -42,7 +42,29 @@ body * {
     .stMainBlockContainer {
         padding-top: 0.5rem !important;
         margin-top: 0 !important;
+        padding-left: 1rem !important;
+        padding-right: 1rem !important;
     }
+
+    .st-key-user_feedback_faces {
+        justify-content: flex-end !important;
+        margin-left: auto !important;
+        margin-right: 0 !important;
+        width: 100% !important;
+    }
+    /* Mobile font size for h1 in page header ask_uos_chat.py*/
+    .st-key-page-header-container h1 {
+        font-size: 1.7rem !important;
+    }
+
+    .stChatMessage {
+        max-width: 100% !important;  /* Set the max-width to 95% */
+        width: 100% !important;       /* Set the width to 95% */
+        margin-left: auto;           /* Center the chat message */
+        margin-right: auto;          /* Center the chat message */
+    }
+
+  
 }
 
 
@@ -168,15 +190,6 @@ span[data-testid="stHeaderActionElements"] a {
     }
 }
 
-/* Adjust the width of the chat message  (on mobile view) */
-@media (max-width: 600px) { 
-    .stChatMessage {
-        max-width: 100% !important;  /* Set the max-width to 95% */
-        width: 100% !important;       /* Set the width to 95% */
-        margin-left: auto;           /* Center the chat message */
-        margin-right: auto;          /* Center the chat message */
-    }
-}
 
 /* Always align feedback faces to the right inside the chat container */
 .st-key-user_feedback_faces {
@@ -192,15 +205,7 @@ span[data-testid="stHeaderActionElements"] a {
     overflow-x: auto;                       /* Allow horizontal scroll if needed */
 }
 
-/* On mobile, prevent column stacking for feedback faces */
-@media (max-width: 600px) {
-    .st-key-user_feedback_faces {
-        justify-content: flex-end !important;
-        margin-left: auto !important;
-        margin-right: 0 !important;
-        width: 100% !important;
-    }
-}
+
 
 /* Make feedback faces (icons/buttons) look like Material UI Sentiment faces */
 .st-key-user_feedback_faces button,