From 9bc75e2e4004e7871563daf9822c2d0f40825b66 Mon Sep 17 00:00:00 2001
From: Lowell Torola <44183219+lowtorola@users.noreply.github.com>
Date: Sun, 12 Jan 2025 02:21:53 +0400
Subject: [PATCH] fix client size and add scrim types (#901)

---
 frontend/src/components/ResponsiveIframe.tsx        | 13 ++++++++++---
 .../components/tables/scrimmaging/InboxTable.tsx    |  5 +++++
 .../components/tables/scrimmaging/OutboxTable.tsx   |  5 +++++
 frontend/src/views/Client.tsx                       |  6 +++---
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/ResponsiveIframe.tsx b/frontend/src/components/ResponsiveIframe.tsx
index 11e89480a..0f14d8dde 100644
--- a/frontend/src/components/ResponsiveIframe.tsx
+++ b/frontend/src/components/ResponsiveIframe.tsx
@@ -4,9 +4,13 @@ import { isPresent } from "utils/utilTypes";
 
 interface ResponsiveIframeProps {
   url: string;
+  className?: string;
 }
 
-const ResponsiveIframe: React.FC<ResponsiveIframeProps> = ({ url }) => {
+const ResponsiveIframe: React.FC<ResponsiveIframeProps> = ({
+  url,
+  className = "",
+}) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [dimensions, setDimensions] = useState({
     width: "100%",
@@ -27,10 +31,13 @@ const ResponsiveIframe: React.FC<ResponsiveIframeProps> = ({ url }) => {
     return () => {
       window.removeEventListener("resize", updateDimensions);
     };
-  }, []);
+  }, [
+    containerRef.current?.getBoundingClientRect().width,
+    containerRef.current?.getBoundingClientRect().height,
+  ]);
 
   return (
-    <div ref={containerRef} className="h-full w-full">
+    <div ref={containerRef} className={`h-full w-full ${className}`}>
       <iframe
         src={url}
         style={{
diff --git a/frontend/src/components/tables/scrimmaging/InboxTable.tsx b/frontend/src/components/tables/scrimmaging/InboxTable.tsx
index 5a9e53942..aa7063bb6 100644
--- a/frontend/src/components/tables/scrimmaging/InboxTable.tsx
+++ b/frontend/src/components/tables/scrimmaging/InboxTable.tsx
@@ -64,6 +64,11 @@ const InboxTable: React.FC<InboxTableProps> = ({ inboxPage, handlePage }) => {
               />
             ),
           },
+          {
+            header: "Type",
+            key: "type",
+            value: (req) => (req.is_ranked ? "Ranked" : "Unranked"),
+          },
           {
             header: "Player Order",
             key: "player_order",
diff --git a/frontend/src/components/tables/scrimmaging/OutboxTable.tsx b/frontend/src/components/tables/scrimmaging/OutboxTable.tsx
index 119424362..07d1ffb39 100644
--- a/frontend/src/components/tables/scrimmaging/OutboxTable.tsx
+++ b/frontend/src/components/tables/scrimmaging/OutboxTable.tsx
@@ -65,6 +65,11 @@ const OutboxTable: React.FC<OutboxTableProps> = ({
               />
             ),
           },
+          {
+            header: "Type",
+            key: "type",
+            value: (req) => (req.is_ranked ? "Ranked" : "Unranked"),
+          },
           {
             header: "Player Order",
             key: "player_order",
diff --git a/frontend/src/views/Client.tsx b/frontend/src/views/Client.tsx
index 44c43ac08..f612e7bdf 100644
--- a/frontend/src/views/Client.tsx
+++ b/frontend/src/views/Client.tsx
@@ -73,8 +73,8 @@ const Client: React.FC = () => {
   }, [matches]);
 
   return (
-    <div className="flex h-full w-full flex-col gap-2 p-6">
-      <div className="flex w-full flex-1 flex-col items-center gap-4 md:flex-row md:gap-2">
+    <div className="flex h-full min-h-screen w-full flex-col gap-2 p-6">
+      <div className="flex max-h-min w-full flex-1 flex-col items-center gap-4 md:flex-row md:gap-2">
         <SelectMenu
           loading={matches.isLoading || userTeam.isLoading}
           className="w-full md:max-w-96"
@@ -101,7 +101,7 @@ const Client: React.FC = () => {
         />
       </div>
 
-      <ResponsiveIframe url={clientUrl ?? ""} />
+      <ResponsiveIframe url={clientUrl ?? ""} className="flex flex-1" />
     </div>
   );
 };