weird styling issues found on other computer

src/App.tsx

@@ -135,7 +135,7 @@ function App() {
   return (
     <>
       <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
-      {isMobile() === false && <div className=" flex justify-center items-center">
+      {isMobile() === false && <div className="w-full flex justify-center items-center">
         <Tabs className="w-full bg-zinc-950 p-4">
           <TabList className="flex space-x-2 pb-1">
             <Tab selectedClassName="rounded-lg p-1 underline decoration-wavy" className=" focus:outline-none p-1 cursor-pointer">Syllabuses</Tab>

src/Syllabus.tsx

@@ -17,8 +17,8 @@ function Syllabus() {
     }, [id])
 
     return (
-        <div className="p-16 h-full text-left justify-center flex">
+        <div className="p-16 h-full text-left w-full justify-center flex">
-            <div className="text-left place-items-center justify-center flex w-3/4">
+            <div className="text-left place-items-center justify-center flex w-full">
                 <div className="w-1/4 h-full flex flex-col">
                     <div className="flex flex-col">
                         <text className="text-3xl text-yellow-300 font-black">{syllabus?.className}</text>
@@ -30,7 +30,7 @@ function Syllabus() {
                     <text className="font-bold text-lime-500">{syllabus?.textbookCost} textbook cost</text>
 
                 </div>
-                {syllabus ? <View passedFile={syllabus?.fileName}></View> : <div></div>}
+                {syllabus ? <View className="flex-1" passedFile={syllabus?.fileName}></View> : <div></div>}
             </div>
         </div>
     )

src/View.tsx

@@ -1,6 +1,7 @@
 import {  useParams } from "react-router-dom";
 import DocViewer, { DocViewerRenderers } from "react-doc-viewer";
 import {PDFViewer} from 'srpv-js'
+import { isMobile } from 'is-mobile';
 
 
 
@@ -50,10 +51,20 @@ function View({passedFile, className}: ViewParams) {
                 </div>
 
             </nav>
+            {isMobile() === false && 
+            <>
+            {isPDF 
+            ? <iframe className="flex-1 w-full rounded-xl" src={`https://api.sharesyllabus.me/files/${file}`} />
+            : <DocViewer className="flex-1 w-full rounded-xl" pluginRenderers={DocViewerRenderers} documents={docs}></DocViewer>}
+            </>
             
+            }
+            {isMobile() === true && 
+            <>
             {isPDF 
                 ? <div className="flex-1 w-full rounded-xl"><PDFViewer link={`https://api.sharesyllabus.me/files/${file}`}></PDFViewer></div>
-                : <DocViewer className="flex-1 w-full rounded-xl" pluginRenderers={DocViewerRenderers} documents={docs}></DocViewer>
+                : <DocViewer className="flex-1 w-full rounded-xl" pluginRenderers={DocViewerRenderers} documents={docs}></DocViewer>}
+            </>
                 }
 
         </div>

src/syllabus_comp.tsx

@@ -98,7 +98,7 @@ function SyllabusListing({ className, professor, professorId, fileName, descript
                         <span className="font-extrabold">{className}</span>
                         <span className="text-xs text-gray-300">{fullClassName}</span>
                         {textbookCostElement()}
-                        <span className="flex-1 italic cursor-pointer hover:text-yellow-300 w-min">{professor}</span>
+                        <span className="flex-1 italic cursor-pointer hover:text-yellow-300 ">{professor}</span>
                         {classLength > 7 ? <span className="text-xs font-light text-green-600">{classLength} weeks course</span> : <span className="text-xs font-light text-red-600">{classLength} weeks course</span>}
                     </div>
                     <div className="flex-1 flex flex-col text-center">