fix(ui): fix error overlay issue + center layout for error and loading states

Author: mark-karnaukh-extern-sap

packages/aurora/src/client/routes/_auth/projects/$projectId/storage/-components/Ceph/Containers/index.tsx

@@ -189,7 +189,7 @@ export const CephContainers = () => {
   // Handle loading state
   if (isLoading) {
     return (
-      <Stack className="fixed inset-0" distribution="center" alignment="center" direction="vertical">
+      <Stack className="absolute inset-0" distribution="center" alignment="center" direction="vertical">
         <Spinner variant="primary" size="large" className="mb-2" />
         <Trans>Loading Buckets...</Trans>
       </Stack>
@@ -201,7 +201,7 @@ export const CephContainers = () => {
     const errorMessage = error.message
 
     return (
-      <Stack className="fixed inset-0" distribution="center" alignment="center" direction="vertical">
+      <Stack className="absolute inset-0" distribution="center" alignment="center" direction="vertical">
         <Trans>Error Loading Buckets: {errorMessage}</Trans>
       </Stack>
     )

packages/aurora/src/client/routes/_auth/projects/$projectId/storage/-components/Ceph/Objects/ObjectBrowserView.tsx

@@ -210,21 +210,19 @@ export function ObjectBrowserView({ bucketName }: ObjectBrowserViewProps) {
 
   if (isLoading && !continuationToken) {
     return (
-      <Stack direction="horizontal" gap="2" alignment="center" className="mt-8">
-        <Spinner />
-        <span className="text-juno-grey-light-1 text-sm">
-          <Trans>Loading objects...</Trans>
-        </span>
+      <Stack className="absolute inset-0" distribution="center" alignment="center" direction="vertical">
+        <Spinner variant="primary" size="large" className="mb-2" />
+        <Trans>Loading objects...</Trans>
       </Stack>
     )
   }
 
   if (error) {
     const errorMessage = error.message
     return (
-      <p className="text-juno-red mt-4 text-sm">
+      <Stack className="absolute inset-0" distribution="center" alignment="center" direction="vertical">
         <Trans>Failed to load objects: {errorMessage}</Trans>
-      </p>
+      </Stack>
     )
   }
 

packages/aurora/src/client/routes/_auth/projects/$projectId/storage/-components/Swift/Containers/index.tsx

@@ -201,7 +201,7 @@ export const SwiftContainers = () => {
   // Handle loading state
   if (isLoading) {
     return (
-      <Stack className="fixed inset-0" distribution="center" alignment="center" direction="vertical">
+      <Stack className="absolute inset-0" distribution="center" alignment="center" direction="vertical">
         <Spinner variant="primary" size="large" className="mb-2" />
         <Trans>Loading Containers...</Trans>
       </Stack>
@@ -213,7 +213,7 @@ export const SwiftContainers = () => {
     const errorMessage = error.message
 
     return (
-      <Stack className="fixed inset-0" distribution="center" alignment="center" direction="vertical">
+      <Stack className="absolute inset-0" distribution="center" alignment="center" direction="vertical">
         <Trans>Error Loading Containers: {errorMessage}</Trans>
       </Stack>
     )

packages/aurora/src/client/routes/_auth/projects/$projectId/storage/-components/Swift/Objects/index.tsx

@@ -294,7 +294,7 @@ export const SwiftObjects = ({ provider, containerName }: { provider: string; co
 
   if (isLoading) {
     return (
-      <Stack className="fixed inset-0" distribution="center" alignment="center" direction="vertical">
+      <Stack className="absolute inset-0" distribution="center" alignment="center" direction="vertical">
         <Spinner variant="primary" size="large" className="mb-2" />
         <Trans>Loading Objects...</Trans>
       </Stack>
@@ -304,7 +304,7 @@ export const SwiftObjects = ({ provider, containerName }: { provider: string; co
   if (error) {
     const errorMessage = error.message
     return (
-      <Stack className="fixed inset-0" distribution="center" alignment="center" direction="vertical">
+      <Stack className="absolute inset-0" distribution="center" alignment="center" direction="vertical">
         <Trans>Error Loading Objects: {errorMessage}</Trans>
       </Stack>
     )