From 80c0c43c7f8a072f8c4fad4a42c288c4860edf44 Mon Sep 17 00:00:00 2001 From: Adam Matthiesen Date: Wed, 20 Nov 2024 11:47:43 -0800 Subject: [PATCH] Fix CSS issue for mobile devices in twoslash module --- .changeset/friendly-brooms-tap.md | 5 +++++ packages/twoslash/src/module-code/popup.js | 4 ++-- packages/twoslash/src/module-code/popup.min.js | 2 +- packages/twoslash/src/styles.ts | 10 ++++++++-- 4 files changed, 16 insertions(+), 5 deletions(-) create mode 100644 .changeset/friendly-brooms-tap.md diff --git a/.changeset/friendly-brooms-tap.md b/.changeset/friendly-brooms-tap.md new file mode 100644 index 0000000..c315de0 --- /dev/null +++ b/.changeset/friendly-brooms-tap.md @@ -0,0 +1,5 @@ +--- +"expressive-code-twoslash": patch +--- + +Fix: Small CSS issue for mobile devices diff --git a/packages/twoslash/src/module-code/popup.js b/packages/twoslash/src/module-code/popup.js index c8602a6..7779798 100644 --- a/packages/twoslash/src/module-code/popup.js +++ b/packages/twoslash/src/module-code/popup.js @@ -35,7 +35,7 @@ function setupTooltip(ToolTip, isMobileScreen) { FloatingUIDOM.size({ apply({ availableWidth }) { Object.assign(hoverAnnotation.style, { - maxWidth: `${Math.max(0, isMobileScreen ? 300 : availableWidth)}px`, + maxWidth: `${Math.max(300, availableWidth)}px`, maxHeight: "100%", }); }, @@ -46,7 +46,7 @@ function setupTooltip(ToolTip, isMobileScreen) { .then(({ x, y }) => { Object.assign(hoverAnnotation.style, { display: "block", - left: `${isMobileScreen ? 50 : x}px`, + left: `${isMobileScreen ? 20 : x}px`, top: `${y}px`, }); }); diff --git a/packages/twoslash/src/module-code/popup.min.js b/packages/twoslash/src/module-code/popup.min.js index 69e8610..4674514 100644 --- a/packages/twoslash/src/module-code/popup.min.js +++ b/packages/twoslash/src/module-code/popup.min.js @@ -5,4 +5,4 @@ To change it, modify the source file and then re-run the build script. */ -export default 'function setupTooltip(e,o){let s=e.querySelector(".twoslash-popup-container"),t=s.closest(".expressive-code"),i="twoslash_popup_"+[Math.random(),Date.now()].map(e=>e.toString(36).substring(2,10)).join("_");s.setAttribute("role","tooltip"),s.setAttribute("tabindex","-1"),s?.parentNode&&s.parentNode.removeChild(s);let a=!1,r;function n(){clearTimeout(r),t.appendChild(s),new Promise(e=>requestAnimationFrame(()=>{requestAnimationFrame(e)})).then(()=>FloatingUIDOM.computePosition(e,s,{placement:o?"bottom":"bottom-start",middleware:[FloatingUIDOM.size({apply({availableWidth:e}){Object.assign(s.style,{maxWidth:Math.max(0,o?300:e)+"px",maxHeight:"100%"})}})]})).then(({x:e,y:t})=>{Object.assign(s.style,{display:"block",left:`${o?50:e}px`,top:t+"px"})}),s.setAttribute("aria-hidden","false"),e.querySelector(".twoslash-hover span")?.setAttribute("aria-describedby",i),s.setAttribute("id",i)}function d(){s.setAttribute("aria-hidden","true"),e.querySelector(".twoslash-hover span")?.removeAttribute("aria-describedby"),s.removeAttribute("id"),s.style.display="none"}e.addEventListener("mouseenter",n),e.addEventListener("mouseleave",()=>{r=setTimeout(()=>{a||d()},100)}),s.addEventListener("mouseenter",()=>{clearTimeout(r),a=!0}),s.addEventListener("mouseleave",()=>{a=!1,r=setTimeout(()=>{e.matches(":hover")||d()},100)}),e.addEventListener("focus",n),e.addEventListener("blur",d),d()}let isMobileScreen=window.matchMedia("(max-width: 500px)").matches;function initTwoslashPopups(e){e.querySelectorAll?.(".twoslash-hover").forEach(e=>{setupTooltip(e,isMobileScreen)})}initTwoslashPopups(document);let newTwoslashPopupObserver=new MutationObserver(e=>e.forEach(e=>e.addedNodes.forEach(e=>{initTwoslashPopups(e)})));newTwoslashPopupObserver.observe(document.body,{childList:!0,subtree:!0}),document.addEventListener("astro:page-load",()=>{initTwoslashPopups(document.body)});'; \ No newline at end of file +export default 'function setupTooltip(e,o){let s=e.querySelector(".twoslash-popup-container"),t=s.closest(".expressive-code"),i="twoslash_popup_"+[Math.random(),Date.now()].map(e=>e.toString(36).substring(2,10)).join("_");s.setAttribute("role","tooltip"),s.setAttribute("tabindex","-1"),s?.parentNode&&s.parentNode.removeChild(s);let a=!1,r;function n(){clearTimeout(r),t.appendChild(s),new Promise(e=>requestAnimationFrame(()=>{requestAnimationFrame(e)})).then(()=>FloatingUIDOM.computePosition(e,s,{placement:o?"bottom":"bottom-start",middleware:[FloatingUIDOM.size({apply({availableWidth:e}){Object.assign(s.style,{maxWidth:Math.max(300,e)+"px",maxHeight:"100%"})}})]})).then(({x:e,y:t})=>{Object.assign(s.style,{display:"block",left:`${o?20:e}px`,top:t+"px"})}),s.setAttribute("aria-hidden","false"),e.querySelector(".twoslash-hover span")?.setAttribute("aria-describedby",i),s.setAttribute("id",i)}function d(){s.setAttribute("aria-hidden","true"),e.querySelector(".twoslash-hover span")?.removeAttribute("aria-describedby"),s.removeAttribute("id"),s.style.display="none"}e.addEventListener("mouseenter",n),e.addEventListener("mouseleave",()=>{r=setTimeout(()=>{a||d()},100)}),s.addEventListener("mouseenter",()=>{clearTimeout(r),a=!0}),s.addEventListener("mouseleave",()=>{a=!1,r=setTimeout(()=>{e.matches(":hover")||d()},100)}),e.addEventListener("focus",n),e.addEventListener("blur",d),d()}let isMobileScreen=window.matchMedia("(max-width: 500px)").matches;function initTwoslashPopups(e){e.querySelectorAll?.(".twoslash-hover").forEach(e=>{setupTooltip(e,isMobileScreen)})}initTwoslashPopups(document);let newTwoslashPopupObserver=new MutationObserver(e=>e.forEach(e=>e.addedNodes.forEach(e=>{initTwoslashPopups(e)})));newTwoslashPopupObserver.observe(document.body,{childList:!0,subtree:!0}),document.addEventListener("astro:page-load",()=>{initTwoslashPopups(document.body)});'; \ No newline at end of file diff --git a/packages/twoslash/src/styles.ts b/packages/twoslash/src/styles.ts index f9267ef..38283e2 100644 --- a/packages/twoslash/src/styles.ts +++ b/packages/twoslash/src/styles.ts @@ -272,9 +272,8 @@ export function getTwoSlashBaseStyles({ cssVar }: ResolverContext): string { .twoslash-popup-code { display: block; - width: fit-content; + width: 100%; max-width: 600px; - min-width: 100%; padding: 6px 12px; font-size: ${cssVar("codeFontSize")}; font-weight: 400; @@ -332,6 +331,13 @@ export function getTwoSlashBaseStyles({ cssVar }: ResolverContext): string { background-color: ${cssVar("scrollbarThumbHoverColor")}; } + .twoslash-popup-code::-webkit-scrollbar-corner, + .twoslash-popup-docs::-webkit-scrollbar-corner { + background: transparent; + width: 0; + height: 0; + } + .twoslash-popup-code, .twoslash-popup-docs { max-height: ${cssVar("twoSlash.popupDocsMaxHeight")} !important;