Fixed misaligned loading spinner in the card component when the card is loading embedded content.

Author: lovasoa

CHANGELOG.md

@@ -20,6 +20,7 @@
 - Remove small blank padding around tables in the table component
 - Fixed a bug in the table component where searching for "xy" would match a row with a cell that contains "x" followed by a cell that contains "y". This should match "x y" but not "xy".
 - Fixed a bug where embedded card contents would be initialized multiple times, potentially causing issues with some components (such as the chart component) when embedded in a card.
+- Fixed misaligned loading spinner in the card component when the card is loading embedded content.
 
 ## 0.30.1 (2024-10-31)
 - fix a bug where table sorting would break if table search was not also enabled.

sqlpage/templates/card.handlebars

@@ -56,8 +56,10 @@
                         >
                         </iframe>
                     {{~else~}}
-                        <div class="spinner-border card-loading-placeholder" role="status" style="width: 3rem; height: 3rem;">
-                            <span class="visually-hidden">Loading...</span>
+                        <div class="d-flex justify-content-center h-100 align-items-center card-loading-placeholder">
+                            <div class="spinner-border" role="status" style="width: 3rem; height: 3rem;">
+                                <span class="visually-hidden">Loading...</span>
+                            </div>
                         </div>
                     {{~/if~}}
                     {{~/if~}}