Upload app.py

app.py

@@ -4,28 +4,29 @@ st.set_page_config(layout="wide")
 
 css = """
 <style>
-  /* Remove margins/padding on markdown paragraphs */
+  /* Remove extra spacing in markdown paragraphs */
   .stMarkdown p {
       margin: 0 !important;
       padding: 0 !important;
   }
-  /* Hide empty markdown containers */
+  /* Hide empty markdown containers (that add unwanted space) */
   div[data-testid="stMarkdownContainer"]:empty,
   p:empty {
       display: none !important;
   }
-  /* Compact styling for criteria text */
+  /* Criterion name styling */
   .criteria-name {
       font-size: 14px;
       font-weight: bold;
       margin-bottom: 0px;
   }
+  /* Description styling: same style as header but slightly smaller */
   .criteria-description {
       font-size: 12px;
       color: #555;
-      margin-top: 0px;
-      margin-bottom: 0px;
+      margin: 0px;
   }
+  /* Container adjustments */
   .subcriteria {
       margin-bottom: 0px;
       padding: 0px;
@@ -48,8 +49,7 @@ css = """
       width: 24px !important;
       height: 24px !important;
   }
-  /* Hide slider tick marks, tick bar, min/max texts,
-     and the empty label element that creates extra vertical space */
+  /* Hide slider tick marks, tick bar, min/max texts, and empty slider labels */
   div[data-baseweb="slider"] .Tick,
   div[data-baseweb="slider"] .TickBar,
   div[data-testid="stSliderTickBarMin"],
@@ -62,7 +62,7 @@ css = """
   .stSlider {
       margin-top: 0px !important;
   }
-  /* Ensure header row stays inline on mobile */
+  /* Mobile adjustments */
   @media (max-width: 600px) {
       .stHorizontalBlock {
           flex-wrap: nowrap !important;
@@ -72,7 +72,6 @@ css = """
           padding-right: 2px !important;
           min-width: 0;
       }
-      /* Reduce checkbox size on mobile */
       .stCheckbox {
           transform: scale(0.8);
           transform-origin: left center;
@@ -82,7 +81,7 @@ css = """
 """
 st.markdown(css, unsafe_allow_html=True)
 
-# Define criteria
+# Define criteria grouped by category with names and descriptions.
 criteria = {
     "Writing": [
         {"name": "Dialogue", "description": "Word choice, realism, subtext, and implications."},
@@ -139,17 +138,22 @@ 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 a small include checkbox,
-#  - Immediately below, the description and the slider, with no extra vertical spacing.
+# For each category and criterion, display a header row with:
+#  - the criterion name,
+#  - the description (inline, slightly smaller),
+#  - a small include checkbox.
+# Then immediately display the slider below.
 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):
         with st.container():
-            header_cols = st.columns([4, 0.5])
+            # Create one row with three columns:
+            # column0: criterion name; column1: description; column2: checkbox.
+            header_cols = st.columns([3, 4, 0.5])
             header_cols[0].markdown(f"<span class='criteria-name'>{crit['name']}</span>", unsafe_allow_html=True)
-            include = header_cols[1].checkbox("", value=True, key=f"include_{group}_{idx}")
-            st.markdown(f"<div class='criteria-description'>{crit['description']}</div>", unsafe_allow_html=True)
+            header_cols[1].markdown(f"<span class='criteria-description'>{crit['description']}</span>", unsafe_allow_html=True)
+            include = header_cols[2].checkbox("", value=True, key=f"include_{group}_{idx}")
+            # Slider appears immediately below
             rating = st.slider("", 1.0, 7.0, 4.0, step=0.1, key=f"slider_{group}_{idx}", disabled=(not include))
             ratings.append(None if not include else rating)