Fix ellipsis for request (history)

fiberplane · Dec 3, 2024 · 69c3954 · 69c3954
1 parent d89b9a4
commit 69c3954
Showing 1 changed file with 35 additions and 32 deletions.
diff --git a/studio/src/pages/RequestorPage/NavigationPanel/RequestsPanel/RequestsPanel.tsx b/studio/src/pages/RequestorPage/NavigationPanel/RequestsPanel/RequestsPanel.tsx
@@ -135,36 +135,39 @@ export function RequestsPanel() {
   );
 
   return (
-    <div className={cn("h-full", "flex", "flex-col")}>
-      <div>
-        <div className="flex items-center space-x-2 pb-3">
-          <Search
-            ref={searchRef}
-            value={filterValue}
-            onChange={setFilterValue}
-            onFocus={() => {
-              setSelectedItemId(null);
-            }}
-            placeholder="requests"
-            onItemSelect={() => {}}
-            itemCount={filteredItems.length}
-          />
-        </div>
+    <div className={cn("h-full flex flex-col min-w-0")}>
+      <div className="flex items-center space-x-2 pb-3">
+        <Search
+          ref={searchRef}
+          value={filterValue}
+          onChange={setFilterValue}
+          onFocus={() => {
+            setSelectedItemId(null);
+          }}
+          placeholder="requests"
+          onItemSelect={() => {}}
+          itemCount={filteredItems.length}
+        />
       </div>
-      <div className="overflow-y-auto h-full relative">
-        {filteredItems.length === 0 && <EmptyState />}
-        {filteredItems.map((item) => (
-          <NavItem
-            key={getId(item)}
-            item={item}
-            isSelected={getId(item) === selectedItemId}
-            searchParams={searchParams}
-            to={{
-              pathname: `/request/${getId(item)}`,
-              search: searchParams.toString(),
-            }}
-          />
-        ))}
+      <div className="overflow-y-auto overflow-x-hidden h-full relative flex flex-col justify-start">
+        {filteredItems.length === 0 ? (
+          <EmptyState />
+        ) : (
+          <>
+            {filteredItems.map((item) => (
+              <NavItem
+                key={getId(item)}
+                item={item}
+                isSelected={getId(item) === selectedItemId}
+                searchParams={searchParams}
+                to={{
+                  pathname: `/request/${getId(item)}`,
+                  search: searchParams.toString(),
+                }}
+              />
+            ))}
+          </>
+        )}
       </div>
     </div>
   );
@@ -243,6 +246,8 @@ const NavItem = memo(({ to, item, isSelected }: NavItemProps) => {
       to={to}
       className={cn(
         "grid grid-cols-[38px_38px_1fr] gap-2 hover:bg-muted px-2 py-1 rounded cursor-pointer items-center",
+        "w-full",
+        "h-fit min-w-0",
         "focus:outline-none",
         {
           "bg-muted": id === getId(item),
@@ -267,9 +272,7 @@ const NavItem = memo(({ to, item, isSelected }: NavItemProps) => {
       <div>
         <MethodCell item={item} />
       </div>
-      <div>
-        <PathCell item={item} />
-      </div>
+      <PathCell item={item} />
     </Link>
   );
 });