fix(ui): remove hardcoded margin-right from Spinner component

.changeset/remove-spinner-hardcoded-margin.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-ui-components": patch
+---
+
+Remove hardcoded `mr-3` margin from Spinner component. The margin was applied globally, causing layout issues when Spinner is used inside components like Button that manage their own spacing. Callers that relied on the built-in margin have been updated to add the margin explicitly.

apps/doop/src/components/shared/HintLoading.tsx

@@ -9,7 +9,7 @@ import { Stack, Spinner } from "@cloudoperators/juno-ui-components"
 const HintLoading = ({ text, className }: any) => {
   return (
     <Stack alignment="center" className={className}>
-      <Spinner variant="primary" />
+      <Spinner variant="primary" className="mr-3" />
       {text ? <span>{text}</span> : <span>Loading...</span>}
     </Stack>
   )

apps/greenhouse/src/components/core-apps/org-admin/components/shared/HintLoading.tsx

@@ -22,7 +22,7 @@ const HintLoading = ({ text, centered }: any) => {
   return (
     <Stack {...stackProps}>
       <Stack alignment="center">
-        <Spinner variant="primary" />
+        <Spinner variant="primary" className="mr-3" />
         {text ? <span>{text}</span> : <span>Loading...</span>}
       </Stack>
     </Stack>

apps/greenhouse/src/components/shared/HintLoading.tsx

@@ -10,7 +10,7 @@ import { Stack, Spinner } from "@cloudoperators/juno-ui-components"
 const HintLoading = ({ text }: any) => {
   return (
     <Stack alignment="center">
-      <Spinner variant="primary" />
+      <Spinner variant="primary" className="mr-3" />
       {text ? <span>{text}</span> : <span>Loading...</span>}
     </Stack>
   )

apps/heureka/src/components/Service/index.tsx

@@ -55,7 +55,7 @@ export const Service = () => {
   return (
     <>
       <ErrorBoundary displayErrorMessage>
-        <Suspense fallback={<Spinner className="mt-4" />}>
+        <Suspense fallback={<Spinner className="mt-4 mr-3" />}>
           <ServiceDetails servicePromise={servicePromise} />
         </Suspense>
       </ErrorBoundary>

apps/heureka/src/components/Services/AllServicesIssuesCount.tsx

@@ -36,7 +36,7 @@ export const AllServicesIssuesCount = () => {
   return (
     <ErrorBoundary>
       <Stack className="bg-theme-background-lvl-1 py-1.5 px-4 my-px text-theme-light" alignment="center">
-        <Suspense fallback={<Spinner size="small" />}>
+        <Suspense fallback={<Spinner size="small" className="mr-3" />}>
           <IssuesCount servicesPromise={servicesPromise} />
         </Suspense>
       </Stack>

apps/heureka/src/components/Vulnerabilities/AllVulnerabilitiesCount.tsx

@@ -37,7 +37,7 @@ export const AllVulnerabilitiesCount = () => {
   return (
     <ErrorBoundary>
       <Stack className="bg-theme-background-lvl-1 py-1.5 px-4 my-px text-theme-light" alignment="center">
-        <Suspense fallback={<Spinner size="small" />}>
+        <Suspense fallback={<Spinner size="small" className="mr-3" />}>
           <VulnerabilitiesCount vulnerabilitiesPromise={vulnerabilitiesPromise} />
         </Suspense>
       </Stack>

apps/heureka/src/routes/services/$service/images/$image.tsx

@@ -62,7 +62,7 @@ function ImageDetailsPage() {
   // Otherwise, render the image details
   return (
     <ErrorBoundary displayErrorMessage>
-      <Suspense fallback={<Spinner className="mt-4" />}>
+      <Suspense fallback={<Spinner className="mt-4 mr-3" />}>
         <ImageDetails
           imagesPromise={imagesPromise}
           imageRepository={image}

apps/heureka/src/routes/services/$service/images/$image/versions/$version.tsx

@@ -47,7 +47,7 @@ function ImageVersionDetailsPage() {
 
   return (
     <ErrorBoundary displayErrorMessage>
-      <Suspense fallback={<Spinner className="mt-4" />}>
+      <Suspense fallback={<Spinner className="mt-4 mr-3" />}>
         <ImageVersionDetails
           imageVersionsPromise={imageVersionsPromise}
           imageVersion={version}

packages/ui-components/src/components/Spinner/Spinner.component.tsx

@@ -7,7 +7,6 @@ import React, { HTMLProps, ReactNode } from "react"
 
 const spinnerBaseStyles = `
   jn:animate-spin 
-  jn:mr-3 
   jn:h-5 
   jn:w-5 
 `