fix: don't wrap codeblocks

packages/web/src/components/syntax-highlighter/syntax-highlighter-controls.tsx

@@ -20,33 +20,35 @@ export const SyntaxHighlighterControls = memo<SyntaxHighlighterControlsProps>(
     };
 
     return (
-      <div className="absolute right-0 top-0 flex items-center gap-2 z-10 bg-black bg-opacity-75 hover:bg-opacity-100 rounded-bl-lg pl-2 pb-2">
-        <Menu as="div" className="relative">
-          <Menu.Button className="text-xs flex items-center gap-1 text-gray-500 hover:text-white transition pt-2 ">
-            {language} <ChevronDown className="h-4 w-4" />
-          </Menu.Button>
-          <Menu.Items className="absolute top-full mt-3 bg-gray-900 text-sm max-h-44 overflow-y-scroll text-xs right-0 rounded">
-            {languages.map((language) => (
-              <Menu.Item
-                as="div"
-                key={language.name}
-                className="text-gray-400 hover:text-white transition cursor-pointer truncate px-3 py-1 hover:bg-gray-800"
-                onClick={() => {
-                  onLanguageChange(language.key as Language);
-                }}
-              >
-                {language.name}
-              </Menu.Item>
-            ))}
-          </Menu.Items>
-        </Menu>
-        <button
-          type="button"
-          className="text-xs text-gray-500 hover:text-white transition pr-3 pt-2"
-          onClick={copyContent}
-        >
-          Copy
-        </button>
+      <div className="absolute right-0 top-0">
+        <div className="fixed -translate-x-full flex items-center gap-2 z-10 bg-black bg-opacity-75 hover:bg-opacity-100 rounded-bl-lg pl-2 pb-2">
+          <Menu as="div" className="relative">
+            <Menu.Button className="text-xs flex items-center gap-1 text-gray-500 hover:text-white transition pt-2 ">
+              {language} <ChevronDown className="h-4 w-4" />
+            </Menu.Button>
+            <Menu.Items className="absolute top-full mt-3 bg-gray-900 text-sm max-h-44 overflow-y-scroll text-xs right-0 rounded">
+              {languages.map((language) => (
+                <Menu.Item
+                  as="div"
+                  key={language.name}
+                  className="text-gray-400 hover:text-white transition cursor-pointer truncate px-3 py-1 hover:bg-gray-800"
+                  onClick={() => {
+                    onLanguageChange(language.key as Language);
+                  }}
+                >
+                  {language.name}
+                </Menu.Item>
+              ))}
+            </Menu.Items>
+          </Menu>
+          <button
+            type="button"
+            className="text-xs text-gray-500 hover:text-white transition pr-3 pt-2"
+            onClick={copyContent}
+          >
+            Copy
+          </button>
+        </div>
       </div>
     );
   }

packages/web/src/components/syntax-highlighter/syntax-highlighter.tsx

@@ -27,11 +27,11 @@ export const SyntaxHighlighter = memo<SyntaxHighlighterProps>(
           );
 
           return (
-            <pre className={containerClasses} style={style} {...rest}>
+            <pre className={containerClasses} style={{ ...style, whiteSpace: 'nowrap', overflowX: 'auto' }} {...rest}>
               <SyntaxHighlighterControls language={language} onLanguageChange={setLanguage} content={children} />
               {tokens.map((line, index) => {
                 const props = getLineProps({ line, key: index });
-                const classes = classNames(props.className, 'table-row whitespace-pre-wrap');
+                const classes = classNames(props.className, 'table-row');
 
                 return (
                   // handled by getLineProps

packages/web/src/pages/paste/[pasteId].tsx

@@ -24,7 +24,8 @@ export default function ViewPaste() {
   const [missingKey, setMissingKey] = useState(false);
   const pasteId = router.query.pasteId as string | undefined;
   const paste = useGetPasteQuery({
-    skip: !confirmedBurn && (burnUnless === undefined || (burnUnless ? burnUnless !== user.data?.id : false)),
+    skip:
+      !pasteId || (!confirmedBurn && (burnUnless === undefined || (burnUnless ? burnUnless !== user.data?.id : false))),
     variables: {
       pasteId: pasteId!,
     },
@@ -122,7 +123,7 @@ export default function ViewPaste() {
       )}
       <Embed
         data={{
-          type: paste.data.paste.type,
+          type: 'text/plain',
           size: paste.data.paste.content.length,
           displayName: paste.data.paste.title ?? `${paste.data.paste.id}.${paste.data.paste.extension}`,
           content: { data: content, error: error },

packages/web/src/styles/globals.css

@@ -29,9 +29,3 @@
   background-color: rgba(0, 0, 0, 0);
   border-color: transparent;
 }
-
-code[class*='language-'],
-pre[class*='language-'] {
-  white-space: normal !important;
-  word-break: break-word !important;
-}