fix: tabs styles

minsgy · Jun 17, 2024 · 249beac · 249beac
1 parent 2cde222
commit 249beac
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 26 deletions.
diff --git a/src/features/MSWDevtoolsPanel.tsx b/src/features/MSWDevtoolsPanel.tsx
@@ -20,7 +20,7 @@ export const MSWDevtoolsPanel = ({
 
   return (
     <FixedLayout>
-      <Tabs defaultValue="routes">
+      <Tabs defaultValue="routes" className="h-full">
         <div className="p-4 flex justify-between">
           <TabsList>
             <TabsTrigger value="routes">Routes</TabsTrigger>

diff --git a/src/features/ScenarioPanel/index.tsx b/src/features/ScenarioPanel/index.tsx
@@ -9,22 +9,25 @@ import { TableRow, TableBody, TableCell, Table } from "@/shared/ui/table"
 import { MethodTag } from "../DevtoolsHandlerList"
 
 import { Switch } from "@/shared/ui/switch"
+import { Fragment } from "react"
+import { HandlerSelect } from "../HandlerSelect"
 export const ScenarioPanel = () => {
   const isEnabled = useIsEnabledValue()
   const { listScenarios } = useWorkerValue()
-  console.log(generatorSerializedRouteHandlers(listScenarios()[0].handlers))
 
   return (
-    <div className="flex flex-col w-full h-full">
+    <div className="flex flex-col w-full">
       <header className="flex justify-between align-items px-[16px] py-[12px]">
         <H2>Scenario Case</H2>
       </header>
       <Separator />
-      <div className="overflow-y-auto scrollbar-hide">
+      <div className="overflow-y-auto scrollbar-hide h-[400px]">
         {listScenarios().map((scenario) => (
-          <div>
-            <div className="p-4">
-              <P>Description: {scenario.description}</P>
+          <Fragment key={scenario.id}>
+            <div className="px-4 pt-4 pb-2">
+              <P>
+                <InlineCode>Description</InlineCode> {scenario.description}
+              </P>
             </div>
             <div className="px-6">
               <Table>
@@ -42,16 +45,17 @@ export const ScenarioPanel = () => {
                         </TableCell>
                         <TableCell>
                           <div className="flex items-center">
-                            {/* <HandlerSelect
-                            value={route.selectedHandlerId}
-                            onValueChange={(handlerId) =>
-                              onSelectHandler(route.id, handlerId)
-                            }
-                            options={route.handlers}
-                            defaultValue={
-                              route.selectedHandlerId ?? route.handlers[0].id
-                            }
-                          /> */}
+                            <HandlerSelect
+                              value={route.selectedHandlerId}
+                              onValueChange={(handlerId) => {
+                                console.log(handlerId, route.id)
+                                // onSelectHandler(route.id, handlerId)
+                              }}
+                              options={route.handlers}
+                              defaultValue={
+                                route.selectedHandlerId ?? route.handlers[0].id
+                              }
+                            />
                             {route.origin === "custom" && (
                               <InlineCode>{route.origin}</InlineCode>
                             )}
@@ -72,7 +76,7 @@ export const ScenarioPanel = () => {
                 </TableBody>
               </Table>
             </div>
-          </div>
+          </Fragment>
         ))}
       </div>
     </div>

diff --git a/src/shared/lib/http/index.ts b/src/shared/lib/http/index.ts
@@ -42,17 +42,13 @@ const createProxyMethod = <
       ])
 
       const response: Response = responseHandlers()
-      const { status, statusText } = response
       function presets(presets: HttpPreset[]) {
-        // TODO: response.json() async
-        const json = response.json()
-
         const defaultResponseWithPresets: HttpPreset[] = [
           ...presets,
           {
-            status,
-            description: statusText,
-            response: json, // TODO: response.json() async
+            status: response.status,
+            description: response.statusText,
+            response: response, // TODO: response.json() async
           },
         ]
         return Reflect.apply(target, thisArg, [

diff --git a/src/shared/ui/tabs.tsx b/src/shared/ui/tabs.tsx
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className
     )}
     {...props}