fix client size and add scrim types

battlecode · Jan 11, 2025 · b3b79bd · b3b79bd
1 parent bf84589
commit b3b79bd
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
   );
 };