Upload app.py

app.py

@@ -4,7 +4,12 @@ st.set_page_config(layout="wide")
 
 css = """
 <style>
-  /* Compact spacing for headings and descriptions */
+  /* Remove extra spacing from paragraphs in markdown */
+  .stMarkdown p {
+      margin: 0 !important;
+      padding: 0 !important;
+  }
+  /* Criteria header and description compact styling */
   .criteria-name {
       font-size: 14px;
       font-weight: bold;
@@ -38,19 +43,20 @@ css = """
       width: 24px !important;
       height: 24px !important;
   }
-  /* Hide slider tick marks, tick bar, and min/max texts */
+  /* Hide slider tick marks, tick bar, min/max texts, and the empty label */
   div[data-baseweb="slider"] .Tick,
   div[data-baseweb="slider"] .TickBar,
   div[data-testid="stSliderTickBarMin"],
   div[data-testid="stSliderTickBarMax"],
-  div[data-testid="stSliderThumbValue"] {
+  div[data-testid="stSliderThumbValue"],
+  label[data-testid="stWidgetLabel"][aria-hidden="true"] {
       display: none !important;
   }
   /* Remove extra margin above slider */
   .stSlider {
       margin-top: 0px !important;
   }
-  /* Prevent header columns from stacking on mobile */
+  /* Prevent header columns from stacking on mobile and reduce padding */
   @media (max-width: 600px) {
       .stHorizontalBlock {
           flex-wrap: nowrap !important;
@@ -127,8 +133,9 @@ def calculate_score(ratings):
 st.markdown("<h1 class='app-header'>Movie Rating System</h1>", unsafe_allow_html=True)
 ratings = []
 
-# For each category and criterion, display a header row with the criterion name and include checkbox,
-# then the description immediately below, followed immediately by the slider.
+# For each category and criterion, display:
+#  - A header row (criterion name and a small include checkbox)
+#  - Immediately below, the description and then the slider with no extra vertical space.
 for group, subcriteria in criteria.items():
     st.markdown(f"<div class='category-header'>{group}</div>", unsafe_allow_html=True)
     for idx, crit in enumerate(subcriteria):