From 899a23cd3dfd124278d6a40011a3b5f1689cd99e Mon Sep 17 00:00:00 2001
From: Ryan Willis <ryan.willis@konghq.com>
Date: Fri, 12 Sep 2025 02:42:11 -0700
Subject: [PATCH] fix: eliminate extra border (#9091)

---
 ...ganizationId.project.$projectId._index.tsx |  2 +-
 ...projectId.workspace.$workspaceId.debug.tsx |  5 +--
 ...tId.workspace.$workspaceId.environment.tsx | 36 +++++++++---------
 ...$projectId.workspace.$workspaceId.spec.tsx | 38 ++++++++++---------
 ...$projectId.workspace.$workspaceId.test.tsx | 36 +++++++++---------
 5 files changed, 60 insertions(+), 57 deletions(-)

diff --git a/packages/insomnia/src/routes/organization.$organizationId.project.$projectId._index.tsx b/packages/insomnia/src/routes/organization.$organizationId.project.$projectId._index.tsx
index 0f93f5f287..abad954d2b 100644
--- a/packages/insomnia/src/routes/organization.$organizationId.project.$projectId._index.tsx
+++ b/packages/insomnia/src/routes/organization.$organizationId.project.$projectId._index.tsx
@@ -780,7 +780,7 @@ const Component = () => {
             collapsible
           >
             <div className="flex flex-1 flex-col divide-y divide-solid divide-[--hl-md] overflow-hidden">
-              <div className="h-[40px] p-[--padding-sm]">
+              <div className="flex h-[40px] flex-col items-start justify-center p-[--padding-sm]">
                 <Select
                   aria-label="Organizations"
                   onSelectionChange={id => {
diff --git a/packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.debug.tsx b/packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.debug.tsx
index 7f4f95959c..3189c05407 100644
--- a/packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.debug.tsx
+++ b/packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.debug.tsx
@@ -798,7 +798,7 @@ const Debug = () => {
         <div className="flex flex-1 flex-col divide-y divide-solid divide-[--hl-md] overflow-hidden">
           <div className="flex flex-col items-start divide-y divide-solid divide-[--hl-md]">
             <div className={`flex w-full h-[${INSOMNIA_TAB_HEIGHT}px]`}>
-              <Breadcrumbs className="m-0 flex h-[--line-height-sm] w-full list-none items-center gap-2 px-[--padding-sm] font-bold">
+              <Breadcrumbs className="m-0 flex h-full w-full list-none items-center gap-2 px-[--padding-sm] font-bold">
                 <Breadcrumb className="flex h-full select-none items-center gap-2 text-[--color-font] outline-none data-[focused]:outline-none">
                   <NavLink
                     data-testid="project"
@@ -860,7 +860,6 @@ const Debug = () => {
               </Button>
             </div>
           </div>
-
           <div className="flex flex-1 flex-col overflow-hidden">
             <div className="flex justify-between gap-1 p-[--padding-sm]">
               <SearchField
@@ -1151,9 +1150,7 @@ const Debug = () => {
               </GridList>
             </div>
           </div>
-
           <WorkspaceSyncDropdown />
-
           {isEnvironmentModalOpen && <WorkspaceEnvironmentsEditModal onClose={() => setEnvironmentModalOpen(false)} />}
           {isImportModalOpen && (
             <ImportModal
diff --git a/packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.environment.tsx b/packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.environment.tsx
index 722ed33af8..69a175b140 100644
--- a/packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.environment.tsx
+++ b/packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.environment.tsx
@@ -324,23 +324,25 @@ const Component = ({ loaderData, params }: Route.ComponentProps) => {
         minSize={10}
         collapsible
       >
-        <Breadcrumbs
-          className={`flex h-[${INSOMNIA_TAB_HEIGHT}px] m-0 w-full list-none items-center gap-2 px-[--padding-sm] font-bold`}
-        >
-          <Breadcrumb className="flex h-full select-none items-center gap-2 text-[--color-font] outline-none data-[focused]:outline-none">
-            <NavLink
-              data-testid="project"
-              className="flex aspect-square h-7 flex-shrink-0 items-center justify-center gap-2 rounded-sm px-1 py-1 text-sm text-[--color-font] outline-none ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] data-[focused]:outline-none"
-              to={`/organization/${organizationId}/project/${activeProject._id}`}
-            >
-              <Icon className="text-xs" icon="chevron-left" />
-            </NavLink>
-            <span aria-hidden role="separator" className="h-4 text-[--hl-lg] outline outline-1" />
-          </Breadcrumb>
-          <Breadcrumb className="flex h-full select-none items-center gap-2 truncate text-[--color-font] outline-none data-[focused]:outline-none">
-            <WorkspaceDropdown />
-          </Breadcrumb>
-        </Breadcrumbs>
+        <div className="flex flex-col items-start">
+          <Breadcrumbs
+            className={`flex h-[${INSOMNIA_TAB_HEIGHT}px] m-0 w-full list-none items-center gap-2 px-[--padding-sm] font-bold`}
+          >
+            <Breadcrumb className="flex h-full select-none items-center gap-2 text-[--color-font] outline-none data-[focused]:outline-none">
+              <NavLink
+                data-testid="project"
+                className="flex aspect-square h-7 flex-shrink-0 items-center justify-center gap-2 rounded-sm px-1 py-1 text-sm text-[--color-font] outline-none ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] data-[focused]:outline-none"
+                to={`/organization/${organizationId}/project/${activeProject._id}`}
+              >
+                <Icon className="text-xs" icon="chevron-left" />
+              </NavLink>
+              <span aria-hidden role="separator" className="h-4 text-[--hl-lg] outline outline-1" />
+            </Breadcrumb>
+            <Breadcrumb className="flex h-full select-none items-center gap-2 truncate text-[--color-font] outline-none data-[focused]:outline-none">
+              <WorkspaceDropdown />
+            </Breadcrumb>
+          </Breadcrumbs>
+        </div>
         <GridList
           aria-label="Environments"
           items={[baseEnvironment, ...subEnvironments]}
diff --git a/packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.spec.tsx b/packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.spec.tsx
index def7c15385..a4a300447a 100644
--- a/packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.spec.tsx
+++ b/packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.spec.tsx
@@ -400,24 +400,26 @@ const Component = ({ params }: Route.ComponentProps) => {
         minSize={10}
         collapsible
       >
-        <div className="flex h-full flex-col divide-y divide-solid divide-[--hl-md] overflow-hidden">
-          <Breadcrumbs
-            className={`flex h-[${INSOMNIA_TAB_HEIGHT}px] m-0 w-full list-none items-center gap-2 px-[--padding-sm] font-bold`}
-          >
-            <Breadcrumb className="flex h-full select-none items-center gap-2 text-[--color-font] outline-none data-[focused]:outline-none">
-              <NavLink
-                data-testid="project"
-                className="flex aspect-square h-7 flex-shrink-0 items-center justify-center gap-2 rounded-sm px-1 py-1 text-sm text-[--color-font] outline-none ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] data-[focused]:outline-none"
-                to={`/organization/${organizationId}/project/${activeProject._id}`}
-              >
-                <Icon className="text-xs" icon="chevron-left" />
-              </NavLink>
-              <span aria-hidden role="separator" className="h-4 text-[--hl-lg] outline outline-1" />
-            </Breadcrumb>
-            <Breadcrumb className="flex h-full select-none items-center gap-2 truncate text-[--color-font] outline-none data-[focused]:outline-none">
-              <WorkspaceDropdown />
-            </Breadcrumb>
-          </Breadcrumbs>
+        <div className="flex flex-1 flex-col divide-y divide-solid divide-[--hl-md] overflow-hidden">
+          <div className="flex w-full flex-col items-start">
+            <Breadcrumbs
+              className={`flex h-[${INSOMNIA_TAB_HEIGHT}px] m-0 w-full list-none items-center gap-2 px-[--padding-sm] font-bold`}
+            >
+              <Breadcrumb className="flex h-full select-none items-center gap-2 text-[--color-font] outline-none data-[focused]:outline-none">
+                <NavLink
+                  data-testid="project"
+                  className="flex aspect-square h-7 flex-shrink-0 items-center justify-center gap-2 rounded-sm px-1 py-1 text-sm text-[--color-font] outline-none ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] data-[focused]:outline-none"
+                  to={`/organization/${organizationId}/project/${activeProject._id}`}
+                >
+                  <Icon className="text-xs" icon="chevron-left" />
+                </NavLink>
+                <span aria-hidden role="separator" className="h-4 text-[--hl-lg] outline outline-1" />
+              </Breadcrumb>
+              <Breadcrumb className="flex h-full select-none items-center gap-2 truncate text-[--color-font] outline-none data-[focused]:outline-none">
+                <WorkspaceDropdown />
+              </Breadcrumb>
+            </Breadcrumbs>
+          </div>
           <DocumentTab
             organizationId={organizationId}
             projectId={projectId}
diff --git a/packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.test.tsx b/packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.test.tsx
index 3929e19fd0..801b5b90a1 100644
--- a/packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.test.tsx
+++ b/packages/insomnia/src/routes/organization.$organizationId.project.$projectId.workspace.$workspaceId.test.tsx
@@ -303,23 +303,25 @@ const Component = () => {
         <ErrorBoundary showAlert>
           <div className="flex flex-1 flex-col divide-y divide-solid divide-[--hl-md] overflow-hidden">
             <div className="flex flex-col items-start divide-y divide-solid divide-[--hl-md]">
-              <Breadcrumbs
-                className={`flex h-[${INSOMNIA_TAB_HEIGHT}px] m-0 w-full list-none items-center gap-2 px-[--padding-sm] font-bold`}
-              >
-                <Breadcrumb className="flex h-full select-none items-center gap-2 text-[--color-font] outline-none data-[focused]:outline-none">
-                  <NavLink
-                    data-testid="project"
-                    className="flex aspect-square h-7 flex-shrink-0 items-center justify-center gap-2 rounded-sm px-1 py-1 text-sm text-[--color-font] outline-none ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] data-[focused]:outline-none"
-                    to={`/organization/${organizationId}/project/${activeProject._id}`}
-                  >
-                    <Icon className="text-xs" icon="chevron-left" />
-                  </NavLink>
-                  <span aria-hidden role="separator" className="h-4 text-[--hl-lg] outline outline-1" />
-                </Breadcrumb>
-                <Breadcrumb className="flex h-full select-none items-center gap-2 truncate text-[--color-font] outline-none data-[focused]:outline-none">
-                  <WorkspaceDropdown />
-                </Breadcrumb>
-              </Breadcrumbs>
+              <div className="flex w-full flex-col items-start">
+                <Breadcrumbs
+                  className={`flex h-[${INSOMNIA_TAB_HEIGHT}px] m-0 w-full list-none items-center gap-2 px-[--padding-sm] font-bold`}
+                >
+                  <Breadcrumb className="flex h-full select-none items-center gap-2 text-[--color-font] outline-none data-[focused]:outline-none">
+                    <NavLink
+                      data-testid="project"
+                      className="flex aspect-square h-7 flex-shrink-0 items-center justify-center gap-2 rounded-sm px-1 py-1 text-sm text-[--color-font] outline-none ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] data-[focused]:outline-none"
+                      to={`/organization/${organizationId}/project/${activeProject._id}`}
+                    >
+                      <Icon className="text-xs" icon="chevron-left" />
+                    </NavLink>
+                    <span aria-hidden role="separator" className="h-4 text-[--hl-lg] outline outline-1" />
+                  </Breadcrumb>
+                  <Breadcrumb className="flex h-full select-none items-center gap-2 truncate text-[--color-font] outline-none data-[focused]:outline-none">
+                    <WorkspaceDropdown />
+                  </Breadcrumb>
+                </Breadcrumbs>
+              </div>
               <DocumentTab organizationId={organizationId} projectId={projectId} workspaceId={workspaceId} />
               <div className="flex w-full flex-col items-start gap-2 p-[--padding-sm]">
                 <div className="flex w-full items-center justify-between gap-2">