Update app.py

app.py

@@ -1,8 +1,8 @@
 import gradio as gr
 
 def func(percent, numBlocks):
-    filledSquares = "<div style='height:12px;width:12px;background-color:#555;display:inline-block;position:relative' id='filled'><span class='tooltiptext' style='color:#FFF'>Here is a sentence that goes on for a really really really really really really really long time</span></div> "
-    emptySquares = "<div style='height:12px;width:12px;background-color:#999;display:inline-block;position:relative' id='empty'><span class='tooltiptext' style='color:#FFF'>Here is a sentence that goes on for a really really really really really really really long time</span></div> "
+    filledSquares = "<div style='height:20px;width:20px;background-color:#555;display:inline-block;position:relative' id='filled'><span class='tooltiptext' style='color:#FFF'>Here is a sentence that goes on for a really really really really really really really long time</span></div> "
+    emptySquares = "<div style='height:20px;width:20px;background-color:#999;display:inline-block;position:relative' id='empty'><span class='tooltiptext' style='color:#FFF'>Here is a sentence that goes on for a really really really really really really really long time</span></div> "
     numFilled = round((percent/100) * numBlocks)
     print(f"numFilled: {numFilled}")
     numEmpty = numBlocks - numFilled
@@ -11,7 +11,7 @@ def func(percent, numBlocks):
     return HTMLstr
     
 
-css_adds = ".tooltiptext {visibility: hidden;max-width:100ch;min-width:60ch;top: 100%;left: 50%;background-color: #222;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;} \
+css_adds = ".tooltiptext {visibility: hidden;width:50ch;margin-left:-25ch;top: 100%;left: 50%;background-color: #222;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;} \
 #filled:hover .tooltiptext {visibility: visible;} \
 #empty:hover .tooltiptext {visibility: visible;}"