More work on the layout

src-web/App.tsx

@@ -1,6 +1,8 @@
 import classnames from 'classnames';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
+import { Button } from './components/Button';
+import { Divider } from './components/Divider';
 import { Grid } from './components/Grid';
 import { RequestPane } from './components/RequestPane';
 import { ResponsePane } from './components/ResponsePane';
@@ -34,10 +36,34 @@ function App() {
     <div className="grid grid-cols-[auto_1fr] h-full text-gray-900">
       <Sidebar requests={requests ?? []} workspaceId={workspaceId} activeRequestId={request?.id} />
       {request && (
-        <Grid cols={isH ? 2 : 1} rows={isH ? 1 : 2} gap={2}>
-          <RequestPane request={request} className={classnames(isH ? 'pr-0' : 'pb-0')} />
-          <ResponsePane requestId={request.id} className={classnames(isH ? 'pl-0' : 'pt-0')} />
-        </Grid>
+        <div className="p-2 h-full">
+          <div className="grid grid-rows-[auto_1fr] rounded-md h-full overflow-hidden">
+            <HStack
+              data-tauri-drag-region
+              className="h-10 px-3 bg-gray-50"
+              justify="center"
+              items="center"
+            >
+              {request.name}
+            </HStack>
+            <div
+              className={classnames(
+                'py-2 px-1 bg-gray-25 grid overflow-auto',
+                isH ? 'grid-cols-[1fr_1fr]' : 'grid-rows-[minmax(0,auto)_minmax(0,100%)]',
+              )}
+            >
+              <RequestPane
+                fullHeight={isH}
+                request={request}
+                className={classnames(
+                  'border-gray-100/50',
+                  isH ? 'pr-0 border-r' : 'pb-3 mb-1 border-b',
+                )}
+              />
+              <ResponsePane requestId={request.id} />
+            </div>
+          </div>
+        </div>
       )}
     </div>
   );