mirror of
https://github.com/usebruno/bruno.git
synced 2025-06-21 20:41:41 +02:00
fix: fix overflow issues in keyval editors in the app
This commit is contained in:
parent
5a78dfa210
commit
80f9e33be5
@ -5,6 +5,7 @@ const Wrapper = styled.div`
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
table-layout: fixed;
|
||||||
|
|
||||||
thead,
|
thead,
|
||||||
td {
|
td {
|
||||||
@ -18,6 +19,14 @@ const Wrapper = styled.div`
|
|||||||
}
|
}
|
||||||
td {
|
td {
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
|
|
||||||
|
&:nth-child(1) {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3) {
|
||||||
|
width: 70px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -5,6 +5,7 @@ const Wrapper = styled.div`
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
table-layout: fixed;
|
||||||
|
|
||||||
thead,
|
thead,
|
||||||
td {
|
td {
|
||||||
@ -18,6 +19,14 @@ const Wrapper = styled.div`
|
|||||||
}
|
}
|
||||||
td {
|
td {
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
|
|
||||||
|
&:nth-child(1) {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3) {
|
||||||
|
width: 70px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -5,6 +5,7 @@ const Wrapper = styled.div`
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
table-layout: fixed;
|
||||||
|
|
||||||
thead,
|
thead,
|
||||||
td {
|
td {
|
||||||
@ -18,6 +19,14 @@ const Wrapper = styled.div`
|
|||||||
}
|
}
|
||||||
td {
|
td {
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
|
|
||||||
|
&:nth-child(1) {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3) {
|
||||||
|
width: 70px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React from 'react';
|
import React, { useState, useEffect} from 'react';
|
||||||
import get from 'lodash/get';
|
import get from 'lodash/get';
|
||||||
import { useDispatch } from 'react-redux';
|
import { useDispatch } from 'react-redux';
|
||||||
import { requestUrlChanged, updateRequestMethod } from 'providers/ReduxStore/slices/collections';
|
import { requestUrlChanged, updateRequestMethod } from 'providers/ReduxStore/slices/collections';
|
||||||
@ -15,6 +15,13 @@ const QueryUrl = ({ item, collection, handleRun }) => {
|
|||||||
const method = item.draft ? get(item, 'draft.request.method') : get(item, 'request.method');
|
const method = item.draft ? get(item, 'draft.request.method') : get(item, 'request.method');
|
||||||
const url = item.draft ? get(item, 'draft.request.url') : get(item, 'request.url');
|
const url = item.draft ? get(item, 'draft.request.url') : get(item, 'request.url');
|
||||||
|
|
||||||
|
const [methodSelectorWidth, setMethodSelectorWidth] = useState(90);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const el = document.querySelector(".method-selector-container");
|
||||||
|
setMethodSelectorWidth(el.offsetWidth);
|
||||||
|
}, [method]);
|
||||||
|
|
||||||
const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
|
const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
|
||||||
const onUrlChange = (value) => {
|
const onUrlChange = (value) => {
|
||||||
dispatch(
|
dispatch(
|
||||||
@ -41,7 +48,14 @@ const QueryUrl = ({ item, collection, handleRun }) => {
|
|||||||
<div className="flex items-center h-full method-selector-container">
|
<div className="flex items-center h-full method-selector-container">
|
||||||
<HttpMethodSelector method={method} onMethodSelect={onMethodSelect} />
|
<HttpMethodSelector method={method} onMethodSelect={onMethodSelect} />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center flex-grow input-container h-full">
|
<div
|
||||||
|
className="flex items-center flex-grow input-container h-full"
|
||||||
|
style={{
|
||||||
|
color: 'yellow',
|
||||||
|
width: `calc(100% - ${methodSelectorWidth}px)`,
|
||||||
|
maxWidth: `calc(100% - ${methodSelectorWidth}px)`
|
||||||
|
}}
|
||||||
|
>
|
||||||
<SingleLineEditor
|
<SingleLineEditor
|
||||||
value={url}
|
value={url}
|
||||||
onSave={onSave}
|
onSave={onSave}
|
||||||
|
@ -5,6 +5,7 @@ const Wrapper = styled.div`
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
table-layout: fixed;
|
||||||
|
|
||||||
thead,
|
thead,
|
||||||
td {
|
td {
|
||||||
@ -18,6 +19,14 @@ const Wrapper = styled.div`
|
|||||||
}
|
}
|
||||||
td {
|
td {
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
|
|
||||||
|
&:nth-child(1) {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-child(3) {
|
||||||
|
width: 70px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
const StyledWrapper = styled.div`
|
const StyledWrapper = styled.div`
|
||||||
width: 100%;
|
|
||||||
height: 30px;
|
height: 30px;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
.CodeMirror {
|
.CodeMirror {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
@ -16,6 +16,13 @@ const StyledWrapper = styled.div`
|
|||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.CodeMirror-hscrollbar {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.CodeMirror-scrollbar-filler {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
.CodeMirror-lines {
|
.CodeMirror-lines {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
@ -52,7 +52,7 @@ export default function Main() {
|
|||||||
<div>
|
<div>
|
||||||
<StyledWrapper className={className}>
|
<StyledWrapper className={className}>
|
||||||
<Sidebar />
|
<Sidebar />
|
||||||
<section className="flex flex-grow flex-col">
|
<section className="flex flex-grow flex-col overflow-auto">
|
||||||
{showHomePage ? (
|
{showHomePage ? (
|
||||||
<Welcome />
|
<Welcome />
|
||||||
) : (
|
) : (
|
||||||
|
Loading…
x
Reference in New Issue
Block a user