diff --git a/apps/web/components/github/github-access-help.tsx b/apps/web/components/github/github-access-help.tsx
index fdc51984bd..3510e5862d 100644
--- a/apps/web/components/github/github-access-help.tsx
+++ b/apps/web/components/github/github-access-help.tsx
@@ -19,12 +19,14 @@ export function GitHubAccessHelp({
title,
description,
content,
+ icon,
onOpen,
}: {
label: string;
title: string;
description: string;
content?: ReactNode;
+ icon?: ReactNode;
onOpen?: () => void;
}) {
const usesTouchDrawer = useTouchDrawer();
@@ -43,7 +45,7 @@ export function GitHubAccessHelp({
aria-expanded={usesTouchDrawer ? open : undefined}
aria-label={label}
>
-
+ {icon ?? }
);
const trigger = usesTouchDrawer ? (
diff --git a/apps/web/components/github/github-rate-limit.tsx b/apps/web/components/github/github-rate-limit.tsx
index d51a8136f2..0500324592 100644
--- a/apps/web/components/github/github-rate-limit.tsx
+++ b/apps/web/components/github/github-rate-limit.tsx
@@ -2,7 +2,7 @@
import { useEffect, useState } from "react";
import type { Locale } from "date-fns";
-import { IconAlertTriangle } from "@tabler/icons-react";
+import { IconAlertTriangle, IconGauge } from "@tabler/icons-react";
import { Alert, AlertDescription } from "@kandev/ui/alert";
import type { GitHubRateLimitInfo, GitHubRateLimitSnapshot } from "@/lib/types/github";
import { GitHubAccessHelp } from "./github-access-help";
@@ -75,6 +75,7 @@ export function GitHubRateLimitDisplay({
label={t("github:showGithubApiLimits")}
title={t("github:githubApiLimits")}
description={t("github:currentGithubApiRateAndQuery")}
+ icon={}
content={
snapshots.length > 0 ? (
diff --git a/apps/web/components/github/github-settings.tsx b/apps/web/components/github/github-settings.tsx
index c3eeeb1214..96d5a3f1f3 100644
--- a/apps/web/components/github/github-settings.tsx
+++ b/apps/web/components/github/github-settings.tsx
@@ -261,7 +261,7 @@ export function GitHubConnectionSection({ workspaceId }: { workspaceId: string }
description={t("github:credentialUsedForRepositorySyncWatches")}
>
-
+
diff --git a/apps/web/e2e/tests/integrations/github-workspace-settings.spec.ts b/apps/web/e2e/tests/integrations/github-workspace-settings.spec.ts
index b2bdc4d5ac..9ec57fab8c 100644
--- a/apps/web/e2e/tests/integrations/github-workspace-settings.spec.ts
+++ b/apps/web/e2e/tests/integrations/github-workspace-settings.spec.ts
@@ -86,6 +86,12 @@ test.describe("GitHub workspace settings", () => {
]);
await stubGitHubRateLimits(testPage, workspaceId);
await testPage.goto(`/settings/workspaces/${workspaceId}/integrations/github`);
+ const accessCard = testPage.getByTestId("github-workspace-access-card");
+ const accessContent = accessCard.locator('[data-slot="card-content"]');
+ const accessContentPaddingTop = await accessContent.evaluate(
+ (element) => getComputedStyle(element).paddingTop,
+ );
+ expect(Number.parseFloat(accessContentPaddingTop)).toBeLessThan(24);
const automation = testPage.getByTestId("github-workspace-automation");
await expect(automation.getByTestId("github-task-access-summary")).toContainText(
"Inherit executor Git credentials",
@@ -114,6 +120,9 @@ test.describe("GitHub workspace settings", () => {
).toBeVisible();
const rateLimitHelp = automation.getByRole("button", { name: "Show GitHub API limits" });
await expect(rateLimitHelp).toBeVisible();
+ await expect(rateLimitHelp.getByTestId("github-rate-limit-icon")).toHaveClass(
+ /tabler-icon-gauge/,
+ );
await rateLimitHelp.hover();
const rateLimitTooltip = testPage.getByRole("tooltip", { name: /API rate limit/ });
await expect(rateLimitTooltip).toContainText(
diff --git a/apps/web/e2e/tests/integrations/mobile-github-workspace-settings.spec.ts b/apps/web/e2e/tests/integrations/mobile-github-workspace-settings.spec.ts
index a7a50c6182..e6a1e183c4 100644
--- a/apps/web/e2e/tests/integrations/mobile-github-workspace-settings.spec.ts
+++ b/apps/web/e2e/tests/integrations/mobile-github-workspace-settings.spec.ts
@@ -18,6 +18,12 @@ test.describe("GitHub workspace settings on mobile", () => {
]);
await stubGitHubRateLimits(testPage, workspaceId);
await testPage.goto(`/settings/workspaces/${workspaceId}/integrations/github`);
+ const accessCard = testPage.getByTestId("github-workspace-access-card");
+ const accessContent = accessCard.locator('[data-slot="card-content"]');
+ const accessContentPaddingTop = await accessContent.evaluate(
+ (element) => getComputedStyle(element).paddingTop,
+ );
+ expect(Number.parseFloat(accessContentPaddingTop)).toBeLessThan(24);
const automation = testPage.getByTestId("github-workspace-automation");
await expect(automation.getByTestId("github-task-access-summary")).toContainText(
"Inherit executor Git credentials",
@@ -50,6 +56,9 @@ test.describe("GitHub workspace settings on mobile", () => {
await testPage.keyboard.press("Escape");
const rateLimitHelp = automation.getByRole("button", { name: "Show GitHub API limits" });
await expect(rateLimitHelp).toBeVisible();
+ await expect(rateLimitHelp.getByTestId("github-rate-limit-icon")).toHaveClass(
+ /tabler-icon-gauge/,
+ );
const rateLimitHelpBox = await rateLimitHelp.boundingBox();
expect(rateLimitHelpBox?.height).toBeGreaterThanOrEqual(44);
await rateLimitHelp.tap();
diff --git a/apps/web/e2e/tests/settings/mobile-github-integration-layout.spec.ts b/apps/web/e2e/tests/settings/mobile-github-integration-layout.spec.ts
index cb6d147886..4433a6a6ca 100644
--- a/apps/web/e2e/tests/settings/mobile-github-integration-layout.spec.ts
+++ b/apps/web/e2e/tests/settings/mobile-github-integration-layout.spec.ts
@@ -12,6 +12,10 @@ test.describe("Mobile GitHub integration settings", () => {
const accessCard = testPage.getByTestId("github-workspace-access-card");
await expect(accessCard).toBeVisible();
await expect(accessCard).toHaveAttribute("data-slot", "card");
+ const accessContentPaddingTop = await accessCard
+ .locator('[data-slot="card-content"]')
+ .evaluate((element) => getComputedStyle(element).paddingTop);
+ expect(Number.parseFloat(accessContentPaddingTop)).toBeLessThan(24);
await expect(testPage.locator("#github-enabled")).toHaveAttribute("aria-checked", "true");
expect(
await testPage.evaluate(