Improve spacing in RoutesPanel

fiberplane · Dec 3, 2024 · 05fa960 · 05fa960
1 parent 69c3954
commit 05fa960
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/studio/src/pages/RequestorPage/NavigationPanel/RoutesPanel/RoutesItem.tsx b/studio/src/pages/RequestorPage/NavigationPanel/RoutesPanel/RoutesItem.tsx
@@ -51,7 +51,12 @@ export const RoutesItem = memo(function RoutesItem(props: RoutesItemProps) {
       data-state-selected={isSelected}
       tabIndex={0}
       className={cn(
-        "grid grid-cols-[auto_1fr] w-full items-center px-2 py-1 rounded cursor-pointer font-mono text-sm text-left gap-2",
+        "grid",
+        {
+          "grid-cols-[auto_1fr]": !canDeleteRoute,
+          "grid-cols-[auto_1fr_auto]": canDeleteRoute,
+        },
+        "w-full items-center px-2 py-1 rounded cursor-pointer font-mono text-sm text-left gap-2",
         "focus:outline-none min-w-0",
         {
           "bg-muted": isActive,

diff --git a/studio/src/pages/RequestorPage/NavigationPanel/RoutesPanel/RoutesPanel.tsx b/studio/src/pages/RequestorPage/NavigationPanel/RoutesPanel/RoutesPanel.tsx
@@ -184,7 +184,7 @@ export function RoutesPanel() {
           <AddRouteButton />
         </div>
       </div>
-      <div className="overflow-y-auto h-full relative">
+      <div className="overflow-y-auto h-full relative flex flex-col gap-2">
         {hasAnyUserAddedRoutes && (
           <RoutesSection title="Custom routes">
             {userAddedRoutes.map((route, index) => (
@@ -203,7 +203,7 @@ export function RoutesPanel() {
 
         {allRoutes.length > 0 && (
           <RoutesSection title={<DetectedRoutesTitle />}>
-            <TabsContent value="list">
+            <TabsContent value="list" className="mt-0">
               <div className="grid">
                 {detectedRoutes.map((route, index) => (
                   <RoutesItem
@@ -222,7 +222,7 @@ export function RoutesPanel() {
                 ))}
               </div>
             </TabsContent>
-            <TabsContent value="fileTree">
+            <TabsContent value="fileTree" className="mt-0">
               {filteredTreeRoutes?.tree.map((tree) => (
                 <RouteTree
                   key={tree.path}
@@ -433,7 +433,7 @@ export function RoutesSection(props: RoutesSectionProps) {
       <h4 className="font-medium font-mono uppercase text-xs text-muted-foreground">
         {title}
       </h4>
-      <div className="space-y-0.5 overflow-y-auto mt-4 w-full overflow-x-hidden">
+      <div className="space-y-0.5 overflow-y-auto mt-2 w-full overflow-x-hidden">
         {children}
       </div>
     </section>

diff --git a/studio/src/pages/RequestorPage/NavigationPanel/RoutesPanel/RoutesTreeGroup.tsx b/studio/src/pages/RequestorPage/NavigationPanel/RoutesPanel/RoutesTreeGroup.tsx
@@ -17,7 +17,7 @@ export const RoutesTreeGroup = memo(function RoutesTreeGroup({
   const toggleCollapsed = () => setCollapsed((current) => !current);
 
   return (
-    <div className={"pt-2 grid min-w-0"}>
+    <div className={cn("pt-2 grid min-w-0", { "pt-0": level === 0 })}>
       <button
         type="button"
         className={cn(