fix: [AH-484]: fix breaking ui when name is too big (#2799)

* fix: [AH-484]: fix breaking ui when name is too big
pull/3576/head
Shivanand Sonnad 2024-10-10 07:36:14 +00:00 committed by Harness
parent 45be4fb7cb
commit bbb7bce02a
7 changed files with 17 additions and 2 deletions

View File

@ -25,5 +25,6 @@
border: 1px solid var(--grey-200);
border-radius: 4px;
max-width: max-content;
flex-shrink: 0;
text-transform: uppercase;
}

View File

@ -40,4 +40,8 @@
.cursor {
cursor: pointer;
}
.nameContainer {
flex-shrink: 1;
}
}

View File

@ -20,5 +20,6 @@ export declare const cursor: string
export declare const detailsSection: string
export declare const detailsSectionForRemote: string
export declare const header: string
export declare const nameContainer: string
export declare const serviceDetails: string
export declare const textOverflow: string

View File

@ -32,6 +32,8 @@ import RepositoryIcon from '@ar/frameworks/RepositoryStep/RepositoryIcon'
import RepositoryActionsWidget from '@ar/frameworks/RepositoryStep/RepositoryActionsWidget'
import type { Repository } from '@ar/pages/repository-details/types'
import css from './RepositoryDetailsHeader.module.scss'
interface RepositoryDetailsHeaderContentProps {
data: Repository
iconSize?: number
@ -49,7 +51,7 @@ export default function RepositoryDetailsHeaderContent(props: RepositoryDetailsH
<Container>
<Layout.Horizontal spacing="medium" flex={{ alignItems: 'center' }}>
<RepositoryIcon packageType={packageType as RepositoryPackageType} iconProps={{ size: iconSize }} />
<Layout.Vertical spacing="small">
<Layout.Vertical spacing="small" className={css.nameContainer}>
<Layout.Horizontal spacing="small" flex={{ alignItems: 'center', justifyContent: 'flex-start' }}>
<HeaderTitle>{identifier}</HeaderTitle>
<RepositoryLocationBadge type={RepositoryConfigType.VIRTUAL} />

View File

@ -25,4 +25,8 @@
.cursor {
cursor: pointer;
}
.nameContainer {
flex-shrink: 1;
}
}

View File

@ -18,3 +18,4 @@
// This is an auto-generated file
export declare const cursor: string
export declare const header: string
export declare const nameContainer: string

View File

@ -29,6 +29,8 @@ import RepositoryLocationBadge from '@ar/components/Badge/RepositoryLocationBadg
import { PageType, RepositoryConfigType, RepositoryPackageType } from '@ar/common/types'
import RepositoryActionsWidget from '@ar/frameworks/RepositoryStep/RepositoryActionsWidget'
import css from './UpstreamProxyDetailsHeader.module.scss'
interface UpstreamProxyDetailsHeaderContentProps {
data: Repository
iconSize?: number
@ -42,7 +44,7 @@ export default function UpstreamProxyDetailsHeaderContent(props: UpstreamProxyDe
<Container>
<Layout.Horizontal spacing="medium" flex={{ alignItems: 'center' }}>
<RepositoryIcon packageType={packageType as RepositoryPackageType} iconProps={{ size: iconSize }} />
<Layout.Vertical spacing="small">
<Layout.Vertical spacing="small" className={css.nameContainer}>
<Layout.Horizontal spacing="small" flex={{ alignItems: 'center', justifyContent: 'flex-start' }}>
<HeaderTitle>{identifier}</HeaderTitle>
<RepositoryLocationBadge type={RepositoryConfigType.UPSTREAM} />