[SLO] Fix card icon alignment !! (elastic#188416)

## Summary

Fix card icon alignment !! 

### After
<img width="957" alt="image"
src="https://github.com/user-attachments/assets/25d68bea-f497-495b-9137-add25c9dd67d">


### Before
<img width="826" alt="image"
src="https://github.com/user-attachments/assets/8d466950-5306-40da-a5e0-d25b01a8c850">

x-pack/plugins/observability_solution/slo/public/pages/slos/components/card_view/slo_card_item.tsx

@@ -5,14 +5,7 @@
  * 2.0.
  */
 
-import {
-  Chart,
-  isMetricElementEvent,
-  LEGACY_DARK_THEME,
-  Metric,
-  MetricTrendShape,
-  Settings,
-} from '@elastic/charts';
+import { Chart, isMetricElementEvent, Metric, MetricTrendShape, Settings } from '@elastic/charts';
 import { EuiIcon, EuiPanel, useEuiBackgroundColor } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
@@ -229,6 +222,7 @@ export function SloCardChart({
 }) {
   const {
     application: { navigateToUrl },
+    charts,
   } = useKibana().services;
 
   const { cardColor } = useSloCardColor(slo.summary.status);
@@ -238,8 +232,12 @@ export function SloCardChart({
   return (
     <Chart>
       <Settings
-        // TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md
-        baseTheme={LEGACY_DARK_THEME}
+        baseTheme={charts.theme.useChartsBaseTheme()}
+        theme={{
+          metric: {
+            iconAlign: 'right',
+          },
+        }}
         onElementClick={([d]) => {
           if (onClick) {
             onClick();