Skip to content

Commit a498900

Browse files
committed
Fix width styling
1 parent 907cbb4 commit a498900

File tree

3 files changed

+20
-4
lines changed

3 files changed

+20
-4
lines changed

packages/code-editor/src/CodeEditor/CodeEditor.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -279,6 +279,9 @@ const BaseCodeEditor = forwardRef<CodeEditorHandle, CodeEditorProps>(
279279
dom.style.position = 'absolute';
280280
dom.style.top = '-8px'; // Accounts for top padding of the editor
281281
dom.style.right = '0';
282+
dom.style.left = '0';
283+
dom.style.display = 'flex';
284+
dom.style.justifyContent = 'flex-end';
282285

283286
createRoot(dom).render(
284287
React.createElement(SearchForm, {

packages/code-editor/src/SearchForm/SearchForm.styles.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ const getBaseContainerStyles = (theme: Theme) => css`
2121
border-bottom-left-radius: ${borderRadius[150]}px;
2222
border-bottom-right-radius: ${borderRadius[150]}px;
2323
box-shadow: ${shadow[theme][100]};
24-
max-width: ${CONTAINER_MAX_WIDTH}px;
2524
width: 100%;
25+
max-width: ${CONTAINER_MAX_WIDTH}px;
2626
display: grid;
2727
grid-template-rows: ${SECTION_HEIGHT}px 0fr;
2828
overflow: hidden;
@@ -90,6 +90,7 @@ export const findInputContainerStyles = css`
9090
position: relative;
9191
flex: 1 1 ${INPUT_WIDTH}px;
9292
min-width: 100px;
93+
max-width: ${INPUT_WIDTH}px;
9394
margin-right: ${spacing[100]}px;
9495
`;
9596

@@ -111,6 +112,7 @@ export const replaceInputContainerStyles = css`
111112
position: relative;
112113
flex: 1 1 ${INPUT_WIDTH}px;
113114
min-width: 100px;
115+
max-width: ${INPUT_WIDTH}px;
114116
width: 100%;
115117
`;
116118

packages/code-editor/src/SearchForm/SearchForm.tsx

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,10 @@ export function SearchForm({ view }: SearchFormProps) {
6262
);
6363

6464
return (
65-
<div className={getContainerStyles({ theme, isOpen })}>
65+
<div
66+
className={getContainerStyles({ theme, isOpen })}
67+
data-no-context-menu="true"
68+
>
6669
<div className={findSectionStyles}>
6770
<IconButton
6871
className={toggleButtonStyles}
@@ -103,7 +106,12 @@ export function SearchForm({ view }: SearchFormProps) {
103106
<Icon glyph="X" />
104107
</IconButton>
105108
</div>
106-
<div className={replaceSectionStyles}>
109+
<div
110+
className={replaceSectionStyles}
111+
// @ts-expect-error - react type issue: https://github.com/facebook/react/pull/24730
112+
inert={!isOpen ? 'inert' : undefined}
113+
aria-hidden={!isOpen}
114+
>
107115
<div className={getReplaceInnerSectionStyles(theme)}>
108116
<TextInput
109117
placeholder="Replace"
@@ -113,7 +121,10 @@ export function SearchForm({ view }: SearchFormProps) {
113121
<Button aria-label="replace button" className={replaceButtonStyles}>
114122
Replace
115123
</Button>
116-
<Button aria-label="replace button" className={replaceButtonStyles}>
124+
<Button
125+
aria-label="replace all button"
126+
className={replaceButtonStyles}
127+
>
117128
Replace All
118129
</Button>
119130
</div>

0 commit comments

Comments
 (0)