diff --git a/src/content-render/liquid/prompt.ts b/src/content-render/liquid/prompt.ts index 4a2c666d0657..d241786e6b81 100644 --- a/src/content-render/liquid/prompt.ts +++ b/src/content-render/liquid/prompt.ts @@ -38,6 +38,13 @@ export const Prompt: LiquidTag = { const href: string = `https://github.com/copilot?prompt=${promptParam}` // Use murmur hash for deterministic ID (avoids hydration mismatch) const promptId: string = generatePromptId(contentString) - return `
${content}${content}${octicons.copilot.toSVG()}`
+ // Show long text on larger screens and short text on smaller screens (set via accessibility.scss)
+ const promptLabelLong: string = 'Run this prompt in Copilot Chat'
+ const promptLabelShort: string = 'Run prompt'
+ return [
+ `${content}`,
+ `${octicons.copilot.toSVG()}`,
+ `${octicons.copilot.toSVG()}`,
+ ].join('')
},
}
diff --git a/src/content-render/stylesheets/accessibility.scss b/src/content-render/stylesheets/accessibility.scss
index 2fd8509cc642..8d5b8de97cb2 100644
--- a/src/content-render/stylesheets/accessibility.scss
+++ b/src/content-render/stylesheets/accessibility.scss
@@ -21,3 +21,26 @@
}
}
}
+
+/* Responsive tooltip text for Copilot prompt links */
+/* Show long tooltip text on small screens and up (544px+) */
+.copilot-prompt-long {
+ display: none;
+ visibility: hidden;
+
+ @media (min-width: 544px) {
+ display: inline-block;
+ visibility: visible;
+ }
+}
+
+/* Show short tooltip text only on extra small screens (below 544px) */
+.copilot-prompt-short {
+ display: inline-block;
+ visibility: visible;
+
+ @media (min-width: 544px) {
+ display: none;
+ visibility: hidden;
+ }
+}
diff --git a/src/content-render/tests/prompt.ts b/src/content-render/tests/prompt.ts
index 2eb453990dc0..65de51fea1c3 100644
--- a/src/content-render/tests/prompt.ts
+++ b/src/content-render/tests/prompt.ts
@@ -2,10 +2,22 @@ import { describe, expect, test } from 'vitest'
import { renderContent } from '@/content-render/index'
describe('prompt tag', () => {
- test('wraps content in and appends svg', async () => {
+ test('wraps content in with ID and appends responsive svg links', async () => {
const input: string = 'Here is your prompt: {% prompt %}example prompt text{% endprompt %}.'
const output: string = await renderContent(input)
- expect(output).toContain('example prompt text