From f4a84abbf71cfae0778f6eabd100a44049be7116 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=C3=B3teo?= Date: Thu, 4 Jun 2026 16:50:09 -0300 Subject: [PATCH 1/3] fix(editable-table): expand MultiLineEditor cells on focus to show full content --- .../components/EditableTable/StyledWrapper.js | 42 +++++++++++++++++-- .../MultiLineEditor/StyledWrapper.js | 6 +-- .../src/components/MultiLineEditor/index.js | 8 ++-- 3 files changed, 44 insertions(+), 12 deletions(-) diff --git a/packages/bruno-app/src/components/EditableTable/StyledWrapper.js b/packages/bruno-app/src/components/EditableTable/StyledWrapper.js index c15cde52a4a..0ccc7a4ec38 100644 --- a/packages/bruno-app/src/components/EditableTable/StyledWrapper.js +++ b/packages/bruno-app/src/components/EditableTable/StyledWrapper.js @@ -102,9 +102,25 @@ const StyledWrapper = styled.div` box-sizing: border-box; > div:not(.drag-handle) { - height: 33px; - max-height: 33px; + height: 1.5em; + max-height: 1.5em; overflow: hidden; + align-items: flex-start; + } + + > div:not(.drag-handle) > * { + min-height: 0; + } + + &:focus-within > div:not(.drag-handle) { + height: auto; + max-height: none; + overflow: visible; + align-items: center; + } + + > div:not(.drag-handle) > * { + min-height: 0; } /* Handle CodeMirror editors overflow */ @@ -122,15 +138,33 @@ const StyledWrapper = styled.div` max-width: 100%; } - .cm-line { + .cm-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } + + &:focus-within { + height: auto; + max-height: none; + overflow: visible; + white-space: normal; + text-overflow: clip; + } + + &:focus-within > div:not(.drag-handle) { + height: auto; + max-height: none; + overflow: visible; + } + + &:focus-within .single-line-editor, + &:focus-within .single-line-editor .CodeMirror { + height: auto !important; + } } } - } &.has-checkbox tbody td:nth-child(1) { width: 25px; diff --git a/packages/bruno-app/src/components/MultiLineEditor/StyledWrapper.js b/packages/bruno-app/src/components/MultiLineEditor/StyledWrapper.js index cb50c66126d..a044df0f771 100644 --- a/packages/bruno-app/src/components/MultiLineEditor/StyledWrapper.js +++ b/packages/bruno-app/src/components/MultiLineEditor/StyledWrapper.js @@ -20,11 +20,11 @@ const StyledWrapper = styled.div` } } - .CodeMirror { + .CodeMirror { background: transparent; height: fit-content; font-size: ${(props) => props.theme.font.size.base}; - line-height: 30px; + line-height: 1.5; display: flex; flex-direction: column; max-height: 200px; @@ -46,8 +46,6 @@ const StyledWrapper = styled.div` } .CodeMirror-cursor { - height: 20px !important; - margin-top: 5px !important; border-left: 1px solid ${(props) => props.theme.text} !important; } diff --git a/packages/bruno-app/src/components/MultiLineEditor/index.js b/packages/bruno-app/src/components/MultiLineEditor/index.js index f22c6acaa3e..36ac754ec39 100644 --- a/packages/bruno-app/src/components/MultiLineEditor/index.js +++ b/packages/bruno-app/src/components/MultiLineEditor/index.js @@ -39,10 +39,10 @@ class MultiLineEditor extends Component { * in request tabs. Falling through with CodeMirror.Pass when onRun is absent * would re-introduce the newline in collection/folder-level editors. */ - const runShortcut = () => {}; + const runShortcut = () => { }; this.editor = CodeMirror(this.editorRef.current, { - lineWrapping: false, + lineWrapping: true, lineNumbers: false, theme: this.props.theme === 'dark' ? 'monokai' : 'default', placeholder: this.props.placeholder, @@ -55,8 +55,8 @@ class MultiLineEditor extends Component { readOnly: this.props.readOnly, tabindex: 0, extraKeys: { - 'Cmd-F': () => {}, - 'Ctrl-F': () => {}, + 'Cmd-F': () => { }, + 'Ctrl-F': () => { }, 'Cmd-Enter': runShortcut, 'Ctrl-Enter': runShortcut, // Tabbing disabled to make tabindex work From 37475b1349162a1531005ac0a501bc9a44c7b132 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=C3=B3teo?= Date: Thu, 4 Jun 2026 16:50:25 -0300 Subject: [PATCH 2/3] fix(editable-table): expand SingleLineEditor cells on focus for headers tab --- .../src/components/SingleLineEditor/StyledWrapper.js | 4 +--- packages/bruno-app/src/components/SingleLineEditor/index.js | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js b/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js index 64663935a31..bf7a94f8e7e 100644 --- a/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js +++ b/packages/bruno-app/src/components/SingleLineEditor/StyledWrapper.js @@ -16,7 +16,7 @@ const StyledWrapper = styled.div` background: transparent; height: ${(props) => (props.$isCompact ? '1.375rem' : '2.125rem')}; font-size: ${(props) => props.theme.font.size.base}; - line-height: ${(props) => (props.$isCompact ? '1.375rem' : '1.875rem')}; + line-height: 1.5; overflow: hidden; .CodeMirror-scroll { @@ -40,8 +40,6 @@ const StyledWrapper = styled.div` } .CodeMirror-cursor { - height: ${(props) => (props.$isCompact ? '0.875rem' : '1.25rem')} !important; - margin-top: ${(props) => (props.$isCompact ? '0.25rem' : '0.3125rem')} !important; border-left: 1px solid ${(props) => props.theme.text} !important; } diff --git a/packages/bruno-app/src/components/SingleLineEditor/index.js b/packages/bruno-app/src/components/SingleLineEditor/index.js index ccd4b0d3d1c..6cfdcd914a2 100644 --- a/packages/bruno-app/src/components/SingleLineEditor/index.js +++ b/packages/bruno-app/src/components/SingleLineEditor/index.js @@ -45,7 +45,7 @@ class SingleLineEditor extends Component { this.editor = CodeMirror(this.editorRef.current, { placeholder: this.props.placeholder ?? '', - lineWrapping: false, + lineWrapping: true, lineNumbers: false, theme: this.props.theme === 'dark' ? 'monokai' : 'default', mode: 'brunovariables', From 31e80abdd00e556d4b9124e17d7fe614aae73185 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=C3=B3teo?= Date: Thu, 4 Jun 2026 17:17:27 -0300 Subject: [PATCH 3/3] fix(editable-table): remove duplicate min-height rule per review feedback --- .../bruno-app/src/components/EditableTable/StyledWrapper.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/bruno-app/src/components/EditableTable/StyledWrapper.js b/packages/bruno-app/src/components/EditableTable/StyledWrapper.js index 0ccc7a4ec38..3b591469e7f 100644 --- a/packages/bruno-app/src/components/EditableTable/StyledWrapper.js +++ b/packages/bruno-app/src/components/EditableTable/StyledWrapper.js @@ -119,10 +119,6 @@ const StyledWrapper = styled.div` align-items: center; } - > div:not(.drag-handle) > * { - min-height: 0; - } - /* Handle CodeMirror editors overflow */ .cm-editor { max-width: 100%;