Update app.py

app.py

@@ -21,7 +21,7 @@ def cloud_button(label, key=None, color=None, overlap=30):
 
     # Create circles with text enclosed
     circles_html = ''.join([
-        f'<div class="circle {color_class}"></div>'
+        f'<div class="circle {color_class}" style="margin-right: -{overlap}px;"></div>'
         for _ in range(num_circles)
     ])
     circles_html += f'<div class="circle-text">{label}</div>'  # Add the text after the circles
@@ -29,9 +29,7 @@ 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}">
-            <div class="circle-container">
-                {circles_html}
-            </div>
+            {circles_html}
         </div>
     </div>
     <style>
@@ -48,16 +46,12 @@ 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%;
             width: {circle_size}px;
             height: {circle_size}px;
             position: relative;
-            margin-right: -{overlap}px; /* Adjust the margin for overlapping effect */
         }}
         .circle-text {{
             position: absolute;
@@ -70,9 +64,9 @@ def cloud_button(label, key=None, color=None, overlap=30):
             text-align: center; /* Center the text horizontally and vertically */
         }}
         /* Add this CSS for the hover effect and shadow */
-        .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 */
+        .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 */
         }}
         
         .color-1 .circle {{ background-color: #FFA07A; }}
@@ -88,8 +82,6 @@ def cloud_button(label, key=None, color=None, overlap=30):
     st.markdown(cloud_button_html, unsafe_allow_html=True)
 
 
-
-
 # Step 1: Clone the Dataset Repository
 repo = Repository(
     local_dir="Private_Book",  # Local directory to clone the repository