Only show detailed investments table on non-mobile view

toriis-portal · Jul 11, 2024 · 62e6bb4 · 62e6bb4
1 parent c407f9b
commit 62e6bb4
Showing 1 changed file with 14 additions and 7 deletions.
diff --git a/src/pages/company/[id].tsx b/src/pages/company/[id].tsx
@@ -303,13 +303,20 @@ const Company: FC<CompanyDetailsProps> = ({
           )}
         </div>
 
-        <HighlightedTitle
-          title="Investment Details"
-          size="medium"
-          color="brightTeal"
-        />
-        <div className="flex w-full flex-row items-center justify-center">
-          <InvestmentTable companyId={companyId} />
+        {/* Only show Investment Table on non-mobile view. On mobile, show short message instead */}
+        <div className="block font-normal italic md:hidden">
+          Please use a device with a larger screen to view details on individual
+          investments.
+        </div>
+        <div className="hidden md:block">
+          <HighlightedTitle
+            title="Investment Details"
+            size="medium"
+            color="brightTeal"
+          />
+          <div className="flex w-full flex-row items-center justify-center">
+            <InvestmentTable companyId={companyId} />
+          </div>
         </div>
       </div>
     </>