fixing minor CSS tweaks; section for graph page in Rd and RC

web-admin/src/features/projects/status/resource-table/ProjectResources.svelte

@@ -203,7 +203,7 @@
   </div>
 
   <!-- Row 2: [Filter button] ...spacer... [search] [Grid/List] -->
-  <div class="flex items-center gap-x-2 min-h-8">
+  <div class="flex items-center min-h-8">
     <!-- Filter dropdown -->
     <DropdownMenu.Root bind:open={filterDropdownOpen}>
       <DropdownMenu.Trigger>
@@ -262,16 +262,17 @@
 
     <!-- Search icon / expandable search -->
     {#if searchExpanded}
-      <div class="flex items-center w-56 shrink-0">
+      <div class="flex items-center w-56 h-9 shrink-0">
         <Search
           bind:value={searchText}
           placeholder="Search resources..."
+          large
           autofocus={true}
           showBorderOnFocus={false}
           retainValueOnMount
         />
         <button
-          class="ml-1 p-1 text-fg-primary hover:bg-surface-hover rounded-sm"
+          class="h-9 w-9 flex items-center justify-center text-fg-primary shrink-0"
           onclick={toggleSearchExpanded}
         >
           <XIcon size="14px" />
@@ -287,17 +288,17 @@
     {/if}
 
     <!-- Grid / List toggle -->
-    <div class="view-toggle">
+    <div class="view-toggle ml-0.5">
       <a href="{basePath}/graph" class="toggle-btn" class:active={isGraphView}>
-        <LayoutGridIcon size="14px" />
+        <LayoutGridIcon size="16px" />
       </a>
       <a href={basePath} class="toggle-btn" class:active={!isGraphView}>
-        <ListIcon size="14px" />
+        <ListIcon size="16px" />
       </a>
     </div>
   </div>
 
-  <hr class="border-t border-gray-200 -mt-1 mb-1" />
+  <hr class="border-t border-gray-200 my-0" />
 
   <!-- Row 3: Filter pills + Clear all (when any filter or search is active) -->
   {#if hasActiveFilters}
@@ -375,18 +376,24 @@
 
 <style lang="postcss">
   .filter-trigger {
-    @apply flex items-center gap-1.5 px-4 py-1.5 rounded-sm bg-primary-50 text-sm text-primary-600;
+    @apply flex items-center gap-1.5 h-9 px-4 rounded-sm bg-primary-50 text-sm text-primary-600;
+  }
+  :global(.dark) .filter-trigger {
+    @apply bg-surface-background text-primary-500;
   }
   .filter-trigger:hover {
     @apply bg-primary-100;
   }
+  :global(.dark) .filter-trigger:hover {
+    @apply bg-surface-muted;
+  }
 
   .filter-badge {
     @apply text-[10px] font-semibold bg-primary-500 text-white rounded-full w-4 h-4 flex items-center justify-center;
   }
 
   .filter-pills-row {
-    @apply flex items-center min-h-7 relative;
+    @apply flex items-center h-9 relative;
   }
 
   .filter-pills-scroll {
@@ -398,24 +405,21 @@
   }
 
   .filter-pill {
-    @apply flex items-center gap-1.5 text-xs font-medium text-fg-primary border border-gray-300 rounded-sm px-2 py-1 whitespace-nowrap shrink-0;
+    @apply flex items-center gap-1.5 h-7 text-xs font-medium text-fg-primary border border-gray-300 rounded-sm px-2 whitespace-nowrap shrink-0;
   }
   .filter-pill:hover {
     @apply bg-surface-hover;
   }
 
   .toolbar-icon-btn {
-    @apply p-1.5 rounded-sm text-fg-primary;
-  }
-  .toolbar-icon-btn:hover {
-    @apply bg-surface-hover;
+    @apply h-9 w-9 flex items-center justify-center text-fg-primary;
   }
 
   .view-toggle {
-    @apply flex rounded-sm border border-gray-200 overflow-hidden shrink-0;
+    @apply flex rounded-sm border border-gray-200 overflow-hidden shrink-0 w-16 h-9;
   }
   .toggle-btn {
-    @apply flex items-center p-1.5 text-fg-primary no-underline;
+    @apply flex items-center justify-center w-8 h-full text-fg-primary no-underline;
   }
   .toggle-btn:hover {
     @apply bg-surface-hover;

web-admin/src/routes/[organization]/[project]/-/status/resources/graph/+page.svelte

@@ -186,6 +186,7 @@
     $projectParserQuery.data?.resource?.projectParser?.state?.parseErrors ?? [];
 </script>
 
+<section class="flex flex-col gap-y-3">
 <!-- Row 1: Resources + Refresh -->
 <div class="flex items-center justify-between h-9">
   <h2 class="text-lg font-medium">Resources</h2>
@@ -204,7 +205,7 @@
 </div>
 
 <!-- Row 2: [Filter button] ...spacer... [search] [Grid/List] -->
-<div class="flex items-center gap-x-2 min-h-8 mt-3">
+<div class="flex items-center min-h-8">
   <!-- Filter dropdown -->
   <DropdownMenu.Root bind:open={filterDropdownOpen}>
     <DropdownMenu.Trigger>
@@ -256,16 +257,17 @@
 
   <!-- Search icon / expandable search -->
   {#if searchExpanded}
-    <div class="flex items-center w-56 shrink-0">
+    <div class="flex items-center w-56 h-9 shrink-0">
       <Search
         bind:value={searchText}
         placeholder="Search resources..."
+        large
         autofocus={true}
         showBorderOnFocus={false}
         retainValueOnMount
       />
       <button
-        class="ml-1 p-1 text-fg-primary hover:bg-surface-hover rounded-sm"
+        class="h-9 w-9 flex items-center justify-center text-fg-primary shrink-0"
         onclick={toggleSearchExpanded}
       >
         <XIcon size="14px" />
@@ -281,21 +283,21 @@
   {/if}
 
   <!-- Grid / List toggle -->
-  <div class="view-toggle">
+  <div class="view-toggle ml-0.5">
     <a href={graphBasePath} class="toggle-btn active">
-      <LayoutGridIcon size="14px" />
+      <LayoutGridIcon size="16px" />
     </a>
     <a href={basePath} class="toggle-btn">
-      <ListIcon size="14px" />
+      <ListIcon size="16px" />
     </a>
   </div>
 </div>
 
-<hr class="border-t border-gray-200 mt-1.5" />
+<hr class="border-t border-gray-200 my-0" />
 
 <!-- Row 3: Filter pills + Clear all (when any filter or search is active) -->
 {#if hasActiveFilters}
-  <div class="filter-pills-row mt-1.5">
+  <div class="filter-pills-row">
     <div class="filter-pills-scroll">
       {#if selectedStatuses.length > 0}
         <button
@@ -367,6 +369,7 @@
     </div>
   {/if}
 </div>
+</section>
 
 <RefreshAllSourcesAndModelsConfirmDialog
   bind:open={isConfirmDialogOpen}
@@ -375,7 +378,7 @@
 
 <style lang="postcss">
   .graph-wrapper {
-    @apply flex flex-col w-full min-w-0 overflow-hidden mt-3;
+    @apply flex flex-col w-full min-w-0 overflow-hidden;
     height: 600px;
   }
 
@@ -387,18 +390,24 @@
   }
 
   .filter-trigger {
-    @apply flex items-center gap-1.5 px-4 py-1.5 rounded-sm bg-primary-50 text-sm text-primary-600;
+    @apply flex items-center gap-1.5 h-9 px-4 rounded-sm bg-primary-50 text-sm text-primary-600;
+  }
+  :global(.dark) .filter-trigger {
+    @apply bg-surface-background text-primary-500;
   }
   .filter-trigger:hover {
     @apply bg-primary-100;
   }
+  :global(.dark) .filter-trigger:hover {
+    @apply bg-surface-muted;
+  }
 
   .filter-badge {
     @apply text-[10px] font-semibold bg-primary-500 text-white rounded-full w-4 h-4 flex items-center justify-center;
   }
 
   .filter-pills-row {
-    @apply flex items-center min-h-7 relative;
+    @apply flex items-center h-9 relative;
   }
 
   .filter-pills-scroll {
@@ -410,24 +419,21 @@
   }
 
   .filter-pill {
-    @apply flex items-center gap-1.5 text-xs font-medium text-fg-primary border border-gray-300 rounded-sm px-2 py-1 whitespace-nowrap shrink-0;
+    @apply flex items-center gap-1.5 h-7 text-xs font-medium text-fg-primary border border-gray-300 rounded-sm px-2 whitespace-nowrap shrink-0;
   }
   .filter-pill:hover {
     @apply bg-surface-hover;
   }
 
   .toolbar-icon-btn {
-    @apply p-1.5 rounded-sm text-fg-primary;
-  }
-  .toolbar-icon-btn:hover {
-    @apply bg-surface-hover;
+    @apply h-9 w-9 flex items-center justify-center text-fg-primary;
   }
 
   .view-toggle {
-    @apply flex rounded-sm border border-gray-200 overflow-hidden shrink-0;
+    @apply flex rounded-sm border border-gray-200 overflow-hidden shrink-0 w-16 h-9;
   }
   .toggle-btn {
-    @apply flex items-center p-1.5 text-fg-primary no-underline;
+    @apply flex items-center justify-center w-8 h-full text-fg-primary no-underline;
   }
   .toggle-btn:hover {
     @apply bg-surface-hover;

web-common/src/features/resource-graph/embedding/ResourceGraph.svelte

@@ -863,6 +863,7 @@
 >
   {#if layout === "sidebar"}
     <!-- Sidebar layout: toolbar always visible, content varies -->
+    <section class="flex flex-col gap-y-3 flex-1 min-h-0">
     {#if showToolbar}
       <!-- Row 1: Title + Refresh -->
       {#if showTitle}
@@ -947,16 +948,17 @@
 
         <!-- Search icon / expandable search -->
         {#if searchExpanded}
-          <div class="flex items-center w-56 shrink-0">
+          <div class="flex items-center w-56 h-9 shrink-0">
             <Search
               bind:value={treeSearchQuery}
               placeholder="Search resources..."
+              large
               autofocus={true}
               showBorderOnFocus={false}
               retainValueOnMount
             />
             <button
-              class="ml-1 p-1 text-fg-primary hover:bg-surface-hover rounded-sm"
+              class="h-9 w-9 flex items-center justify-center text-fg-primary shrink-0"
               onclick={() => {
                 searchExpanded = false;
                 treeSearchQuery = "";
@@ -978,9 +980,8 @@
 
       <!-- Divider -->
       <hr
-        class="border-t border-gray-200 -mt-1 mb-3"
+        class="border-t border-gray-200 my-0"
         class:flush-toolbar={flushToolbar}
-        style={flushToolbar ? "" : "margin-left: 0.5rem; margin-right: 0.5rem;"}
       />
 
       <!-- Filter pills row -->
@@ -1080,6 +1081,7 @@
         </div>
       {/if}
     </div>
+    </section>
   {:else if error}
     <div class="state error">
       <p>{error}</p>
@@ -1198,7 +1200,7 @@
   }
 
   .graph-toolbar-bar {
-    @apply flex flex-row items-center min-h-[3rem] flex-none gap-x-2 px-2;
+    @apply flex flex-row items-center min-h-[3rem] flex-none px-2;
     transition: padding-left 300ms ease-in-out;
   }
 
@@ -1213,9 +1215,15 @@
   .filter-trigger {
     @apply flex items-center gap-1.5 px-4 py-1.5 rounded-sm bg-primary-50 text-sm text-primary-600;
   }
+  :global(.dark) .filter-trigger {
+    @apply bg-surface-background text-primary-500;
+  }
   .filter-trigger:hover {
     @apply bg-primary-100;
   }
+  :global(.dark) .filter-trigger:hover {
+    @apply bg-surface-muted;
+  }
 
   .filter-badge {
     @apply text-[10px] font-semibold bg-primary-500 text-white rounded-full w-4 h-4 flex items-center justify-center;
@@ -1245,10 +1253,7 @@
   }
 
   .toolbar-icon-btn {
-    @apply p-1.5 rounded-sm text-fg-primary;
-  }
-  .toolbar-icon-btn:hover {
-    @apply bg-surface-hover;
+    @apply h-9 w-9 flex items-center justify-center text-fg-primary;
   }
 
   .graph-title-bar {