adjust da panel

Author: theHatManSayKeepCoding

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "posty",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "identifier": "com.tkattkat.posty",
   "build": {
     "frontendDist": "../dist",

src/components/RequestPanel/RequestPanel.tsx

@@ -437,7 +437,7 @@ export function RequestPanel() {
 
       {/* URL Bar */}
       <div className="px-4 py-3 flex-shrink-0 border-b border-border">
-        <div className="flex gap-2">
+        <div className="flex gap-2 items-center">
           {httpRequest && (
             <div className="relative">
               <button
@@ -487,18 +487,18 @@ export function RequestPanel() {
           <div className="relative flex items-center">
             <button
               onClick={() => setShowEnvDropdown(!showEnvDropdown)}
-              className={`h-[44px] flex items-center gap-1.5 px-3 rounded-lg text-[12px] font-medium transition-colors ${
+              className={`h-[32px] flex items-center gap-1.5 px-2.5 rounded-md text-[13px] font-medium border transition-all duration-100 ${
                 activeEnvironment
-                  ? 'bg-green-500/10 text-green-500 hover:bg-green-500/20'
-                  : 'bg-bg-secondary hover:bg-bg-tertiary text-text-muted'
+                  ? 'bg-transparent text-green-500 border-green-500/30 hover:border-green-500/50'
+                  : 'bg-transparent border-border text-text-secondary hover:border-border-hover hover:text-text-primary'
               }`}
               title={activeEnvironment ? `Environment: ${activeEnvironment.name}` : 'No environment'}
             >
-              <Globe className="w-4 h-4 flex-shrink-0" />
-              <span className="max-w-[70px] truncate">
-                {activeEnvironment?.name || 'No Env'}
+              <Globe className="w-3.5 h-3.5 flex-shrink-0" />
+              <span className="max-w-[60px] truncate">
+                {activeEnvironment?.name || 'Env'}
               </span>
-              <ChevronDown className="w-3 h-3 flex-shrink-0 opacity-60" />
+              <ChevronDown className="w-3 h-3 flex-shrink-0 opacity-50" />
             </button>
             {showEnvDropdown && (
               <div className="absolute top-full right-0 mt-1 py-1 bg-surface-raised border border-border rounded-lg shadow-lg z-50 min-w-[180px] animate-fade-in">
@@ -565,11 +565,11 @@ export function RequestPanel() {
       </div>
 
       {/* Split View: Request Config + Response */}
-      <div ref={requestSplitRef} className="request-split-shell flex-1 flex min-h-0">
+      <div ref={requestSplitRef} className="request-split-shell">
         {/* Request Config */}
-        <div className="request-pane flex flex-col min-h-0">
+        <div className="request-pane">
           {/* Sub Tabs */}
-          <div className="flex gap-1 px-4 py-2 border-b border-border flex-shrink-0">
+          <div className="request-subtabs">
             {(['params', 'headers', 'cookies', 'body', 'auth', 'tests'] as const).map((tab) => (
               <button
                 key={tab}
@@ -602,7 +602,7 @@ export function RequestPanel() {
           </div>
 
           {/* Content */}
-          <div className="flex-1 overflow-auto p-4">
+          <div className="request-content">
             {httpRequest && activeSubTab === 'params' && (
               <KeyValueEditor
                 items={httpRequest.params}
@@ -746,7 +746,7 @@ export function RequestPanel() {
         />
 
         {/* Response Panel */}
-        <div className="response-pane min-h-0">
+        <div className="response-pane">
           <ResponsePanel />
         </div>
       </div>

src/index.css

@@ -295,16 +295,44 @@ body {
 
 .request-split-shell {
   --request-pane-width: 50%;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .request-pane {
   width: var(--request-pane-width);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
   border-right: 1px solid var(--border);
+  overflow: hidden;
 }
 
 .response-pane {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
   min-width: 0;
+  overflow: hidden;
+}
+
+.request-subtabs {
+  display: flex;
+  gap: 4px;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+  overflow-x: auto;
+}
+
+.request-content {
   flex: 1;
+  overflow: auto;
+  padding: 16px;
 }
 
 body.is-resizing {
@@ -632,6 +660,8 @@ body.is-resizing {
   transition: all 0.15s ease;
   border: none;
   background: transparent;
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 
 .tab:hover {
@@ -725,35 +755,32 @@ body.is-resizing {
   border-color: rgba(255, 255, 255, 0.1);
 }
 
-/* Send button */
+/* Send button - Clerk style */
 .send-button {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 6px;
-  min-width: 92px;
-  height: 44px;
-  padding: 0 16px;
-  background: var(--accent);
-  color: white;
-  font-weight: 600;
+  gap: 5px;
+  height: 32px;
+  padding: 0 12px;
+  background: transparent;
+  color: var(--text-secondary);
+  font-weight: 500;
   font-size: 13px;
-  letter-spacing: -0.01em;
-  border: 1px solid transparent;
-  border-radius: 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
   cursor: pointer;
-  transition: all 0.15s ease;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
+  transition: all 0.12s ease;
 }
 
 .send-button:hover {
-  background: var(--accent-light);
-  box-shadow: 0 3px 10px var(--accent-subtle);
+  background: var(--bg-hover);
+  border-color: var(--border-hover);
+  color: var(--text-primary);
 }
 
 .send-button:active {
-  transform: scale(0.98);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  background: var(--bg-tertiary);
 }
 
 /* Tab bar */