address PR comments

Author: trangdoan982

apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx

@@ -408,7 +408,7 @@ const AdvancedNodeSearchDialog = ({
       autoFocus={false}
       canEscapeKeyClose
       canOutsideClickClose
-      className="flex max-w-4xl flex-col overflow-hidden bg-white p-0"
+      className="flex w-full max-w-4xl flex-col overflow-hidden bg-white p-0"
       enforceFocus={false}
       isOpen={isOpen}
       onClose={onClose}
@@ -424,9 +424,16 @@ const AdvancedNodeSearchDialog = ({
         onMouseUp={(event) => event.stopPropagation()}
         className="flex min-h-0 flex-1 flex-col overflow-hidden"
       >
-        <div className="flex flex-none items-center gap-2 border-b border-gray-200 px-3 py-2">
-          <div className="flex min-w-0 flex-1 items-center rounded border border-gray-300 bg-white px-2 py-1">
-            <Icon icon="search" size={16} className="mr-2 text-gray-500" />
+        <div className="flex w-full flex-none items-start gap-2 border-b border-gray-200 px-3 py-2">
+          <div
+            className="flex min-h-9 w-full min-w-0 flex-1 items-center rounded border border-gray-300 bg-white px-2 py-1"
+            style={{ flex: "1 1 0", minWidth: 0 }}
+          >
+            <Icon
+              className="mr-2 shrink-0 self-center text-gray-500"
+              icon="search"
+              size={16}
+            />
             <NodeTypeChipsSearchInput
               inputRef={inputRef}
               nodeTypes={discourseNodes}
@@ -453,24 +460,27 @@ const AdvancedNodeSearchDialog = ({
               selectedTypeIds={selectedNodeTypeIds}
             />
           </div>
-          <DiscourseNodeTypeFilter
-            nodeTypes={discourseNodes}
-            onPopoverOpenChange={setIsTypeFilterPopoverOpen}
-            onSelectedTypeIdsChange={setSelectedNodeTypeIds}
-            selectedTypeIds={selectedNodeTypeIds}
-          />
-          <DiscourseNodeSortControl
-            disabled={isIndexLoading || indexError}
-            onSortChange={handleSortChange}
-            sort={sort}
-          />
-          <Button
-            className="shrink-0"
-            icon="cross"
-            minimal
-            onClick={onClose}
-            title="Close search"
-          />
+          <div className="flex h-9 shrink-0 items-center gap-1">
+            <DiscourseNodeTypeFilter
+              layoutAnchorKey={selectedNodeTypeIds.length}
+              nodeTypes={discourseNodes}
+              onPopoverOpenChange={setIsTypeFilterPopoverOpen}
+              onSelectedTypeIdsChange={setSelectedNodeTypeIds}
+              selectedTypeIds={selectedNodeTypeIds}
+            />
+            <DiscourseNodeSortControl
+              disabled={isIndexLoading || indexError}
+              onSortChange={handleSortChange}
+              sort={sort}
+            />
+            <Button
+              className="shrink-0"
+              icon="cross"
+              minimal
+              onClick={onClose}
+              title="Close search"
+            />
+          </div>
         </div>
         <div className="flex min-h-0 w-full flex-1 overflow-hidden">
           {showSplitView ? (

apps/roam/src/components/AdvancedNodeSearchDialog/DiscourseNodeTypeFilter.tsx

@@ -28,6 +28,8 @@ export type DiscourseNodeTypeFilterProps = {
   selectedTypeIds: string[];
   onSelectedTypeIdsChange: (ids: string[]) => void;
   onPopoverOpenChange?: (isOpen: boolean) => void;
+  /** Bumps when surrounding layout changes (e.g. chip wrap) so the popover repositions. */
+  layoutAnchorKey?: number;
 };
 
 const getNodeIndicatorColor = (node: DiscourseNode): string =>
@@ -186,6 +188,7 @@ const FilterPopoverPanel = ({
 };
 
 export const DiscourseNodeTypeFilter = ({
+  layoutAnchorKey = 0,
   nodeTypes,
   onPopoverOpenChange,
   onSelectedTypeIdsChange,
@@ -249,6 +252,11 @@ export const DiscourseNodeTypeFilter = ({
 
   const isTriggerActive = isOpen || isFilterActive;
 
+  useEffect(() => {
+    if (!isOpen) return;
+    window.dispatchEvent(new Event("resize"));
+  }, [isOpen, layoutAnchorKey]);
+
   const filterButton = (
     <span className="relative inline-flex shrink-0 items-center">
       <Button
@@ -314,7 +322,7 @@ export const DiscourseNodeTypeFilter = ({
         onInteraction={handlePopoverInteraction}
         popoverClassName="p-0 overflow-hidden"
         popoverRef={popoverRef}
-        position={Position.BOTTOM_RIGHT}
+        position={Position.BOTTOM}
         target={filterButton}
         usePortal
       />

apps/roam/src/components/AdvancedNodeSearchDialog/NodeTypeChipsSearchInput.tsx

@@ -1,6 +1,6 @@
 import { Classes, Tag } from "@blueprintjs/core";
 import React, { useEffect, useRef, useState } from "react";
-import { getNodeTagStyles } from "~/utils/getDiscourseNodeColors";
+import { getNodeTagColorStyles } from "~/utils/getDiscourseNodeColors";
 import { type DiscourseNode } from "~/utils/getDiscourseNodes";
 
 type NodeTypeChipsSearchInputProps = {
@@ -239,7 +239,10 @@ export const NodeTypeChipsSearchInput = ({
   };
 
   return (
-    <div className="flex min-w-0 flex-1 flex-wrap items-center gap-1 py-0.5">
+    <div
+      className="flex w-full min-w-0 flex-1 flex-wrap items-center gap-1 py-0.5"
+      style={{ flex: "1 1 0", minWidth: 0, width: "100%" }}
+    >
       {selectedNodeTypes.map((nodeType, index) => {
         const isFocused = focusedChipIndex === index;
         return (
@@ -271,9 +274,14 @@ export const NodeTypeChipsSearchInput = ({
                 );
                 focusInput();
               }}
-              style={getNodeTagStyles(
-                nodeType.canvasSettings?.color ?? "#000000",
-              )}
+              style={{
+                ...getNodeTagColorStyles(
+                  nodeType.canvasSettings?.color ?? "#000000",
+                ),
+                alignItems: "center",
+                display: "inline-flex",
+                flexDirection: "row",
+              }}
             >
               <span
                 className="truncate"
@@ -285,7 +293,10 @@ export const NodeTypeChipsSearchInput = ({
           </span>
         );
       })}
-      <span className="relative flex-1" style={{ minWidth: INPUT_MIN_WIDTH }}>
+      <span
+        className="relative min-w-0 flex-1"
+        style={{ minWidth: INPUT_MIN_WIDTH }}
+      >
         {completionSuffix && (
           <span className="pointer-events-none absolute inset-0 flex items-center overflow-hidden whitespace-nowrap text-sm">
             <span className="invisible">{searchTerm}</span>

apps/roam/src/utils/getDiscourseNodeColors.ts

@@ -42,7 +42,9 @@ export const getDiscourseNodeColors = ({
   return { backgroundColor, textColor };
 };
 
-export const getNodeTagStyles = (color: string): CSSProperties | undefined => {
+const getNodeTagColorProperties = (
+  color: string,
+): Pick<CSSProperties, "backgroundColor" | "color" | "border"> | undefined => {
   const formattedColor = formatHexColor(color);
   if (!formattedColor) return undefined;
   const { background, text, border } = getPleasingColors(
@@ -52,6 +54,19 @@ export const getNodeTagStyles = (color: string): CSSProperties | undefined => {
     backgroundColor: background,
     color: text,
     border: `1px solid ${border}`,
+  };
+};
+
+/** Color tokens for Blueprint `Tag` (layout handled by the component). */
+export const getNodeTagColorStyles = (
+  color: string,
+): CSSProperties | undefined => getNodeTagColorProperties(color);
+
+export const getNodeTagStyles = (color: string): CSSProperties | undefined => {
+  const colorStyles = getNodeTagColorProperties(color);
+  if (!colorStyles) return undefined;
+  return {
+    ...colorStyles,
     fontWeight: "500",
     padding: "2px 6px",
     borderRadius: "12px",