Upload app.py

app.py

@@ -4,12 +4,17 @@ st.set_page_config(layout="wide")
 
 css = """
 <style>
-  /* Remove extra spacing from paragraphs in markdown */
+  /* Remove margins/padding on markdown paragraphs */
   .stMarkdown p {
       margin: 0 !important;
       padding: 0 !important;
   }
-  /* Criteria header and description compact styling */
+  /* Hide empty markdown containers */
+  div[data-testid="stMarkdownContainer"]:empty,
+  p:empty {
+      display: none !important;
+  }
+  /* Compact styling for criteria text */
   .criteria-name {
       font-size: 14px;
       font-weight: bold;
@@ -19,11 +24,11 @@ css = """
       font-size: 12px;
       color: #555;
       margin-top: 0px;
-      margin-bottom: 0px;  /* Remove gap below description */
+      margin-bottom: 0px;
   }
   .subcriteria {
-      margin-bottom: 0px;  /* Remove extra bottom margin */
-      padding: 0px;        /* Remove padding */
+      margin-bottom: 0px;
+      padding: 0px;
   }
   .category-header {
       margin-top: 6px;
@@ -38,12 +43,13 @@ css = """
       margin-bottom: 6px;
       font-size: 20px;
   }
-  /* Enlarge the slider thumb for easier touch */
+  /* Enlarge slider thumb for easier touch */
   div[data-baseweb="slider"] .Thumb {
       width: 24px !important;
       height: 24px !important;
   }
-  /* Hide slider tick marks, tick bar, min/max texts, and the empty label */
+  /* Hide slider tick marks, tick bar, min/max texts,
+     and the empty label element that creates extra vertical space */
   div[data-baseweb="slider"] .Tick,
   div[data-baseweb="slider"] .TickBar,
   div[data-testid="stSliderTickBarMin"],
@@ -56,7 +62,7 @@ css = """
   .stSlider {
       margin-top: 0px !important;
   }
-  /* Prevent header columns from stacking on mobile and reduce padding */
+  /* Ensure header row stays inline on mobile */
   @media (max-width: 600px) {
       .stHorizontalBlock {
           flex-wrap: nowrap !important;
@@ -66,7 +72,7 @@ css = """
           padding-right: 2px !important;
           min-width: 0;
       }
-      /* Reduce checkbox size further on mobile */
+      /* Reduce checkbox size on mobile */
       .stCheckbox {
           transform: scale(0.8);
           transform-origin: left center;
@@ -76,7 +82,7 @@ css = """
 """
 st.markdown(css, unsafe_allow_html=True)
 
-# Define criteria grouped by category with names and descriptions
+# Define criteria
 criteria = {
     "Writing": [
         {"name": "Dialogue", "description": "Word choice, realism, subtext, and implications."},
@@ -134,8 +140,8 @@ st.markdown("<h1 class='app-header'>Movie Rating System</h1>", unsafe_allow_html
 ratings = []
 
 # 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.
+#  - A header row with the criterion name and a small include checkbox,
+#  - Immediately below, the description and the slider, with no extra vertical spacing.
 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):