rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-06-25 13:45:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: make the view a lot more compact

Browse Source
This commit is contained in:
Siddharth Gelera
2025-09-18 14:52:37 +05:30
parent 2bf9983448
commit 875060155a
2 changed files with 32 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/StyledWrapper.js
View File

@@ -7,14 +7,6 @@ const StyledWrapper = styled.div`
background-color: ${({theme}) => theme.table.striped};
}
.ws-message:not(:last-child) {
border-bottom: 1px solid ${({theme}) => theme.table.border};
}
.ws-message:not(:last-child).open {
border-bottom-width: 0px;
}
.ws-incoming {
background: ${(props) => props.theme.bg};
border-color: ${(props) => props.theme.table.border};

64
packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js
View File

@@ -137,39 +137,39 @@ const WSMessageItem = ({ message, inFocus }) => {
</div>
</div>
{isOpen && (
<div className="my-2 h-[300px] w-full">
<div className="w-full flex items-center justify-end gap-2 ws-message-toolbar top-1 right-0 p-1 rounded-sm">
<div className="flex justify-end gap-2 text-xs" role="tablist">
<div
className={classnames('select-none capitalize', {
active: showHex,
'cursor-pointer': !showHex
})}
role="tab"
onClick={() => setShowHex(true)}
>
hexdump
</div>
<div
className={classnames('select-none capitalize', {
active: !showHex,
'cursor-pointer': showHex
})}
role="tab"
onClick={() => setShowHex(false)}
>
{dataType.toLowerCase()}
</div>
<>
<div className="mt-2 flex justify-end gap-2 text-xs ws-message-toolbar" role="tablist">
<div
className={classnames('select-none capitalize', {
active: showHex,
'cursor-pointer': !showHex
})}
role="tab"
onClick={() => setShowHex(true)}
>
hexdump
</div>
<div
className={classnames('select-none capitalize', {
active: !showHex,
'cursor-pointer': showHex
})}
role="tab"
onClick={() => setShowHex(false)}
>
{dataType.toLowerCase()}
</div>
</div>
<CodeEditor
mode={showHex ? 'text/plain' : parsedContent.type}
theme={displayedTheme}
enableLineWrapping={showHex ? false : true}
font={preferences.codeFont || 'default'}
value={showHex ? contentHexdump : parsedContent.content}
/>
</div>
<div className="mt-1 h-[300px] w-full">
<CodeEditor
mode={showHex ? 'text/plain' : parsedContent.type}
theme={displayedTheme}
enableLineWrapping={showHex ? false : true}
font={preferences.codeFont || 'default'}
value={showHex ? contentHexdump : parsedContent.content}
/>
</div>
</>
)}
</div>
);
@@ -181,7 +181,7 @@ const WSMessagesList = ({ order = -1, messages = [] }) => {
}
const ordered = order === -1 ? messages : messages.slice().reverse();
return (
<StyledWrapper className="ws-messages-list flex flex-col">
<StyledWrapper className="ws-messages-list mt-1 flex flex-col">
{ordered.map((msg, idx, src) => {
const inFocus = order === -1 ? src.length - 1 === idx : idx === 0;
return <WSMessageItem inFocus={inFocus} id={idx} message={msg} />;