Fixed share page. Updated data tables to be responsive.

src/components/common/DataTable.module.css

@@ -30,6 +30,9 @@
   min-height: 70px;
   align-items: center;
   min-width: min-content;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .body > div > div > div {

src/components/hooks/useShareToken.js

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import useStore, { setShareToken } from 'store/app';
 import useApi from './useApi';
 
@@ -6,23 +5,16 @@ const selector = state => state.shareToken;
 
 export function useShareToken(shareId) {
   const shareToken = useStore(selector);
-  const { get } = useApi();
+  const { get, useQuery } = useApi();
+  const { isLoading, error } = useQuery(['share', shareId], async () => {
+    const data = await get(`/share/${shareId}`);
 
-  async function loadToken(id) {
-    const data = await get(`/share/${id}`);
+    setShareToken(data);
 
-    if (data) {
-      setShareToken(data);
-    }
-  }
+    return data;
+  });
 
-  useEffect(() => {
-    if (shareId) {
-      loadToken(shareId);
-    }
-  }, [shareId]);
-
-  return shareToken;
+  return { shareToken, isLoading, error };
 }
 
 export default useShareToken;

src/components/input/LanguageButton.module.css

@@ -1,7 +1,6 @@
 .menu {
-  display: flex;
-  flex-flow: row wrap;
-  min-width: 640px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
   padding: 10px;
   background: var(--base50);
   z-index: var(--z-index-popup);
@@ -14,7 +13,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  min-width: calc(100% / 3);
+  min-width: 200px;
   border-radius: 5px;
   padding: 5px 10px;
 }
@@ -32,3 +31,15 @@
 .icon {
   color: var(--primary400);
 }
+
+@media screen and (max-width: 992px) {
+  .menu {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .menu {
+    transform: translateX(40px);
+  }
+}

src/components/layout/Page.module.css

@@ -3,6 +3,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  width: 100%;
   max-width: 1320px;
   min-height: calc(100vh - 60px);
   margin: 0 auto;