diff --git a/web/package.json b/web/package.json index d14f040af..9a5301e0e 100644 --- a/web/package.json +++ b/web/package.json @@ -42,7 +42,7 @@ "@codemirror/state": "^6.2.0", "@codemirror/view": "^6.9.6", "@harness/design-system": "1.4.0", - "@harness/icons": "1.149.0", + "@harness/icons": "1.174.0", "@harness/uicore": "3.131.1", "@harness/use-modal": "1.1.0", "@popperjs/core": "^2.4.2", diff --git a/web/src/components/BranchTagSelect/BranchTagSelect.module.scss b/web/src/components/BranchTagSelect/BranchTagSelect.module.scss index 1eec2ec79..c73704305 100644 --- a/web/src/components/BranchTagSelect/BranchTagSelect.module.scss +++ b/web/src/components/BranchTagSelect/BranchTagSelect.module.scss @@ -61,8 +61,15 @@ html[class=''] { .listContainer { min-height: 50px; - max-height: 300px; + max-height: 200px; overflow-y: auto; + + :global { + a.bp3-menu-item:hover { + background: var(--primary-1) !important; + color: var(--grey-1000) !important; + } + } } .newBtnText { diff --git a/web/src/components/BranchTagSelect/BranchTagSelect.tsx b/web/src/components/BranchTagSelect/BranchTagSelect.tsx index a0d5d95fe..77811949a 100644 --- a/web/src/components/BranchTagSelect/BranchTagSelect.tsx +++ b/web/src/components/BranchTagSelect/BranchTagSelect.tsx @@ -30,6 +30,7 @@ export interface BranchTagSelectProps extends Omit, Pic forBranchesOnly?: boolean labelPrefix?: string placeHolder?: string + popoverClassname?: string } export const BranchTagSelect: React.FC = ({ @@ -43,6 +44,7 @@ export const BranchTagSelect: React.FC = ({ labelPrefix, placeHolder, className, + popoverClassname, ...props }) => { const [query, onQuery] = useState('') @@ -90,7 +92,7 @@ export const BranchTagSelect: React.FC = ({ interactionKind: 'click', usePortal: true, position: PopoverPosition.BOTTOM_LEFT, - popoverClassName: css.popover + popoverClassName: cx(css.popover, popoverClassname) }} tabIndex={0} {...props} diff --git a/web/src/components/CreateBranchModal/CreateBranchModal.module.scss b/web/src/components/CreateBranchModal/CreateBranchModal.module.scss index cd8e62bfc..3437fc91f 100644 --- a/web/src/components/CreateBranchModal/CreateBranchModal.module.scss +++ b/web/src/components/CreateBranchModal/CreateBranchModal.module.scss @@ -1,4 +1,5 @@ .main { + padding-left: var(--spacing-10) !important; .title { --typography-size: 20px !important; } @@ -9,6 +10,10 @@ font-weight: 500 !important; } + .container { + margin-right: var(--spacing-10) !important; + } + // .branchSourceDesc { // color: var(--grey-400) !important; // font-size: var(--form-input-font-size) !important; @@ -20,3 +25,28 @@ .maxContainer { max-width: 250px; } + +.branchTagSelect { + width: 100% !important; +} + +.selectContainer { + :global { + .bp3-popover-wrapper { + width: 100% !important; + .bp3-popover-target { + width: 100% !important; + } + } + .bp3-button { + justify-content: start; + } + .bp3-icon-chevron-down { + margin-left: auto; + } + } +} + +.popoverContainer { + width: 489px; +} diff --git a/web/src/components/CreateBranchModal/CreateBranchModal.module.scss.d.ts b/web/src/components/CreateBranchModal/CreateBranchModal.module.scss.d.ts index d9ad189cd..144ce1d50 100644 --- a/web/src/components/CreateBranchModal/CreateBranchModal.module.scss.d.ts +++ b/web/src/components/CreateBranchModal/CreateBranchModal.module.scss.d.ts @@ -4,6 +4,10 @@ declare const styles: { readonly main: string readonly title: string readonly label: string + readonly container: string readonly maxContainer: string + readonly branchTagSelect: string + readonly selectContainer: string + readonly popoverContainer: string } export default styles diff --git a/web/src/components/CreateBranchModal/CreateBranchModal.tsx b/web/src/components/CreateBranchModal/CreateBranchModal.tsx index 1a6bf593f..16b8863af 100644 --- a/web/src/components/CreateBranchModal/CreateBranchModal.tsx +++ b/web/src/components/CreateBranchModal/CreateBranchModal.tsx @@ -94,12 +94,12 @@ export function useCreateBranchModal({ enforceFocus={false} onClose={hideModal} title={''} - style={{ width: 700, maxHeight: '95vh', overflow: 'auto' }}> - + style={{ width: 585, maxHeight: '95vh', overflow: 'auto' }}> + - {getString('createABranch')} + {getString('createABranch')} - + initialValues={{ name: branchName, @@ -123,32 +123,33 @@ export function useCreateBranchModal({ - + {/* {getString('branchSourceDesc')} */} - + -