From e61f36a8bd0a674c96d117065b4225343338ac8a Mon Sep 17 00:00:00 2001
From: Brian Cao <brian@umami.is>
Date: Sun, 24 Mar 2024 11:46:45 -0700
Subject: [PATCH] Team Websites responsive.

---
 .../teams/[teamId]/websites/TeamWebsitesTable.tsx   |  5 +++--
 .../settings/websites/WebsitesTable.module.css      | 13 -------------
 2 files changed, 3 insertions(+), 15 deletions(-)
 delete mode 100644 src/app/(main)/settings/websites/WebsitesTable.module.css

diff --git a/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesTable.tsx b/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesTable.tsx
index dc6760a6..c733e3e3 100644
--- a/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesTable.tsx
+++ b/src/app/(main)/settings/teams/[teamId]/websites/TeamWebsitesTable.tsx
@@ -1,4 +1,4 @@
-import { GridColumn, GridTable, Icon, Text } from 'react-basics';
+import { GridColumn, GridTable, Icon, Text, useBreakpoint } from 'react-basics';
 import { useLogin, useMessages } from 'components/hooks';
 import Icons from 'components/icons';
 import LinkButton from 'components/common/LinkButton';
@@ -14,9 +14,10 @@ export function TeamWebsitesTable({
 }) {
   const { user } = useLogin();
   const { formatMessage, labels } = useMessages();
+  const breakpoint = useBreakpoint();
 
   return (
-    <GridTable data={data}>
+    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
       <GridColumn name="name" label={formatMessage(labels.name)} />
       <GridColumn name="domain" label={formatMessage(labels.domain)} />
       <GridColumn name="createdBy" label={formatMessage(labels.createdBy)}>
diff --git a/src/app/(main)/settings/websites/WebsitesTable.module.css b/src/app/(main)/settings/websites/WebsitesTable.module.css
deleted file mode 100644
index a26c349f..00000000
--- a/src/app/(main)/settings/websites/WebsitesTable.module.css
+++ /dev/null
@@ -1,13 +0,0 @@
-@media screen and (max-width: 992px) {
-  .row {
-    flex-wrap: wrap;
-  }
-
-  .header .actions {
-    display: none;
-  }
-
-  .actions {
-    flex-basis: 100%;
-  }
-}