fix: fix UI style

packages/insomnia/src/ui/components/environment-picker.tsx

@@ -53,7 +53,9 @@ export const EnvironmentPicker = ({
   };
 
   const { features } = useOrganizationPermissions();
-  const isUsingInsomniaCloudSync = Boolean(models.project.isRemoteProject(activeProject) && !activeWorkspaceMeta?.gitRepositoryId);
+  const isUsingInsomniaCloudSync = Boolean(
+    models.project.isRemoteProject(activeProject) && !activeWorkspaceMeta?.gitRepositoryId,
+  );
   const isUsingGitSync = Boolean(features.gitSync.enabled && activeWorkspaceMeta?.gitRepositoryId);
 
   const setActiveEnvironmentFetcher = useSetActiveEnvironmentFetcher();
@@ -91,10 +93,10 @@ export const EnvironmentPicker = ({
     <DialogTrigger isOpen={isOpen} onOpenChange={onOpenChange}>
       <Button
         aria-label="Manage Environments"
-        className="flex max-w-full flex-col items-start gap-2 truncate rounded-xs px-4 py-1 text-sm text-(--color-font) ring-1 ring-transparent transition-all hover:bg-(--hl-xs) focus:ring-(--hl-md) focus:ring-inset aria-pressed:bg-(--hl-sm)"
+        className="flex max-w-full items-start gap-2 truncate rounded-xs px-4 py-1 text-sm text-(--color-font) ring-1 ring-transparent transition-all hover:bg-(--hl-xs) focus:ring-(--hl-md) focus:ring-inset aria-pressed:bg-(--hl-sm)"
       >
         {activeGlobalEnvironment && activeGlobalBaseEnvironment && (
-          <div className="flex w-full flex-col">
+          <div className="flex w-full">
             <div className="flex w-full items-center gap-2">
               <Icon
                 icon={
@@ -110,10 +112,7 @@ export const EnvironmentPicker = ({
                 className="w-5 shrink-0"
               />
               <span className="truncate">{activeGlobalEnvironment.name}</span>
-            </div>
-            <div className="flex w-full items-center gap-2">
-              <Icon icon="0" className="invisible w-5 shrink-0" />
-              <span className="shrink truncate text-xs text-(--hl)">{activeGlobalBaseEnvironment.workspaceName}</span>
+              <Icon icon="plus" className="w-3 shrink-0 text-(--hl)" />
             </div>
           </div>
         )}

packages/insomnia/src/ui/components/workspace/resource-icon.tsx

@@ -25,6 +25,11 @@ export function ResourceIcon({ resource }: { resource: any }) {
         'mcp': ['fac', 'mcp'],
       }[resource.scope] as IconProp) || null;
   }
+
+  if (models.requestGroup.isRequestGroup(resource)) {
+    icon = 'folder';
+  }
+
   if (icon) {
     return <Icon icon={icon} className="w-3 shrink-0" />;
   }

packages/insomnia/src/ui/components/workspace/use-workspace-breadcrumb.tsx

@@ -1,8 +1,6 @@
-import type { Icon, IconProp } from '@fortawesome/fontawesome-svg-core';
 import { useMemo } from 'react';
 import { useParams } from 'react-router';
 
-import { models } from '~/insomnia-data';
 import { useWorkspaceLoaderData } from '~/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId';
 import { useRequestLoaderData } from '~/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.debug.request.$requestId';
 import { useRequestGroupLoaderData } from '~/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.debug.request-group.$requestGroupId';
@@ -28,61 +26,71 @@ export function useWorkspaceBreadcrumbs() {
   const reqOrGrp = collection.find(col => col.doc._id === reqOrGrpId);
 
   // workspace is not in collection, so we need to filter it out.
-  const ancestors = reqOrGrp?.ancestors
-    ? reqOrGrp.ancestors.map((id: string) => resourcesById.get(id)).filter(Boolean)
-    : [];
-  const breadcrumbs: PaneBreadcrumb[] = [
-    {
-      id: 'project',
-      label: activeProject.name,
-      to: `/organization/${organizationId}/project/${activeProject._id}`,
-      icon: <ResourceIcon resource={activeProject} />,
-    },
-  ];
+  const ancestors = useMemo(() => {
+    if (!reqOrGrp?.ancestors) {
+      return [];
+    }
+    return reqOrGrp.ancestors
+      .map((id: string) => resourcesById.get(id))
+      .filter(Boolean) as (typeof collection)[number]['doc'][];
+  }, [reqOrGrp, resourcesById]);
 
-  if (activeWorkspace) {
-    breadcrumbs.push({
-      id: activeWorkspace._id,
-      label: activeWorkspace.name,
-      to: buildResourceUrl({
-        organizationId: organizationId!,
-        projectId: activeProject._id,
-        workspaceId: activeWorkspace._id,
-        resource: activeWorkspace,
-      }),
-      icon: <ResourceIcon resource={activeWorkspace} />,
-    });
-  }
+  const breadcrumbs: PaneBreadcrumb[] = useMemo(() => {
+    const crumbs: PaneBreadcrumb[] = [
+      {
+        id: 'project',
+        label: activeProject.name,
+        to: `/organization/${organizationId}/project/${activeProject._id}`,
+        icon: <ResourceIcon resource={activeProject} />,
+      },
+    ];
 
-  if (ancestors.length) {
-    breadcrumbs.push(
-      ...ancestors.map(doc => ({
-        id: doc!._id,
-        label: doc!.name,
+    if (activeWorkspace) {
+      crumbs.push({
+        id: activeWorkspace._id,
+        label: activeWorkspace.name,
         to: buildResourceUrl({
           organizationId: organizationId!,
           projectId: activeProject._id,
-          workspaceId: activeWorkspace!._id,
-          resource: doc!,
+          workspaceId: activeWorkspace._id,
+          resource: activeWorkspace,
         }),
-        icon: <ResourceIcon resource={doc!} />,
-      })),
-    );
-  }
+        icon: <ResourceIcon resource={activeWorkspace} />,
+      });
+    }
 
-  if (activeRequest) {
-    breadcrumbs.push({
-      id: activeRequest._id,
-      label: activeRequest.name || 'Untitled request',
-      icon: <ResourceIcon resource={activeRequest} />,
-    });
-  } else if (activeRequestGroup) {
-    breadcrumbs.push({
-      id: activeRequestGroup._id,
-      label: activeRequestGroup.name || 'Untitled request group',
-      icon: <ResourceIcon resource={activeRequestGroup} />,
-    });
-  }
+    if (ancestors.length) {
+      crumbs.push(
+        ...ancestors.map(doc => ({
+          id: doc!._id,
+          label: doc!.name,
+          to: buildResourceUrl({
+            organizationId: organizationId!,
+            projectId: activeProject._id,
+            workspaceId: activeWorkspace!._id,
+            resource: doc!,
+          }),
+          icon: <ResourceIcon resource={doc!} />,
+        })),
+      );
+    }
+
+    if (activeRequest) {
+      crumbs.push({
+        id: activeRequest._id,
+        label: activeRequest.name || 'Untitled request',
+        icon: <ResourceIcon resource={activeRequest} />,
+      });
+    } else if (activeRequestGroup) {
+      crumbs.push({
+        id: activeRequestGroup._id,
+        label: activeRequestGroup.name || 'Untitled group',
+        icon: <ResourceIcon resource={activeRequestGroup} />,
+      });
+    }
+
+    return crumbs;
+  }, [activeProject, activeWorkspace, ancestors, activeRequest, activeRequestGroup, organizationId]);
 
   return breadcrumbs;
 }

packages/insomnia/src/ui/components/workspace/workspace-pane-header.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Button } from 'react-aria-components';
 
 import { isNotNullOrUndefined } from '~/common/misc';
@@ -21,6 +21,20 @@ export default function WorkspacePaneHeader({ hasSettings }: { hasSettings: bool
   const { activeRequest } = useRequestLoaderData() || {};
 
   const breadcrumbs = useWorkspaceBreadcrumbs();
+  const realBreadcrumbs = useMemo(() => {
+    if (breadcrumbs.length > 4) {
+      return [
+        breadcrumbs[0],
+        breadcrumbs[1],
+        {
+          id: '_ellipsis',
+          label: '...', // not interactive currently
+        },
+        breadcrumbs[breadcrumbs.length - 1],
+      ];
+    }
+    return breadcrumbs;
+  }, [breadcrumbs]);
 
   const [isEnvironmentPickerOpen, setIsEnvironmentPickerOpen] = useState(false);
   const [isEnvironmentModalOpen, setEnvironmentModalOpen] = useState(false);
@@ -45,7 +59,7 @@ export default function WorkspacePaneHeader({ hasSettings }: { hasSettings: bool
 
   return (
     <PaneHeader
-      breadcrumbs={breadcrumbs}
+      breadcrumbs={realBreadcrumbs}
       rightSlot={
         hasSettings ? (
           <>