Update app.py

app.py

@@ -30,19 +30,21 @@ def cloud_button(label, key=None, color=None):
     num_circles = max(3, min(12, len(label) // 4))
     circle_size = 60
     overlap = 20  # Adjust the overlap value as needed
+    text_size = 14  # Adjust the text font size as needed
 
-    # Create circles with text enclosed and overlap them
+    # Create circles with overlap
     circles_html = ''.join([
-        f'<div class="circle {color_class}" style="left: {i * overlap}px; top: {i * overlap}px;"></div>'
-        for i in range(num_circles)
+        f'<div class="circle {color_class}" style="margin-left: -{circle_size // 2}px;"></div>'
+        for _ in range(num_circles)
     ])
-    circle_text_style = f'font-size: {circle_size}px; top: {circle_size/2}px; left: {circle_size/2}px; transform: translate(-50%, -50%);'
 
     cloud_button_html = f"""
     <div class="cloud" id="{button_id}" style="margin-bottom: 20px;">
         <div class="wrapper {color_class}">
-            {circles_html}
-            <div class="circle-text" style="{circle_text_style}">{label}</div>
+            <div class="circle-container">
+                {circles_html}
+            </div>
+            <div class="circle-text" style="font-size: {text_size}px;">{label}</div>
         </div>
     </div>
     <style>
@@ -59,16 +61,24 @@ def cloud_button(label, key=None, color=None):
             position: relative;
             padding: 10px 20px;
         }}
+        .circle-container {{
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }}
         .circle {{
             background-color: #FF6347;
             border-radius: 50%;
             width: {circle_size}px;
             height: {circle_size}px;
             position: absolute;
+            z-index: 1;
         }}
         .circle-text {{
-            position: absolute;
+            position: relative;
             font-weight: bold;
+            text-align: center;
             z-index: 2;
         }}
         .color-1 .circle {{ background-color: #FFA07A; }}