feat: add mobile styles to contract pages

Author: marslavish

templates/chain-template/components/contract/MyContractsTab.tsx

@@ -37,8 +37,8 @@ export const MyContractsTab = ({ show, switchTab }: MyContractsTabProps) => {
         ) : myContracts.length === 0 ? (
           <EmptyState text="No contracts found" />
         ) : (
-          <Box width="$full" alignSelf="start">
-            <Table>
+          <Box width="$full" alignSelf="start" overflowX="auto">
+            <Table minWidth="650px">
               <Table.Header>
                 <Table.Row height="$fit">
                   <Table.HeaderCell width="15%">

templates/chain-template/components/contract/SelectAssetItem.tsx

@@ -10,6 +10,8 @@ import {
   PopoverTrigger,
   SelectButton,
   Text,
+  useColorModeValue,
+  useTheme,
 } from '@interchain-ui/react';
 
 import { Button } from '@/components';
@@ -69,6 +71,7 @@ export const SelectAssetItem = ({
     });
   };
 
+  const { theme } = useTheme();
   const { isMobile } = useDetectBreakpoints();
 
   return (
@@ -104,9 +107,11 @@ export const SelectAssetItem = ({
               flexDirection="column"
               width="140px"
               py="10px"
-              bg="$white"
+              bg="$background"
               borderRadius="4px"
-              boxShadow="0px 4px 20px 0px rgba(0, 0, 0, 0.1)"
+              boxShadow={`0px 4px 20px 0px rgba(${
+                theme === 'light' ? '0,0,0' : '128,128,128'
+              }, 0.1)`}
               maxHeight="220px"
               overflowY="auto"
             >
@@ -158,6 +163,7 @@ const AssetOption = ({
   disabled: boolean;
   onClick: () => void;
 }) => {
+  const hoverBg = useColorModeValue('$blackAlpha100', '$whiteAlpha100');
   return (
     <Box
       display="flex"
@@ -168,8 +174,8 @@ const AssetOption = ({
       cursor={disabled ? 'default' : 'pointer'}
       opacity={disabled ? 0.3 : 1}
       bg={{
-        hover: disabled ? '$white' : '$blackAlpha100',
-        base: '$white',
+        hover: disabled ? '$background' : hoverBg,
+        base: '$background',
       }}
       attributes={{ onClick: disabled ? undefined : onClick }}
     >

templates/chain-template/components/contract/SelectCodeModal.tsx

@@ -13,6 +13,7 @@ import {
 } from '@/utils';
 import { PermissionValue, StoredCodesFilter } from './StoredCodesFilter';
 import { EmptyState } from './EmptyState';
+import styles from '@/styles/comp.module.css';
 
 type SelectCodeModalProps = {
   isOpen: boolean;
@@ -52,14 +53,16 @@ export const SelectCodeModal = ({
         setPermissionValue('all');
       }}
       renderCloseButton={() => null}
+      modalContentClassName={styles.modal}
     >
       <CustomThemeProvider>
         <Box
           display="flex"
           flexDirection="column"
           gap="20px"
-          width="760px"
-          px="10px"
+          width="90vw"
+          maxWidth="760px"
+          p="30px"
           pt="20px"
         >
           <Box display="flex" alignItems="center" mb="10px">
@@ -103,8 +106,8 @@ export const SelectCodeModal = ({
             ) : filteredCodes.length === 0 ? (
               <EmptyState text="No matched codes found" />
             ) : (
-              <Box width="$full" alignSelf="start">
-                <Table>
+              <Box width="$full" alignSelf="start" overflowX="auto">
+                <Table minWidth="550px">
                   <Table.Header>
                     <Table.Row height="$fit">
                       <Table.HeaderCell width="10%">Code</Table.HeaderCell>

templates/chain-template/components/contract/StoredCodesFilter.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
   Box,
   Popover,
@@ -35,6 +35,8 @@ export const permissionOptions: PermissionOption[] = [
   },
 ];
 
+const FLEX_GAP = 20;
+
 type StoredCodesFilterProps = {
   searchValue: string;
   setSearchValue: (value: string) => void;
@@ -50,16 +52,39 @@ export const StoredCodesFilter = ({
 }: StoredCodesFilterProps) => {
   const [elemRef, setElemRef] = useState<HTMLDivElement>();
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [elemWidth, setElemWidth] = useState(0);
 
   const { theme } = useTheme();
   const { isMobile } = useDetectBreakpoints();
 
+  useEffect(() => {
+    const handleResize = () => {
+      if (elemRef) {
+        const width = isMobile
+          ? elemRef.offsetWidth
+          : (elemRef.offsetWidth - FLEX_GAP) / 2;
+        setElemWidth(width);
+      }
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, [elemRef, isMobile]);
+
   const permissionOption = permissionOptions.find(
     (p) => p.value === permissionValue
   )!;
 
   return (
-    <Box display="flex" justifyContent="space-between" gap="20px">
+    <Box
+      ref={setElemRef}
+      display="flex"
+      flexDirection={isMobile ? 'column' : 'row'}
+      justifyContent="space-between"
+      gap={`${FLEX_GAP}px`}
+    >
       <Box flex={1}>
         <Text fontSize="16px" fontWeight="600" attributes={{ mb: '10px' }}>
           Search
@@ -72,7 +97,7 @@ export const StoredCodesFilter = ({
           autoComplete="off"
         />
       </Box>
-      <Box flex={1} ref={setElemRef}>
+      <Box flex={1}>
         <Text fontSize="16px" fontWeight="600" attributes={{ mb: '10px' }}>
           Filter by Instantiate Permission
         </Text>
@@ -89,14 +114,14 @@ export const StoredCodesFilter = ({
             <SelectButton
               onClick={() => {}}
               placeholder={permissionOption.label}
-              _css={{ width: `${elemRef?.offsetWidth}px` }}
+              attributes={{ width: `${elemWidth}px` }}
             />
           </PopoverTrigger>
           <PopoverContent showArrow={false}>
             <Box
               display="flex"
               flexDirection="column"
-              width={`${elemRef?.offsetWidth}px`}
+              width={`${elemWidth}px`}
               py="10px"
               bg="$background"
               borderRadius="4px"

templates/chain-template/pages/contract.tsx

@@ -10,6 +10,7 @@ import {
   UploadTab,
 } from '@/components';
 import { splitCamelCase } from '@/utils';
+import styles from '@/styles/comp.module.css';
 
 export enum TabLabel {
   MyContracts,
@@ -47,7 +48,7 @@ export default function Contract() {
           }))}
         activeTab={activeTab}
         onActiveTabChange={(tabId) => setActiveTab(tabId)}
-        attributes={{ width: '860px' }}
+        className={styles.tabs}
       />
       <Box mt="40px">
         <MyContractsTab

templates/chain-template/styles/comp.module.css

@@ -0,0 +1,11 @@
+.tabs {
+  width: 100%;
+}
+
+.tabs ul {
+  max-width: 860px;
+}
+
+.modal div[data-modal-part='children'] {
+  padding: 0;
+}