Update app.py

app.py

@@ -39,7 +39,9 @@ def cloud_button(label, key=None, color=None, overlap=30):
     cloud_button_html = f"""
     <div class="cloud" id="{button_id}" style="margin-bottom: 20px;">
         <div class="wrapper {color_class}">
-            {circles_html}
+            <div class="circle-container">
+                {circles_html}
+            </div>
         </div>
     </div>
     <style>
@@ -56,6 +58,9 @@ def cloud_button(label, key=None, color=None, overlap=30):
             position: relative;
             padding: 10px 20px;
         }}
+        .circle-container {{
+            position: relative;
+        }}
         .circle {{
             background-color: #FF6347;
             border-radius: 50%;
@@ -72,16 +77,12 @@ def cloud_button(label, key=None, color=None, overlap=30):
             z-index: 2;
             white-space: nowrap;  /* Prevent line breaks */
             text-align: center; /* Center the text horizontally and vertically */
-
         }}
-
         /* Add this CSS for the hover effect and shadow */
-        .cloud:hover .circle {{
-        transform: scale(1.1); /* Scale up the circles on hover */
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a shadow on hover */
+        .cloud:hover .circle-container {{
+            transform: scale(1.1); /* Scale up the circles on hover */
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a shadow on hover */
         }}
-
-
         
         .color-1 .circle {{ background-color: #FFA07A; }}
         .color-2 .circle {{ background-color: #FF7F50; }}