From 875060155ae288c102563c326d9bda759a772f2c Mon Sep 17 00:00:00 2001
From: Siddharth Gelera <ahoy@barelyhuman.dev>
Date: Thu, 18 Sep 2025 14:52:37 +0530
Subject: [PATCH] fix: make the view a lot more compact

---
 .../WSMessagesList/StyledWrapper.js           |  8 ---
 .../WsResponsePane/WSMessagesList/index.js    | 64 +++++++++----------
 2 files changed, 32 insertions(+), 40 deletions(-)

diff --git a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/StyledWrapper.js
index 733c644d4..27e4b6e98 100644
--- a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/StyledWrapper.js
@@ -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};
diff --git a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js
index 6c96b33a8..1d0ecf419 100644
--- a/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js
+++ b/packages/bruno-app/src/components/ResponsePane/WsResponsePane/WSMessagesList/index.js
@@ -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} />;