stole some styling from interactive objkts to make the pdf wider

src/components/media-types/pdf/index.css

@@ -0,0 +1,17 @@
+.tag-view .vector {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    transform: translateX(-50%) translateY(-50%);
+    border: none;
+    min-height: 0;
+    min-width: 0;
+  }
+
+  .objktview .vector-container {
+    pointer-events: all;
+    width: 50%;
+  }
+

src/components/media-types/pdf/index.module.scss

@@ -0,0 +1,42 @@
+@import '@styles/layout.scss';
+@import '@styles/mixins.scss';
+
+.vector {
+  @include embedObjktViewSizes;
+}
+
+.display {
+  width: 100%;
+  display: block;
+  margin: 0 auto;
+  border: none;
+  pointer-events: none;
+}
+
+.container {
+  position: relative;
+  display: block;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  overflow: hidden;
+
+  &:after {
+    content: '';
+    display: block;
+    padding-bottom: 100%;
+  }
+
+  &.interactive {
+    pointer-events: all;
+  }
+
+  iframe {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+}

src/components/media-types/pdf/index.tsx

@@ -1,6 +1,8 @@
 import { memo, } from 'react'
 import { MediaTypeProps } from '@types'
 import { ImageComponent } from '../image'
+import classnames from 'classnames'
+import styles from '@style'
 
 export const PdfComponent = memo(function ({
   artifactUri,
@@ -9,6 +11,14 @@ export const PdfComponent = memo(function ({
   displayView,
   nft,
 }: MediaTypeProps) {
+
+  const classes = classnames({
+    [styles.container]: true,
+    [styles.interactive]: displayView,
+    [styles.display]: displayView,
+  })
+
+
   const cover = (
     <>
       <ImageComponent
@@ -23,12 +33,10 @@ export const PdfComponent = memo(function ({
   )
   if (!displayView) return cover
   return (
-    <div>
+    <div className={classes}>
       <iframe
         title={`PDF ${nft.token_id}`}
         src={import.meta.env.VITE_IFRAME_URL + `/pdf/?pdfSrc=${artifactUri}`}
-        height={'500vh'}
-        width={'500vw'}
       />
     </div>
   )