fix: fix container height variable wrongly calculated issue (#1252)

Because

- fix container height variable wrongly calculated issue

This commit

- fix container height variable wrongly calculated issue

packages/toolkit/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@instill-ai/toolkit",
- "version": "0.94.1",
+ "version": "0.94.2-rc.0",
  "description": "Instill AI's frontend toolkit",
  "repository": "https://github.com/instill-ai/design-system.git",
  "bugs": "https://github.com/instill-ai/design-system/issues",

packages/toolkit/src/components/PageBase.tsx

@@ -22,7 +22,7 @@ const Content = ({
  <div className="flex flex-1 bg-semantic-bg-alt-primary">
  <div
  className={cn(
- "h-[calc(100vh-var(--topbar-controller-height))] w-full min-w-[927px] overflow-y-scroll",
+ "h-[calc(100vh-var(--topbar-controller-height)-var(--topbar-nav-height))] w-full min-w-[927px] overflow-y-scroll",
  contentPadding ? contentPadding : "p-20"
  )}
  >

packages/toolkit/src/components/UserProfileCard.tsx

@@ -124,20 +124,18 @@ export const UserProfileCard = ({
  </p>
  </div>
  ) : null}
- {totalPublicPipelines || totalPublicPipelines === 0 ? (
- <div className="flex flex-row gap-x-2">
- <p className="text-semantic-fg-primary product-body-text-2-semibold">
- My active public pipelines
+ <div className="flex flex-row gap-x-2">
+ <p className="text-semantic-fg-primary product-body-text-2-semibold">
+ My active public pipelines
+ </p>
+ <Link
+ href={`/${me.data.id}/pipelines?visibility=VISIBILITY_PUBLIC`}
+ >
+ <p className="text-semantic-accent-default product-body-text-2-semibold">
+ {totalPublicPipelines ?? 0}
  </p>
- <Link
- href={`/${me.data.id}/pipelines?visibility=VISIBILITY_PUBLIC`}
- >
- <p className="text-semantic-accent-default product-body-text-2-semibold">
- {totalPublicPipelines}
- </p>
- </Link>
- </div>
- ) : null}
+ </Link>
+ </div>
  </div>
  </React.Fragment>
  ) : visitorCta ? (

packages/toolkit/src/view/pipeline/view-pipelines/ViewPipelines.tsx

@@ -63,6 +63,15 @@ export const ViewPipelines = () => {
  visibility: selectedVisibilityOption ?? null,
  });
 
+ const myPipelines = useInfiniteUserPipelines({
+ userName: me.isSuccess ? me.data.name : null,
+ enabledQuery: enabledQuery && me.isSuccess,
+ accessToken,
+ pageSize: 10,
+ visibility: null,
+ filter: null,
+ });
+
  const userPublicPipelines = useUserPipelines({
  userName: me.isSuccess ? me.data.name : null,
  enabled: enabledQuery && me.isSuccess,
@@ -102,12 +111,12 @@ export const ViewPipelines = () => {
  <div className="w-[288px] pr-4 pt-6">
  <UserProfileCard
  totalPipelines={
- pipelines.isSuccess ? pipelines.data.pages[0].totalSize : null
+ myPipelines.isSuccess ? myPipelines.data.pages[0].totalSize : null
  }
  totalPublicPipelines={userPublicPipelines.data?.length ?? null}
  />
  </div>
- <div className="flex w-[630px] flex-col pt-6">
+ <div className="flex w-[630px] flex-col py-6">
  <div className="mb-4 grid grid-flow-row grid-cols-3 gap-x-3">
  <div className="flex flex-col gap-y-2.5">
  <p className="text-semantic-fg-primary product-body-text-3-semibold">