fix(#2605): fix editor view height (#2758)

* fix(#2605): fix editor view height * chore: disabled prettier on github actions
2024-11-21 15:33:11 +01:00 · 2024-08-05 17:49:04 +05:30 · 2024-08-05 17:49:04 +05:30 · 4598bb1bdd
commit 4598bb1bdd
parent adb843faa7
15 changed files with 23 additions and 39 deletions
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@ -71,15 +71,3 @@ jobs:
        with:
          files: packages/bruno-tests/collection/junit.xml
          comment_mode: always
-  prettier:
-    name: Prettier
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version-file: '.nvmrc'
-      - name: Install dependencies
-        run: npm ci --legacy-peer-deps
-      - name: Run Prettier
-        run: npm run test:prettier:web
--- a/package-lock.json
+++ b/package-lock.json
@ -19668,7 +19668,7 @@
    },
    "packages/bruno-electron": {
      "name": "bruno",
-      "version": "v1.21.0",
+      "version": "v1.23.1",
      "dependencies": {
        "@aws-sdk/credential-providers": "3.525.0",
        "@usebruno/common": "0.1.0",
--- a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
@ -6,6 +6,7 @@ const StyledWrapper = styled.div`
    border: solid 1px ${(props) => props.theme.codemirror.border};
    font-family: ${(props) => (props.font ? props.font : 'default')};
    line-break: anywhere;
+    flex: 1 1 0;
  }

  .CodeMirror-overlayscroll-horizontal div,
--- a/packages/bruno-app/src/components/CodeEditor/index.js
+++ b/packages/bruno-app/src/components/CodeEditor/index.js
@ -289,7 +289,7 @@ export default class CodeEditor extends React.Component {
    }
    return (
      <StyledWrapper
-        className="h-full w-full"
+        className="h-full w-full flex flex-col relative"
        aria-label="Code Editor"
        font={this.props.font}
        ref={(node) => {
--- a/packages/bruno-app/src/components/Documentation/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Documentation/StyledWrapper.js
@ -1,14 +1,6 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
-  div.CodeMirror {
-    /* todo: find a better way */
-    height: calc(100vh - 240px);
-
-    .CodeMirror-scroll {
-      padding-bottom: 0px;
-    }
-  }
  .editing-mode {
    cursor: pointer;
    color: ${(props) => props.theme.colors.text.yellow};
--- a/packages/bruno-app/src/components/Documentation/index.js
+++ b/packages/bruno-app/src/components/Documentation/index.js
@ -37,8 +37,8 @@ const Documentation = ({ item, collection }) => {
  }

  return (
-    <StyledWrapper className="mt-1 h-full w-full relative">
-      <div className="editing-mode mb-2" role="tab" onClick={toggleViewMode}>
+    <StyledWrapper className="flex flex-col gap-y-1 h-full w-full relative">
+      <div className="editing-mode" role="tab" onClick={toggleViewMode}>
        {isEditing ? 'Preview' : 'Edit'}
      </div>

--- a/packages/bruno-app/src/components/MarkDown/StyledWrapper.js
+++ b/packages/bruno-app/src/components/MarkDown/StyledWrapper.js
@ -2,7 +2,6 @@ import styled from 'styled-components';

 const StyledMarkdownBodyWrapper = styled.div`
  background: transparent;
-  height: inherit;
  .markdown-body {
    background: transparent;
    overflow-y: auto;
--- a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
+++ b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
@ -137,7 +137,7 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
        ) : null}
      </div>
      <section
-        className={classnames('flex w-full', {
+        className={classnames('flex w-full flex-1', {
          'mt-5': !isMultipleContentTab
        })}
      >
--- a/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryEditor/StyledWrapper.js
@ -4,6 +4,7 @@ const StyledWrapper = styled.div`
  div.CodeMirror {
    background: ${(props) => props.theme.codemirror.bg};
    border: solid 1px ${(props) => props.theme.codemirror.border};
+    flex: 1 1 0;
  }

  textarea.cm-editor {
--- a/packages/bruno-app/src/components/RequestPane/RequestBody/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/RequestBody/StyledWrapper.js
@ -1,10 +1,6 @@
 import styled from 'styled-components';

 const Wrapper = styled.div`
-  div.CodeMirror {
-    /* todo: find a better way */
-    height: calc(100vh - 220px);
-  }
 `;

 export default Wrapper;
--- a/packages/bruno-app/src/components/RequestPane/Script/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Script/index.js
@ -40,8 +40,8 @@ const Script = ({ item, collection }) => {

  return (
    <StyledWrapper className="w-full flex flex-col">
-      <div className="flex-1 mt-2">
-        <div className="mb-1 title text-xs">Pre Request</div>
+      <div className="flex flex-col flex-1 mt-2 gap-y-2">
+        <div className="title text-xs">Pre Request</div>
        <CodeEditor
          collection={collection}
          value={requestScript || ''}
@ -53,8 +53,8 @@ const Script = ({ item, collection }) => {
          onSave={onSave}
        />
      </div>
-      <div className="flex-1 mt-6">
-        <div className="mt-1 mb-1 title text-xs">Post Response</div>
+      <div className="flex flex-col flex-1 mt-2 gap-y-2">
+        <div className="title text-xs">Post Response</div>
        <CodeEditor
          collection={collection}
          value={responseScript || ''}
--- a/packages/bruno-app/src/components/RequestPane/Vars/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Vars/index.js
@ -9,11 +9,11 @@ const Vars = ({ item, collection }) => {

  return (
    <StyledWrapper className="w-full flex flex-col">
-      <div className="flex-1 mt-2">
+      <div className="mt-2">
        <div className="mb-1 title text-xs">Pre Request</div>
        <VarsTable item={item} collection={collection} vars={requestVars} varType="request" />
      </div>
-      <div className="flex-1">
+      <div>
        <div className="mt-1 mb-1 title text-xs">Post Response</div>
        <VarsTable item={item} collection={collection} vars={responseVars} varType="response" />
      </div>
--- a/packages/bruno-app/src/components/RequestTabPanel/index.js
+++ b/packages/bruno-app/src/components/RequestTabPanel/index.js
@ -158,10 +158,9 @@ const RequestTabPanel = () => {
      <section className="main flex flex-grow pb-4 relative">
        <section className="request-pane">
          <div
-            className="px-4"
+            className="px-4 h-full"
            style={{
-              width: `${Math.max(leftPaneWidth, MIN_LEFT_PANE_WIDTH)}px`,
-              height: `calc(100% - ${DEFAULT_PADDING}px)`
+              width: `${Math.max(leftPaneWidth, MIN_LEFT_PANE_WIDTH)}px`
            }}
          >
            {item.type === 'graphql-request' ? (
--- a/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestTabs/StyledWrapper.js
@ -14,6 +14,8 @@ const Wrapper = styled.div`
      display: none;
    }

+    scrollbar-width: none;
+
    li {
      display: inline-flex;
      max-width: 150px;
--- a/packages/bruno-app/src/styles/globals.css
+++ b/packages/bruno-app/src/styles/globals.css
@ -58,6 +58,12 @@ body::-webkit-scrollbar-thumb,
  border-radius: 5rem;
 }

+* {
+  /* This ensures that scrollbars are only visible when the user starts to scroll,
+  providing a cleaner and more minimalistic appearance. */
+  scrollbar-width: thin;
+}
+
 /*
 * todo: this will be supported in the future to be changed via applying a theme
 * making all the checkboxes and radios bigger