Update app.py

app.py

@@ -783,33 +783,6 @@ def enhanced_likert_scale(question_data):
     st.markdown(f"<div style='text-align:right; font-weight:bold; margin-bottom:15px; direction: rtl;'>{question}</div>", 
                 unsafe_allow_html=True)
 
-    # تنظیم لیبل وسط برای مقیاس‌های فرد
-    middle_label = ""
-    middle_label_text = "متوسط"  # لیبل پیش‌فرض برای وسط
-    if scale % 2 == 1:  # اگر مقیاس فرد باشد
-        middle_value = (scale // 2) + 1
-        middle_label = f"""
-            <div class='label-container middle-label' style='left: 50%; transform: translateX(-50%);'>
-                <span>{middle_label_text}</span>
-            </div>
-        """
-    
-    # نمایش برچسب‌ها با خطوط ارتباطی
-    st.markdown(
-        f"""
-        <div class='labels-container'>
-            <div class='label-container left-label'>
-                <span>{labels[0]}</span>
-            </div>
-            {middle_label}
-            <div class='label-container right-label'>
-                <span>{labels[1]}</span>
-            </div>
-        </div>
-        """,
-        unsafe_allow_html=True
-    )
-
     # رادیو باتن اصلی (مخفی)
     selected_value = st.radio(
         "",
@@ -857,6 +830,16 @@ def enhanced_likert_scale(question_data):
         for i in range(scale)
     ])
 
+    # تنظیم لیبل وسط برای مقیاس‌های فرد
+    middle_label = ""
+    middle_label_text = "متوسط"
+    if scale % 2 == 1:  # اگر مقیاس فرد باشد
+        middle_label = f"""
+            <div class='label-container middle-label'>
+                <span>{middle_label_text}</span>
+            </div>
+        """
+    
     # ترکیب تمام بخش‌ها با استایل بهبود یافته
     components.html(
         f"""
@@ -870,7 +853,7 @@ def enhanced_likert_scale(question_data):
                 margin: 0 auto;
                 direction: rtl;
                 position: relative;
-                padding-top: 40px; /* فضای کافی برای خطوط و لیبل‌ها */
+                padding-top: 50px; /* فضای کافی برای خطوط و لیبل‌ها */
             }}
             .likert-option {{
                 width: 36px;
@@ -909,25 +892,37 @@ def enhanced_likert_scale(question_data):
                 justify-content: space-between;
                 width: 100%;
                 max-width: 475px;
-                margin: 0 auto 10px;
-                position: relative;
+                margin: 0 auto;
+                position: absolute;
+                top: 0;
                 direction: rtl;
             }}
             .label-container {{
-                position: relative;
                 font-size: 14px;
                 font-weight: bold;
                 color: #6a0dad;
                 text-align: center;
                 flex: 1;
+                position: relative;
             }}
             .label-container span {{
                 display: inline-block;
-                max-width: 150px; /* محدود کردن عرض لیبل‌ها برای جلوگیری از تداخل */
+                max-width: 150px; /* محدود کردن عرض لیبل‌ها */
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
             }}
+            .left-label {{
+                text-align: right;
+            }}
+            .right-label {{
+                text-align: left;
+            }}
+            .middle-label {{
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+            }}
             /* خطوط ارتباطی */
             .left-label::before {{
                 content: '';
@@ -957,7 +952,7 @@ def enhanced_likert_scale(question_data):
                 height: 25px;
                 background-color: #6a0dad;
             }}
-            /* تنظیم موقعیت خطوط برای گزینه‌های مقیاس */
+            /* تنظیم خطوط برای گزینه‌های مقیاس */
             .likert-option:nth-child(1)::before {{
                 content: '';
                 position: absolute;
@@ -992,11 +987,22 @@ def enhanced_likert_scale(question_data):
                 z-index: 0;
             }}
         </style>
-        <div class="likert-container">
-            {options_html}
+        <div class='likert-wrapper'>
+            <div class='labels-container'>
+                <div class='label-container left-label'>
+                    <span>{labels[0]}</span>
+                </div>
+                {middle_label}
+                <div class='label-container right-label'>
+                    <span>{labels[1]}</span>
+                </div>
+            </div>
+            <div class="likert-container">
+                {options_html}
+            </div>
         </div>
         """,
-        height=110  # افزایش ارتفاع برای جا دادن خطوط و لیبل‌ها
+        height=120  # افزایش ارتفاع برای جا دادن لیبل‌ها و خطوط
     )
 
     # نمایش وضعیت انتخاب با استایل بهبود یافته