fix: pin explanation panel to right side of screen

githubnext · Apr 19, 2022 · a224ed9 · a224ed9
1 parent f700b97
commit a224ed9
Showing 1 changed file with 55 additions and 53 deletions.
diff --git a/src/blocks/file-blocks/explain/index.tsx b/src/blocks/file-blocks/explain/index.tsx
@@ -101,63 +101,65 @@ function BlockInner(props: FileBlockProps) {
   }, [content, context, start, end]);
 
   return (
-    <div className="h-full explain-block overflow-auto pl-10 relative">
-      {start && end && (
-        <div
-          className="z-20 absolute"
-          style={{ top: (start - 1) * 18 - 4, left: 0 }}
-        >
-          <LineMenu
-            start={start}
-            end={end}
-            onCopy={handleCopy}
-            onCopyPermalink={handleCopyPermalink}
-            onExplain={handleExplain}
-          />
-        </div>
-      )}
-      <SyntaxHighlighter
-        language={syntaxHighlighterLanguageMap[language] || "javascript"}
-        useInlineStyles={false}
-        wrapLines
-        className="!bg-transparent syntax-highlighter-block"
-        lineProps={(lineNumber) => {
-          const isHighlighted =
-            start && end && lineNumber >= start && lineNumber <= end;
-          return {
-            "data-highlighted": isHighlighted,
-            onClick: (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
-              let clicked = e.target as HTMLElement;
-              if (!clicked.classList.contains("comment")) return;
-              handleLineClick(lineNumber, e.shiftKey);
-            },
-            style: {
-              display: "block",
-            },
-          };
-        }}
-        showLineNumbers
-      >
-        {content}
-      </SyntaxHighlighter>
-      {Object.entries(explanations).map(([line, explanation]) => {
-        return (
+    <div className="relative h-full">
+      <div className="h-full explain-block overflow-auto pl-10">
+        {start && end && (
           <div
-            key={line}
-            className="px-3 overflow-y-auto break-words absolute bg-white w-[260px] -right-10"
-            style={{
-              top: (explanation.start - 1) * 18 - 2,
-              height: (explanation.end - explanation.start + 1) * 18,
-              boxShadow: `-2px 0 0 0 #539bf5, inset 1px 0 0 0 #539bf5, -24px 0px 16px -11px rgba(0,0,0,0.05)`,
-            }}
+            className="z-20 absolute"
+            style={{ top: (start - 1) * 18 - 4, left: 0 }}
           >
-            <ExplanationComponent
-              language={language}
-              explanation={explanation}
+            <LineMenu
+              start={start}
+              end={end}
+              onCopy={handleCopy}
+              onCopyPermalink={handleCopyPermalink}
+              onExplain={handleExplain}
             />
           </div>
-        );
-      })}
+        )}
+        <SyntaxHighlighter
+          language={syntaxHighlighterLanguageMap[language] || "javascript"}
+          useInlineStyles={false}
+          wrapLines
+          className="!bg-transparent syntax-highlighter-block"
+          lineProps={(lineNumber) => {
+            const isHighlighted =
+              start && end && lineNumber >= start && lineNumber <= end;
+            return {
+              "data-highlighted": isHighlighted,
+              onClick: (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
+                let clicked = e.target as HTMLElement;
+                if (!clicked.classList.contains("comment")) return;
+                handleLineClick(lineNumber, e.shiftKey);
+              },
+              style: {
+                display: "block",
+              },
+            };
+          }}
+          showLineNumbers
+        >
+          {content}
+        </SyntaxHighlighter>
+        {Object.entries(explanations).map(([line, explanation]) => {
+          return (
+            <div
+              key={line}
+              className="px-3 overflow-y-auto break-words absolute bg-white w-[260px] right-0"
+              style={{
+                top: (explanation.start - 1) * 18 - 2,
+                height: (explanation.end - explanation.start + 1) * 18,
+                boxShadow: `-2px 0 0 0 #539bf5, inset 1px 0 0 0 #539bf5, -24px 0px 16px -11px rgba(0,0,0,0.05)`,
+              }}
+            >
+              <ExplanationComponent
+                language={language}
+                explanation={explanation}
+              />
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 }