Fix CSS issue for mobile devices in twoslash module (#21)

MatthiesenXYZ · Nov 20, 2024 · 178ae11 · 178ae11
1 parent 55c0afa
commit 178ae11
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git a/.changeset/friendly-brooms-tap.md 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
@@ -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
diff --git 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;