Fix inconsistent gap between TabsList and TabsContent

client/src/components/PingTab.tsx

@@ -3,7 +3,8 @@ import { Button } from "@/components/ui/button";
 
 const PingTab = ({ onPingClick }: { onPingClick: () => void }) => {
   return (
-    <TabsContent value="ping" className="grid grid-cols-2 gap-4">
+    <TabsContent value="ping">
+      <div className="grid grid-cols-2 gap-4">
         <div className="col-span-2 flex justify-center items-center">
           <Button
             onClick={onPingClick}
@@ -12,6 +13,7 @@ const PingTab = ({ onPingClick }: { onPingClick: () => void }) => {
             Ping Server
           </Button>
         </div>
+      </div>
     </TabsContent>
   );
 };

client/src/components/PromptsTab.tsx

@@ -84,7 +84,8 @@ const PromptsTab = ({
   };
 
   return (
-    <TabsContent value="prompts" className="grid grid-cols-2 gap-4">
+    <TabsContent value="prompts">
+      <div className="grid grid-cols-2 gap-4">
         <ListPane
           items={prompts}
           listItems={listPrompts}
@@ -96,7 +97,9 @@ const PromptsTab = ({
           renderItem={(prompt) => (
             <>
               <span className="flex-1">{prompt.name}</span>
-            <span className="text-sm text-gray-500">{prompt.description}</span>
+              <span className="text-sm text-gray-500">
+                {prompt.description}
+              </span>
             </>
           )}
           title="Prompts"
@@ -164,6 +167,7 @@ const PromptsTab = ({
             )}
           </div>
         </div>
+      </div>
     </TabsContent>
   );
 };

client/src/components/ResourcesTab.tsx

@@ -111,7 +111,8 @@ const ResourcesTab = ({
   };
 
   return (
-    <TabsContent value="resources" className="grid grid-cols-3 gap-4">
+    <TabsContent value="resources">
+      <div className="grid grid-cols-3 gap-4">
         <ListPane
           items={resources}
           listItems={listResources}
@@ -256,12 +257,14 @@ const ResourcesTab = ({
             ) : (
               <Alert>
                 <AlertDescription>
-                Select a resource or template from the list to view its contents
+                  Select a resource or template from the list to view its
+                  contents
                 </AlertDescription>
               </Alert>
             )}
           </div>
         </div>
+      </div>
     </TabsContent>
   );
 };

client/src/components/RootsTab.tsx

@@ -35,7 +35,8 @@ const RootsTab = ({
   };
 
   return (
-    <TabsContent value="roots" className="space-y-4">
+    <TabsContent value="roots">
+      <div className="space-y-4">
         <Alert>
           <AlertDescription>
             Configure the root directories that the server can access
@@ -70,6 +71,7 @@ const RootsTab = ({
             Save Changes
           </Button>
         </div>
+      </div>
     </TabsContent>
   );
 };

client/src/components/SamplingTab.tsx

@@ -33,7 +33,8 @@ const SamplingTab = ({ pendingRequests, onApprove, onReject }: Props) => {
   };
 
   return (
-    <TabsContent value="sampling" className="h-96">
+    <TabsContent value="sampling">
+      <div className="h-96">
         <Alert>
           <AlertDescription>
             When the server requests LLM sampling, requests will appear here for
@@ -50,7 +51,9 @@ const SamplingTab = ({ pendingRequests, onApprove, onReject }: Props) => {
               />
 
               <div className="flex space-x-2">
-              <Button onClick={() => handleApprove(request.id)}>Approve</Button>
+                <Button onClick={() => handleApprove(request.id)}>
+                  Approve
+                </Button>
                 <Button variant="outline" onClick={() => onReject(request.id)}>
                   Reject
                 </Button>
@@ -61,6 +64,7 @@ const SamplingTab = ({ pendingRequests, onApprove, onReject }: Props) => {
             <p className="text-gray-500">No pending requests</p>
           )}
         </div>
+      </div>
     </TabsContent>
   );
 };

client/src/components/ToolsTab.tsx

@@ -106,7 +106,8 @@ const ToolsTab = ({
   };
 
   return (
-    <TabsContent value="tools" className="grid grid-cols-2 gap-4">
+    <TabsContent value="tools">
+      <div className="grid grid-cols-2 gap-4">
         <ListPane
           items={tools}
           listItems={listTools}
@@ -249,6 +250,7 @@ const ToolsTab = ({
             )}
           </div>
         </div>
+      </div>
     </TabsContent>
   );
 };