From 96057dbcf25b5b6c77c653885f328174f04e1e67 Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Tue, 17 Jun 2025 22:36:51 +0300
Subject: [PATCH] [Bug]: Empty spaces on User Details page #2745

---
 .../src/pages/User/Details/Billing/index.tsx  |  8 +-
 .../src/pages/User/Details/Payments/index.tsx |  1 +
 .../src/pages/User/Details/Projects/index.tsx | 18 +++-
 .../src/pages/User/Details/Settings/index.tsx | 96 +++++++++----------
 frontend/src/pages/User/Details/index.tsx     |  8 +-
 5 files changed, 70 insertions(+), 61 deletions(-)

diff --git a/frontend/src/pages/User/Details/Billing/index.tsx b/frontend/src/pages/User/Details/Billing/index.tsx
index f3385dd4eb..5e346169a6 100644
--- a/frontend/src/pages/User/Details/Billing/index.tsx
+++ b/frontend/src/pages/User/Details/Billing/index.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams, useSearchParams } from 'react-router-dom';
 
-import { Box, Button, Container, Header, Hotspot, Loader, Modal, SpaceBetween } from 'components';
+import { Box, Button, Header, Hotspot, Loader, Modal, SpaceBetween } from 'components';
 import { PermissionGuard } from 'components/PermissionGuard';
 import { HotspotIds } from 'layouts/AppLayout/TutorialPanel/constants';
 
@@ -102,7 +102,9 @@ export const Billing: React.FC = () => {
 
     return (
         <SpaceBetween size="l">
-            <Container header={<Header variant="h2">{t('billing.balance')}</Header>}>
+            <div>
+                <Header variant="h2">{t('billing.balance')}</Header>
+
                 {isLoading && <Loader />}
 
                 {data && (
@@ -126,7 +128,7 @@ export const Billing: React.FC = () => {
                         </SpaceBetween>
                     </SpaceBetween>
                 )}
-            </Container>
+            </div>
 
             <Payments
                 payments={data?.billing_history ?? []}
diff --git a/frontend/src/pages/User/Details/Payments/index.tsx b/frontend/src/pages/User/Details/Payments/index.tsx
index 884c2b7275..c146782bd2 100644
--- a/frontend/src/pages/User/Details/Payments/index.tsx
+++ b/frontend/src/pages/User/Details/Payments/index.tsx
@@ -54,6 +54,7 @@ export const Payments: React.FC<IProps> = ({ payments, emptyMessageContent, isLo
         <Table
             {...collectionProps}
             columnDefinitions={columns}
+            variant="borderless"
             items={items}
             loading={isLoading}
             loadingText={t('common.loading')}
diff --git a/frontend/src/pages/User/Details/Projects/index.tsx b/frontend/src/pages/User/Details/Projects/index.tsx
index 5eeebb9b23..d1370aec93 100644
--- a/frontend/src/pages/User/Details/Projects/index.tsx
+++ b/frontend/src/pages/User/Details/Projects/index.tsx
@@ -2,7 +2,12 @@ import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 
-import { ListEmptyMessage, NavigateLink, Pagination, Table } from 'components';
+import {
+    ListEmptyMessage,
+    NavigateLink,
+    // Pagination,
+    Table,
+} from 'components';
 
 import { useBreadcrumbs, useCollection } from 'hooks';
 import { ROUTES } from 'routes';
@@ -45,11 +50,15 @@ export const UserProjectList: React.FC = () => {
             .sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
     }, [data]);
 
-    const { items, collectionProps, paginationProps } = useCollection(filteredData, {
+    const {
+        items,
+        collectionProps,
+        // paginationProps
+    } = useCollection(filteredData, {
         filtering: {
             empty: renderEmptyMessage(),
         },
-        pagination: { pageSize: 20 },
+        // pagination: { pageSize: 20 },
         selection: {},
     });
 
@@ -66,11 +75,12 @@ export const UserProjectList: React.FC = () => {
     return (
         <Table
             {...collectionProps}
+            variant="borderless"
             columnDefinitions={columns}
             items={items}
             loading={isLoading || isFetching}
             loadingText={t('common.loading')}
-            pagination={<Pagination {...paginationProps} disabled={isLoading} />}
+            // pagination={<Pagination {...paginationProps} disabled={isLoading} />}
         />
     );
 };
diff --git a/frontend/src/pages/User/Details/Settings/index.tsx b/frontend/src/pages/User/Details/Settings/index.tsx
index 0338ddd02b..da08b4ca6c 100644
--- a/frontend/src/pages/User/Details/Settings/index.tsx
+++ b/frontend/src/pages/User/Details/Settings/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import { Box, Button, ColumnLayout, Container, Header, Link, Loader, Popover, SpaceBetween, StatusIndicator } from 'components';
+import { Box, Button, ColumnLayout, Header, Link, Loader, Popover, SpaceBetween, StatusIndicator } from 'components';
 import { PermissionGuard } from 'components/PermissionGuard';
 
 import { useAppSelector, useBreadcrumbs, usePermissionGuard } from 'hooks';
@@ -52,63 +52,59 @@ export const Settings: React.FC = () => {
 
     return (
         <div>
-            <Container
-                header={
-                    <Header
-                        variant="h2"
-                        actions={
-                            <Button onClick={editUserHandler} disabled={isDisabledUserEditing()}>
-                                {t('common.edit')}
-                            </Button>
-                        }
-                    >
-                        {t('users.account_settings')}
-                    </Header>
+            <Header
+                variant="h2"
+                actions={
+                    <Button onClick={editUserHandler} disabled={isDisabledUserEditing()}>
+                        {t('common.edit')}
+                    </Button>
                 }
             >
-                {isLoading && <Loader />}
+                {t('users.account_settings')}
+            </Header>
 
-                {data && (
-                    <ColumnLayout columns={2} variant="text-grid">
-                        <SpaceBetween size="l">
-                            {/*<div>*/}
-                            {/*    <Box variant="awsui-key-label">{t('users.user_name')}</Box>*/}
-                            {/*    <div>{data.user_name}</div>*/}
-                            {/*</div>*/}
+            {isLoading && <Loader />}
 
-                            <div>
-                                <Box variant="awsui-key-label">{t('users.email')}</Box>
-                                <div>{data.email ? <Link href={`mailto:${data.email}`}>{data.email}</Link> : '-'}</div>
-                            </div>
+            {data && (
+                <ColumnLayout columns={2} variant="text-grid">
+                    <SpaceBetween size="l">
+                        {/*<div>*/}
+                        {/*    <Box variant="awsui-key-label">{t('users.user_name')}</Box>*/}
+                        {/*    <div>{data.user_name}</div>*/}
+                        {/*</div>*/}
 
-                            <PermissionGuard allowedGlobalRoles={[GlobalUserRole.ADMIN]}>
-                                <div>
-                                    <Box variant="awsui-key-label">{t('users.global_role')}</Box>
-                                    <div>{t(`roles.${data.global_role}`)}</div>
-                                </div>
-                            </PermissionGuard>
+                        <div>
+                            <Box variant="awsui-key-label">{t('users.email')}</Box>
+                            <div>{data.email ? <Link href={`mailto:${data.email}`}>{data.email}</Link> : '-'}</div>
+                        </div>
 
+                        <PermissionGuard allowedGlobalRoles={[GlobalUserRole.ADMIN]}>
                             <div>
-                                <Box variant="awsui-key-label">{t('users.token')}</Box>
-
-                                <div className={styles.token}>
-                                    <Popover
-                                        dismissButton={false}
-                                        position="top"
-                                        size="small"
-                                        triggerType="custom"
-                                        content={<StatusIndicator type="success">{t('users.token_copied')}</StatusIndicator>}
-                                    >
-                                        <Button formAction="none" iconName="copy" variant="link" onClick={onCopyToken} />
-                                    </Popover>
-
-                                    <div>{data.creds.token}</div>
-                                </div>
+                                <Box variant="awsui-key-label">{t('users.global_role')}</Box>
+                                <div>{t(`roles.${data.global_role}`)}</div>
+                            </div>
+                        </PermissionGuard>
+
+                        <div>
+                            <Box variant="awsui-key-label">{t('users.token')}</Box>
+
+                            <div className={styles.token}>
+                                <Popover
+                                    dismissButton={false}
+                                    position="top"
+                                    size="small"
+                                    triggerType="custom"
+                                    content={<StatusIndicator type="success">{t('users.token_copied')}</StatusIndicator>}
+                                >
+                                    <Button formAction="none" iconName="copy" variant="link" onClick={onCopyToken} />
+                                </Popover>
+
+                                <div>{data.creds.token}</div>
                             </div>
-                        </SpaceBetween>
-                    </ColumnLayout>
-                )}
-            </Container>
+                        </div>
+                    </SpaceBetween>
+                </ColumnLayout>
+            )}
         </div>
     );
 };
diff --git a/frontend/src/pages/User/Details/index.tsx b/frontend/src/pages/User/Details/index.tsx
index 5ae99ec17f..805b2efc98 100644
--- a/frontend/src/pages/User/Details/index.tsx
+++ b/frontend/src/pages/User/Details/index.tsx
@@ -63,16 +63,19 @@ export const UserDetails: React.FC = () => {
             label: t('users.settings'),
             id: UserDetailsTabTypeEnum.SETTINGS,
             href: ROUTES.USER.DETAILS.FORMAT(paramUserName),
+            content: <Outlet />,
         },
         {
             label: t('users.projects'),
             id: UserDetailsTabTypeEnum.PROJECTS,
             href: ROUTES.USER.PROJECTS.FORMAT(paramUserName),
+            content: <Outlet />,
         },
         process.env.UI_VERSION === 'sky' && {
             label: t('billing.title'),
             id: UserDetailsTabTypeEnum.BILLING,
             href: ROUTES.USER.BILLING.LIST.FORMAT(paramUserName),
+            content: <Outlet />,
         },
     ].filter(Boolean);
 
@@ -88,10 +91,7 @@ export const UserDetails: React.FC = () => {
                 }
             >
                 <SpaceBetween size="l">
-                    <div />
-                    <div />
-                    <Tabs withNavigation tabs={tabs} />
-                    <Outlet />
+                    <Tabs variant="container" withNavigation tabs={tabs} />
                 </SpaceBetween>
             </ContentLayout>