Improve responsive behavior

metaplex-foundation · Dec 22, 2024 · 292221b · 292221b
1 parent 22d18c7
commit 292221b
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 18 deletions.
diff --git a/components/Autograph/AutographAsset.tsx b/components/Autograph/AutographAsset.tsx
@@ -10,7 +10,7 @@ export function AutographAsset({ asset, collection }: AssetWithCollection) {
   const umi = useUmi();
   const isOwner = asset.owner === umi.identity.publicKey;
   return (
-    <SimpleGrid cols={2} mt="xl" spacing="lg" pb="xl">
+    <SimpleGrid cols={{ base: 1, md: 2 }} mt="xl" spacing="lg" pb="xl">
       <Paper p="xl" radius="md">
         <AutographAssetDetails asset={asset} collection={collection} />
       </Paper>

diff --git a/components/Explorer/ExplorerAsset.tsx b/components/Explorer/ExplorerAsset.tsx
@@ -5,7 +5,7 @@ import { AssetWithCollection } from '@/lib/type';
 
 export function ExplorerAsset({ asset, collection }: AssetWithCollection) {
   return (
-    <SimpleGrid cols={2} mt="xl" spacing="lg" pb="xl">
+    <SimpleGrid cols={{ base: 1, md: 2 }} mt="xl" spacing="lg" pb="xl">
       <Paper p="xl" radius="md">
         <ExplorerAssetDetails asset={asset} collection={collection} />
       </Paper>

diff --git a/components/Explorer/ExplorerCollection.tsx b/components/Explorer/ExplorerCollection.tsx
@@ -10,7 +10,7 @@ export function ExplorerCollection({ collection }: { collection: CollectionV1 })
   const { data: assets, error, isPending } = useFetchAssetsByCollection(collection.publicKey);
   return (
     <>
-      <SimpleGrid cols={2} mt="xl" spacing="lg" pb="xl">
+      <SimpleGrid cols={{ base: 1, md: 2 }} mt="xl" spacing="lg" pb="xl">
         <Paper p="xl" radius="md">
           <ExplorerCollectionDetails collection={collection} />
         </Paper>

diff --git a/components/Header/Header.module.css b/components/Header/Header.module.css
@@ -1,16 +1,17 @@
-.header {
-  height: rem(56px);
-  margin-bottom: rem(120px);
-  background-color: var(--mantine-color-body);
-  /* border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4)); */
-}
-
 .inner {
   height: rem(56px);
   display: flex;
   justify-content: space-between;
   align-items: center;
   align-content: center;
+
+  @media (max-width: $mantine-breakpoint-md) {
+    height: rem(112px);
+    padding-top: rem(12px);
+    gap: rem(24px);
+    justify-content: center;
+    flex-direction: column;
+  }
 }
 
 .link {

diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -17,18 +17,14 @@ const HeaderLink = ({ label, link, disabled }: { label: string, link: string, di
 
 export function Header({ env, setEnv }: { env: string; setEnv: (env: Env) => void }) {
   return (
-    <Container
-      size="xl"
-      h={80}
-      pt={12}
-    >
+    <Container size="xl" pt={12}>
       <div className={classes.inner}>
         <Flex justify="center" align="center" gap="md" ml="md">
           <RetainQueryLink href="/">
-            <Image src="/m-core-color.png" alt="Core" w="50%" />
+            <Image src="/m-core-color.png" alt="Core" h={28} />
           </RetainQueryLink>
         </Flex>
-        <Group>
+        <Group wrap="nowrap">
           <HeaderLink label="Create" link="/create" />
           <HeaderLink label="Explorer" link="/explorer" />
           <WalletMultiButton />

diff --git a/providers/Providers.tsx b/providers/Providers.tsx
@@ -71,7 +71,7 @@ export function Providers({ children }: { children: ReactNode }) {
                 <ReactQueryStreamedHydration>
                   <Notifications />
                   <AppShell
-                    header={{ height: 80 }}
+                    header={{ height: { base: 140, md: 80 } }}
                     style={{
                       backgroundColor: '#141414',
                     }}