Improve confidence score display with inline-flex and whitespace handling

- Add `inline-flex` and `whitespace-nowrap` classes to confidence score divs
- Ensure consistent text alignment and prevent text wrapping
- Maintain existing color and styling for result tiles

app.py

@@ -263,8 +263,8 @@ def generate_results_html(results):
                 <div>
                     <div class="mt-4 relative -mx-4 bg-gray-800">
                         <div class="w-full bg-gray-400 rounded-none h-8">
-                            <div class="bg-green-400 h-full rounded-none" style="width: {results[0][2] * 100:.2f}%;">
-                                <p class="inline-flex p-2 px-4 text-xs self-center align-middle">Conf:
+                            <div class="inline-flex whitespace-nowrap bg-green-400 h-full rounded-none" style="width: {results[0][2] * 100:.2f}%;">
+                                <p class="p-2 px-4 text-xs self-center align-middle">Conf:
                                     <span class="ml-1 font-medium font-mono">{results[0][2]:.4f}</span>
                                 </p>
                             </div>
@@ -272,7 +272,7 @@ def generate_results_html(results):
                     </div>
                     <div class="relative -mx-4 bg-gray-800">
                         <div class="w-full bg-gray-400 rounded-none h-8">
-                            <div class="inline-flex bg-red-400 h-full rounded-none" style="width: {results[0][3] * 100:.2f}%;">
+                            <div class="inline-flex whitespace-nowrap bg-red-400 h-full rounded-none" style="width: {results[0][3] * 100:.2f}%;">
                                 <p class="p-2 px-4 text-xs self-center align-middle">Conf:
                                     <span class="ml-1 font-medium font-mono">{results[0][3]:.4f}</span>
                                 </p>
@@ -306,7 +306,7 @@ def generate_results_html(results):
                 <div>
                     <div class="mt-4 relative -mx-4 bg-gray-800">
                         <div class="w-full bg-gray-400 rounded-none h-8">
-                            <div class="bg-green-400 h-full rounded-none" style="width: {results[1][2] * 100:.2f}%;">
+                            <div class="inline-flex whitespace-nowrap bg-green-400 h-full rounded-none" style="width: {results[1][2] * 100:.2f}%;">
                                 <p class="p-2 px-4 text-xs self-center align-middle">Conf:
                                     <span class="ml-1 font-medium font-mono">{results[1][2]:.4f}</span>
                                 </p>
@@ -315,7 +315,7 @@ def generate_results_html(results):
                     </div>
                     <div class="mt-4 relative -mx-4 bg-gray-800">
                         <div class="w-full bg-gray-400 rounded-none h-8">
-                            <div class="inline-flex bg-red-400 h-full rounded-none" style="width: {results[1][3] * 100:.2f}%;">
+                            <div class="inline-flex whitespace-nowrap bg-red-400 h-full rounded-none" style="width: {results[1][3] * 100:.2f}%;">
                                 <p class="p-2 px-4 text-xs self-center align-middle">Conf:
                                     <span class="ml-1 font-medium font-mono">{results[1][3]:.4f}</span>
                                 </p>
@@ -349,7 +349,7 @@ def generate_results_html(results):
                 <div>
                     <div class="mt-4 relative -mx-4 bg-gray-800">
                         <div class="w-full bg-gray-400 rounded-none h-8">
-                            <div class="bg-green-400 h-full rounded-none" style="width: {results[2][2] * 100:.2f}%;">
+                            <div class="inline-flex whitespace-nowrap bg-green-400 h-full rounded-none" style="width: {results[2][2] * 100:.2f}%;">
                                 <p class="p-2 px-4 text-xs self-center align-middle">Conf:
                                     <span class="ml-1 font-medium font-mono">{results[2][2]:.4f}</span>
                                 </p>
@@ -358,7 +358,7 @@ def generate_results_html(results):
                     </div>
                     <div class="mt-4 relative -mx-4 bg-gray-800">
                         <div class="w-full bg-gray-400 rounded-none h-8">
-                            <div class="inline-flex bg-red-400 h-full rounded-none" style="width: {results[2][3] * 100:.2f}%;">
+                            <div class="inline-flex whitespace-nowrap bg-red-400 h-full rounded-none" style="width: {results[2][3] * 100:.2f}%;">
                                 <p class="p-2 px-4 text-xs self-center align-middle">Conf:
                                     <span class="ml-1 font-medium font-mono">{results[2][3]:.4f}</span>
                                 </p>
@@ -392,7 +392,7 @@ def generate_results_html(results):
                 <div>
                     <div class="mt-4 relative -mx-4 bg-gray-800">
                         <div class="w-full bg-gray-400 rounded-none h-8">
-                            <div class="bg-green-400 h-full rounded-none" style="width: {results[3][2] * 100:.2f}%;">
+                            <div class="inline-flex whitespace-nowrap bg-green-400 h-full rounded-none" style="width: {results[3][2] * 100:.2f}%;">
                                 <p class="p-2 px-4 text-xs self-center align-middle">Conf:
                                     <span class="ml-1 font-medium font-mono">{results[3][2]:.4f}</span>
                                 </p>
@@ -401,7 +401,7 @@ def generate_results_html(results):
                     </div>
                     <div class="mt-4 relative -mx-4 bg-gray-800">
                         <div class="w-full bg-gray-400 rounded-none h-8">
-                            <div class="inline-flex bg-red-400 h-full rounded-none" style="width: {results[3][3] * 100:.2f}%;">
+                            <div class="inline-flex whitespace-nowrap bg-red-400 h-full rounded-none" style="width: {results[3][3] * 100:.2f}%;">
                                 <p class="p-2 px-4 text-xs self-center align-middle">Conf:
                                     <span class="ml-1 font-medium font-mono">{results[3][3]:.4f}</span>
                                 </p>
@@ -435,7 +435,7 @@ def generate_results_html(results):
                 <div>
                     <div class="mt-4 relative -mx-4 bg-gray-800">
                         <div class="w-full bg-gray-400 rounded-none h-8">
-                            <div class="bg-green-400 h-full rounded-none" style="width: {results[4][2] * 100:.2f}%;">
+                            <div class="inline-flex whitespace-nowrap bg-green-400 h-full rounded-none" style="width: {results[4][2] * 100:.2f}%;">
                                 <p class="p-2 px-4 text-xs self-center align-middle">Conf:
                                     <span class="ml-1 font-medium font-mono">{results[4][2]:.4f}</span>
                                 </p>
@@ -444,7 +444,7 @@ def generate_results_html(results):
                     </div>
                     <div class="mt-4 relative -mx-4 bg-gray-800">
                         <div class="w-full bg-gray-400 rounded-none h-8">
-                            <div class="inline-flex bg-red-400 h-full rounded-none" style="width: {results[4][3] * 100:.2f}%;">
+                            <div class="inline-flex whitespace-nowrap bg-red-400 h-full rounded-none" style="width: {results[4][3] * 100:.2f}%;">
                                 <p class="p-2 px-4 text-xs self-center align-middle">Conf:
                                     <span class="ml-1 font-medium font-mono">{results[4][3]:.4f}</span>
                                 </p>