Merge remote-tracking branch 'origin/dev' into dev

src/app/(main)/settings/layout.module.css

@@ -16,7 +16,11 @@
   min-height: 50vh;
 }
 
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: 992px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+
   .menu {
     display: none;
   }

src/app/(main)/settings/websites/WebsitesDataTable.tsx

@@ -6,6 +6,7 @@ import useApi from 'components/hooks/useApi';
 import DataTable from 'components/common/DataTable';
 import useFilterQuery from 'components/hooks/useFilterQuery';
 import useCache from 'store/cache';
+import { useBreakpoint } from 'react-basics';
 
 export interface WebsitesDataTableProps {
   allowEdit?: boolean;
@@ -45,6 +46,7 @@ export function WebsitesDataTable({
   children,
 }: WebsitesDataTableProps) {
   const queryResult = useWebsites({ includeTeams, onlyTeams });
+  const breakpoint = useBreakpoint();
 
   return (
     <DataTable queryResult={queryResult}>
@@ -55,6 +57,7 @@ export function WebsitesDataTable({
           showActions={showActions}
           allowEdit={allowEdit}
           allowView={allowView}
+          cardMode={['xs', 'sm', 'md'].includes(breakpoint)}
         >
           {children}
         </WebsitesTable>

src/app/(main)/settings/websites/WebsitesTable.js

@@ -9,13 +9,14 @@ export function WebsitesTable({
   showActions,
   allowEdit,
   allowView,
+  cardMode,
   children,
 }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useUser();
 
   return (
-    <GridTable data={data}>
+    <GridTable data={data} cardMode={cardMode}>
       <GridColumn name="name" label={formatMessage(labels.name)} />
       <GridColumn name="domain" label={formatMessage(labels.domain)} />
       {showTeam && (
@@ -28,39 +29,41 @@ export function WebsitesTable({
           {row => row.user.username}
         </GridColumn>
       )}
-      <GridColumn name="action" label=" " alignment="end">
-        {row => {
-          const {
-            id,
-            user: { id: ownerId },
-          } = row;
+      {showActions && (
+        <GridColumn name="action" label=" " alignment="end">
+          {row => {
+            const {
+              id,
+              user: { id: ownerId },
+            } = row;
 
-          return (
-            <>
-              {showActions && allowEdit && (!showTeam || ownerId === user.id) && (
-                <Link href={`/settings/websites/${id}`}>
-                  <Button>
-                    <Icon>
-                      <Icons.Edit />
-                    </Icon>
-                    <Text>{formatMessage(labels.edit)}</Text>
-                  </Button>
-                </Link>
-              )}
-              {showActions && allowView && (
-                <Link href={`/websites/${id}`}>
-                  <Button>
-                    <Icon>
-                      <Icons.External />
-                    </Icon>
-                    <Text>{formatMessage(labels.view)}</Text>
-                  </Button>
-                </Link>
-              )}
-            </>
-          );
-        }}
-      </GridColumn>
+            return (
+              <>
+                {allowEdit && (!showTeam || ownerId === user.id) && (
+                  <Link href={`/settings/websites/${id}`}>
+                    <Button>
+                      <Icon>
+                        <Icons.Edit />
+                      </Icon>
+                      <Text>{formatMessage(labels.edit)}</Text>
+                    </Button>
+                  </Link>
+                )}
+                {allowView && (
+                  <Link href={`/websites/${id}`}>
+                    <Button>
+                      <Icon>
+                        <Icons.External />
+                      </Icon>
+                      <Text>{formatMessage(labels.view)}</Text>
+                    </Button>
+                  </Link>
+                )}
+              </>
+            );
+          }}
+        </GridColumn>
+      )}
       {children}
     </GridTable>
   );

src/components/common/DataTable.module.css

@@ -19,7 +19,9 @@
 
 .body {
   display: flex;
+  flex-direction: column;
   position: relative;
+  overflow-x: auto;
 }
 
 .body td {
@@ -27,6 +29,12 @@
   gap: 10px;
   min-height: 70px;
   align-items: center;
+  min-width: min-content;
+}
+
+.body > div > div > div {
+  display: flex;
+  gap: 10px;
 }
 
 .pager {

src/components/input/ThemeButton.js

@@ -1,4 +1,4 @@
-import { useTransition, animated } from 'react-spring';
+import { useTransition, animated } from '@react-spring/web';
 import { Button, Icon } from 'react-basics';
 import useTheme from 'components/hooks/useTheme';
 import Icons from 'components/icons';

src/components/metrics/ListTable.js

@@ -1,6 +1,6 @@
 import useMeasure from 'react-use-measure';
 import { FixedSizeList } from 'react-window';
-import { useSpring, animated, config } from 'react-spring';
+import { useSpring, animated, config } from '@react-spring/web';
 import classNames from 'classnames';
 import Empty from 'components/common/Empty';
 import { formatLongNumber } from 'lib/format';

src/components/metrics/MetricCard.js

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { useSpring, animated } from 'react-spring';
+import { useSpring, animated } from '@react-spring/web';
 import { formatNumber } from 'lib/format';
 import styles from './MetricCard.module.css';
 

src/tracker/index.js

@@ -43,10 +43,11 @@
   };
 
   const getPath = url => {
-    if (url.substring(0, 4) === 'http') {
-      return '/' + url.split('/').splice(3).join('/');
+    try {
+      return new URL(url).pathname;
+    } catch (e) {
+      return url;
     }
-    return url;
   };
 
   const getPayload = () => ({