Oct 12, 2025 · Oct 12, 2025
diff --git a/site/src/components/CopyableValue/CopyableValue.tsx b/site/src/components/CopyableValue/CopyableValue.tsx
 import Tooltip, { type TooltipProps } from "@mui/material/Tooltip";
 import {
 Tooltip,
 TooltipContent,
 TooltipProvider,
 TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import { useClickable } from "hooks/useClickable";
 import { useClipboard } from "hooks/useClipboard";
 import type { FC, HTMLAttributes } from "react";
 import { cn } from "utils/cn";

 type TooltipSide = "top" | "right" | "bottom" | "left";

 interface CopyableValueProps extends HTMLAttributes<HTMLSpanElement> {
 value: string;
 placement?: TooltipProps["placement"];
 PopperProps?: TooltipProps["PopperProps"];
 side?: TooltipSide;
 }

 export const CopyableValue: FC<CopyableValueProps> = ({
 value,
 placement = "bottom-start",
 PopperProps,
 side = "bottom",
 children,
 className,
 ...attrs
 }) => {
 const { showCopiedSuccess, copyToClipboard } = useClipboard();
 });

 return (
 <Tooltip
 title={showCopiedSuccess ? "Copied!" : "Click to copy"}
 placement={placement}
 PopperProps={PopperProps}
 >
 <span {...attrs} {...clickableProps} css={{ cursor: "pointer" }}>
 {children}
 </span>
 </Tooltip>
 <TooltipProvider>
 <Tooltip>
 <TooltipTrigger asChild>
 <span
 {...attrs}
 {...clickableProps}
 className={cn("cursor-pointer", className)}
 >
 {children}
 </span>
 </TooltipTrigger>
 <TooltipContent side={side}>
 {showCopiedSuccess ? "Copied!" : "Click to copy"}
 </TooltipContent>
 </Tooltip>
 </TooltipProvider>
 );
 };
diff --git a/site/src/modules/resources/SensitiveValue.tsx b/site/src/modules/resources/SensitiveValue.tsx
 gap: 4,
 }}
 >
 <CopyableValue value={value} css={styles.value}>
 <CopyableValue
 value={value}
 className="w-[calc(100%-22px)] overflow-hidden whitespace-nowrap text-ellipsis"
 >
 {displayValue}
 </CopyableValue>
 <Tooltip title={buttonLabel}>
 };

 const styles = {
 value: {
 // 22px is the button width
 width: "calc(100% - 22px)",
 overflow: "hidden",
 whiteSpace: "nowrap",
 textOverflow: "ellipsis",
 },

 button: css`
    color: inherit;
  `,
diff --git a/site/src/pages/IconsPage/IconsPage.tsx b/site/src/pages/IconsPage/IconsPage.tsx
 PageHeaderSubtitle,
 PageHeaderTitle,
 } from "components/PageHeader/PageHeader";
 import { Stack } from "components/Stack/Stack";
 import { SearchIcon, XIcon } from "lucide-react";
 import { type FC, type ReactNode, useMemo, useState } from "react";
 import {
 }}
 />

 <Stack
 direction="row"
 wrap="wrap"
 spacing={1}
 justifyContent="center"
 <div
 css={{ marginTop: 32 }}
 className="flex flex-row gap-2 justify-center flex-wrap max-w-full"
 >
 {searchedIcons.length === 0 && (
 <EmptyState message="No results matched your search" />
 )}
 {searchedIcons.map((icon) => (
 <CopyableValue key={icon.url} value={icon.url} placement="bottom">
 <Stack alignItems="center" css={{ margin: 12 }}>
 <CopyableValue key={icon.url} value={icon.url} side="bottom">
 <div
 css={{ margin: 12 }}
 className="flex flex-col gap-4 items-center max-w-full"
 >
 <img
 alt={icon.url}
 src={icon.url}
 >
 {icon.description}
 </figcaption>
 </Stack>
 </div>
 </CopyableValue>
 ))}
 </Stack>
 </div>
 </Margins>
 </>
 );
Original file line number	Diff line number	Diff line change
		@@ -1,19 +1,26 @@
		import Tooltip, { type TooltipProps } from "@mui/material/Tooltip";
		import {
		Tooltip,
		TooltipContent,
		TooltipProvider,
		TooltipTrigger,
		} from "components/Tooltip/Tooltip";
		import { useClickable } from "hooks/useClickable";
		import { useClipboard } from "hooks/useClipboard";
		import type { FC, HTMLAttributes } from "react";
		import { cn } from "utils/cn";

		type TooltipSide = "top" \| "right" \| "bottom" \| "left";

		interface CopyableValueProps extends HTMLAttributes<HTMLSpanElement> {
		value: string;
		placement?: TooltipProps["placement"];
		PopperProps?: TooltipProps["PopperProps"];
		side?: TooltipSide;
		}

		export const CopyableValue: FC<CopyableValueProps> = ({
		value,
		placement = "bottom-start",
		PopperProps,
		side = "bottom",
		children,
		className,
		...attrs
		}) => {
		const { showCopiedSuccess, copyToClipboard } = useClipboard();
Expand All		@@ -22,14 +29,21 @@ export const CopyableValue: FC<CopyableValueProps> = ({
		});

		return (
		<Tooltip
		title={showCopiedSuccess ? "Copied!" : "Click to copy"}
		placement={placement}
		PopperProps={PopperProps}
		>
		<span {...attrs} {...clickableProps} css={{ cursor: "pointer" }}>
		{children}
		</span>
		</Tooltip>
		<TooltipProvider>
		<Tooltip>
		<TooltipTrigger asChild>
		<span
		{...attrs}
		{...clickableProps}
		className={cn("cursor-pointer", className)}
		>
		{children}
		</span>
		</TooltipTrigger>
		<TooltipContent side={side}>
		{showCopiedSuccess ? "Copied!" : "Click to copy"}
		</TooltipContent>
		</Tooltip>
		</TooltipProvider>
		);
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -32,7 +32,10 @@ export const SensitiveValue: FC<SensitiveValueProps> = ({ value }) => {
		gap: 4,
		}}
		>
		<CopyableValue value={value} css={styles.value}>
		<CopyableValue
		value={value}
		className="w-[calc(100%-22px)] overflow-hidden whitespace-nowrap text-ellipsis"
		>
		{displayValue}
		</CopyableValue>
		<Tooltip title={buttonLabel}>
Expand All		@@ -52,14 +55,6 @@ export const SensitiveValue: FC<SensitiveValueProps> = ({ value }) => {
		};

		const styles = {
		value: {
		// 22px is the button width
		width: "calc(100% - 22px)",
		overflow: "hidden",
		whiteSpace: "nowrap",
		textOverflow: "ellipsis",
		},

		button: css`
		color: inherit;
		`,
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -12,7 +12,6 @@ import {
		PageHeaderSubtitle,
		PageHeaderTitle,
		} from "components/PageHeader/PageHeader";
		import { Stack } from "components/Stack/Stack";
		import { SearchIcon, XIcon } from "lucide-react";
		import { type FC, type ReactNode, useMemo, useState } from "react";
		import {
Expand DownExpand Up		@@ -147,19 +146,19 @@ const IconsPage: FC = () => {
		}}
		/>

		<Stack
		direction="row"
		wrap="wrap"
		spacing={1}
		justifyContent="center"
		<div
		css={{ marginTop: 32 }}
		className="flex flex-row gap-2 justify-center flex-wrap max-w-full"
		>
		{searchedIcons.length === 0 && (
		<EmptyState message="No results matched your search" />
		)}
		{searchedIcons.map((icon) => (
		<CopyableValue key={icon.url} value={icon.url} placement="bottom">
		<Stack alignItems="center" css={{ margin: 12 }}>
		<CopyableValue key={icon.url} value={icon.url} side="bottom">
		<div
		css={{ margin: 12 }}
		className="flex flex-col gap-4 items-center max-w-full"
		>
		<img
		alt={icon.url}
		src={icon.url}
Expand DownExpand Up		@@ -189,10 +188,10 @@ const IconsPage: FC = () => {
		>
		{icon.description}
		</figcaption>
		</Stack>
		</div>
		</CopyableValue>
		))}
		</Stack>
		</div>
		</Margins>
		</>
		);
Expand Down