diff --git a/frontend/app/block/block.scss b/frontend/app/block/block.scss index 87c5c645b7..4096e2acc8 100644 --- a/frontend/app/block/block.scss +++ b/frontend/app/block/block.scss @@ -309,7 +309,6 @@ width: 100%; font: var(--base-font); color: var(--secondary-text-color); - gap: 12px; .connstatus-status-icon-wrapper { display: flex; @@ -338,7 +337,6 @@ width: 100%; .connstatus-status-text { - @include mixins.ellipsis(); max-width: 100%; font-size: 11px; font-style: normal; @@ -349,13 +347,36 @@ } .connstatus-error { - @include mixins.ellipsis(); - width: 94%; font-size: 11px; font-style: normal; font-weight: 400; line-height: 15px; letter-spacing: 0.11px; + text-wrap: wrap; + max-height: 80px; + border-radius: 8px; + padding: 5px; + padding-left: 0; + position: relative; + + .copy-button { + visibility: hidden; + display: flex; + position: sticky; + top: 0; + right: 4px; + float: right; + border-radius: 4px; + backdrop-filter: blur(8px); + padding: 0.286em; + align-items: center; + justify-content: flex-end; + gap: 0.286em; + } + + &:hover .copy-button { + visibility: visible; + } } } } diff --git a/frontend/app/block/blockframe.tsx b/frontend/app/block/blockframe.tsx index e9f997e5ea..2a14446b74 100644 --- a/frontend/app/block/blockframe.tsx +++ b/frontend/app/block/blockframe.tsx @@ -38,7 +38,9 @@ import * as keyutil from "@/util/keyutil"; import * as util from "@/util/util"; import clsx from "clsx"; import * as jotai from "jotai"; +import { OverlayScrollbarsComponent } from "overlayscrollbars-react"; import * as React from "react"; +import { CopyButton } from "../element/copybutton"; import { BlockFrameProps } from "./blocktypes"; const NumActiveConnColors = 8; @@ -420,6 +422,22 @@ const ConnStatusOverlay = React.memo( setShowWshError(showWshErrorTemp); }, [connStatus, wshConfigEnabled]); + const errorText = React.useMemo(() => { + const errTexts = []; + if (showError) { + errTexts.push(`error: ${connStatus.error}`); + } + if (showWshError) { + errTexts.push(`unable to use wsh: ${connStatus.error}`); + } + return errTexts.join("\n"); + }, [showError, connStatus.error, showWshError, connStatus.wsherror]); + + const handleCopy = async (e: React.MouseEvent) => { + let textToCopy = errorText; + await navigator.clipboard.writeText(textToCopy); + }; + if (!showWshError && (isLayoutMode || connStatus.status == "connected" || connModalOpen)) { return null; } @@ -431,10 +449,14 @@ const ConnStatusOverlay = React.memo( {showIcon && }
{statusText}
- {showError ?
error: {connStatus.error}
: null} - {showWshError ? ( -
unable to use wsh: {connStatus.wsherror}
- ) : null} + + + {showError ?
error: {connStatus.error}
: null} + {showWshError ?
unable to use wsh: {connStatus.wsherror}
: null} +
{showWshError && (