feat: Complete Phase 21 UI polish with JSON formatting, selection enhancements, spacing standardization, and text wrapping improvements

Author: dborysov

src/App.tsx

@@ -20,9 +20,9 @@ function App() {
 
   return (
     <div className="h-screen flex flex-col font-sans text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 overflow-hidden">
-      <header className="p-5 pb-0 flex-shrink-0">
+      <header className="p-4 pb-0 flex-shrink-0">
         {tanStackQueryDetected === true && (
-          <div className="flex items-center justify-start gap-x-5 mb-5">
+          <div className="flex items-center justify-start gap-x-4 mb-4">
             <img src="/icon-48.png" alt="TanStack Query DevTools" className="w-5 h-5" />
             <ToggleGroup
               currentView={currentView}
@@ -37,7 +37,7 @@ function App() {
         )}
       </header>
 
-      <main className="flex-1 p-5 pt-0 flex flex-col min-h-0">
+      <main className="flex-1 p-4 pt-0 flex flex-col min-h-0">
         {tanStackQueryDetected === false && <EmptyState />}
 
         {tanStackQueryDetected === true && (

src/components/layout/ListView.tsx

@@ -59,15 +59,15 @@ export function ListView({ currentView, searchTerm, queries, mutations, selected
 
   return (
     <div className="card-container flex flex-col min-h-0" onKeyDown={currentKeyboardNavigation?.handleKeyDown} tabIndex={0}>
-      <div className="p-3 border-b border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 flex-shrink-0">
+      <div className="p-4 border-b border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 flex-shrink-0">
         <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100">{currentView === "queries" ? "Query List" : "Mutation List"}</h4>
       </div>
 
-      <div className="flex-1 overflow-y-auto min-h-0 px-1 py-1">
+      <div className="flex-1 overflow-y-auto min-h-0 p-1">
         <div className="space-block-4">
           {currentView === "queries" ? (
             queries.length === 0 ? (
-              <div className="p-5 text-center text-gray-500 dark:text-gray-400">No queries found.</div>
+              <div className="p-4 text-center text-gray-500 dark:text-gray-400">No queries found.</div>
             ) : (
               sortedData.map((item, index) => {
                 const query = item as QueryData;
@@ -89,7 +89,7 @@ export function ListView({ currentView, searchTerm, queries, mutations, selected
               })
             )
           ) : mutations.length === 0 ? (
-            <div className="p-5 text-center text-gray-500 dark:text-gray-400">No mutations found.</div>
+            <div className="p-4 text-center text-gray-500 dark:text-gray-400">No mutations found.</div>
           ) : (
             filteredData.map((item, index) => {
               const mutation = item as MutationData;