design fixes 1

icons/MUD_menu.svg

+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30">
+  <path fill="#4A5568" fill-rule="evenodd" d="M7.904 22.831c.335.102.681.153 1.029.152a3.59 3.59 0 0 0 1.907-.583 4.14 4.14 0 0 0 1.17-1.155 4.666 4.666 0 0 0 .68-1.57l.165-.688h4.287l.128.704c.132.569.363 1.102.68 1.57.319.468.716.86 1.171 1.155a3.61 3.61 0 0 0 1.444.548 3.483 3.483 0 0 0 1.521-.117c1.011-.32 1.87-1.07 2.39-2.092.52-1.021.66-2.23.39-3.366L23.2 10.31a4.69 4.69 0 0 0-.682-1.569 4.16 4.16 0 0 0-1.169-1.156 3.61 3.61 0 0 0-1.444-.548 3.483 3.483 0 0 0-1.52.117 3.793 3.793 0 0 0-1.442.832 4.34 4.34 0 0 0-1.017 1.413H14.07a4.357 4.357 0 0 0-1.018-1.411 3.814 3.814 0 0 0-1.44-.834 3.483 3.483 0 0 0-1.521-.117 3.6 3.6 0 0 0-1.444.548 4.14 4.14 0 0 0-1.173 1.162 4.668 4.668 0 0 0-.678 1.58L5.132 17.39a4.944 4.944 0 0 0 .393 3.354c.518 1.017 1.372 1.767 2.379 2.088ZM9.36 8.967c.375-.24.798-.366 1.23-.368.216 0 .433.033.642.096.39.123.747.349 1.042.657.296.309.522.691.659 1.117l.171.527h3.787l.171-.527a2.88 2.88 0 0 1 .655-1.116c.294-.309.65-.534 1.039-.658a2.22 2.22 0 0 1 .963-.073 2.3 2.3 0 0 1 .916.345c.29.19.544.442.746.742.203.3.35.643.432 1.008l1.665 7.064a3.162 3.162 0 0 1-.237 2.16c-.33.657-.88 1.141-1.527 1.348-.314.095-.642.12-.964.073a2.298 2.298 0 0 1-.916-.345 2.675 2.675 0 0 1-.749-.742 3.016 3.016 0 0 1-.437-1.008l-.435-1.878h-6.43l-.444 1.878a2.982 2.982 0 0 1-.435 1.01 2.64 2.64 0 0 1-.75.74 2.28 2.28 0 0 1-.912.346 2.199 2.199 0 0 1-.96-.074c-.648-.209-1.196-.693-1.527-1.35a3.179 3.179 0 0 1-.245-2.158l1.664-7.064c.173-.736.6-1.365 1.186-1.75ZM20 12.287a.714.714 0 1 1-1.43.001.714.714 0 0 1 1.43 0ZM9.918 14.906a1.43 1.43 0 1 0 1.588-2.377 1.43 1.43 0 0 0-1.588 2.377Zm9.367.955a.714.714 0 1 0 0-1.429.714.714 0 0 0 0 1.43Zm-.714-2.143a.714.714 0 1 1-1.429 0 .714.714 0 0 1 1.429 0Zm2.143.714a.714.714 0 1 0 0-1.429.714.714 0 0 0 0 1.43Z" clip-rule="evenodd"/>
+  <path fill="#000" fill-opacity=".2" fill-rule="evenodd" d="M7.904 22.831c.335.102.681.153 1.029.152a3.59 3.59 0 0 0 1.907-.583 4.14 4.14 0 0 0 1.17-1.155 4.666 4.666 0 0 0 .68-1.57l.165-.688h4.287l.128.704c.132.569.363 1.102.68 1.57.319.468.716.86 1.171 1.155a3.61 3.61 0 0 0 1.444.548 3.483 3.483 0 0 0 1.521-.117c1.011-.32 1.87-1.07 2.39-2.092.52-1.021.66-2.23.39-3.366L23.2 10.31a4.69 4.69 0 0 0-.682-1.569 4.16 4.16 0 0 0-1.169-1.156 3.61 3.61 0 0 0-1.444-.548 3.483 3.483 0 0 0-1.52.117 3.793 3.793 0 0 0-1.442.832 4.34 4.34 0 0 0-1.017 1.413H14.07a4.357 4.357 0 0 0-1.018-1.411 3.814 3.814 0 0 0-1.44-.834 3.483 3.483 0 0 0-1.521-.117 3.6 3.6 0 0 0-1.444.548 4.14 4.14 0 0 0-1.173 1.162 4.668 4.668 0 0 0-.678 1.58L5.132 17.39a4.944 4.944 0 0 0 .393 3.354c.518 1.017 1.372 1.767 2.379 2.088ZM9.36 8.967c.375-.24.798-.366 1.23-.368.216 0 .433.033.642.096.39.123.747.349 1.042.657.296.309.522.691.659 1.117l.171.527h3.787l.171-.527a2.88 2.88 0 0 1 .655-1.116c.294-.309.65-.534 1.039-.658a2.22 2.22 0 0 1 .963-.073 2.3 2.3 0 0 1 .916.345c.29.19.544.442.746.742.203.3.35.643.432 1.008l1.665 7.064a3.162 3.162 0 0 1-.237 2.16c-.33.657-.88 1.141-1.527 1.348-.314.095-.642.12-.964.073a2.298 2.298 0 0 1-.916-.345 2.675 2.675 0 0 1-.749-.742 3.016 3.016 0 0 1-.437-1.008l-.435-1.878h-6.43l-.444 1.878a2.982 2.982 0 0 1-.435 1.01 2.64 2.64 0 0 1-.75.74 2.28 2.28 0 0 1-.912.346 2.199 2.199 0 0 1-.96-.074c-.648-.209-1.196-.693-1.527-1.35a3.179 3.179 0 0 1-.245-2.158l1.664-7.064c.173-.736.6-1.365 1.186-1.75ZM20 12.287a.714.714 0 1 1-1.43.001.714.714 0 0 1 1.43 0ZM9.918 14.906a1.43 1.43 0 1 0 1.588-2.377 1.43 1.43 0 0 0-1.588 2.377Zm9.367.955a.714.714 0 1 0 0-1.429.714.714 0 0 0 0 1.43Zm-.714-2.143a.714.714 0 1 1-1.429 0 .714.714 0 0 1 1.429 0Zm2.143.714a.714.714 0 1 0 0-1.429.714.714 0 0 0 0 1.43Z" clip-rule="evenodd"/>
+</svg>

lib/date/dayjs.ts

@@ -38,6 +38,7 @@ dayjs.extend(minMax);
 dayjs.updateLocale('en', {
   formats: {
     llll: `MMM DD YYYY HH:mm:ss A (Z${ nbsp }UTC)`,
+    lll: 'MMM D, YYYY h:mm A',
   },
   relativeTime: {
     s: '1s',

lib/hooks/useNavItems.tsx

@@ -105,7 +105,7 @@ export default function useNavItems(): ReturnType {
     const mudWorlds = config.features.mudFramework.isEnabled ? {
       text: 'MUD worlds',
       nextRoute: { pathname: '/mud-worlds' as const },
-      icon: 'MUD',
+      icon: 'MUD_menu',
       isActive: pathname === '/mud-worlds',
     } : null;
 

public/icons/name.d.ts

@@ -91,6 +91,7 @@
 	| "monaco/vyper"
 	| "moon-with-star"
 	| "moon"
+	| "MUD_menu"
 	| "MUD"
 	| "networks"
 	| "networks/icon-placeholder"

ui/address/mud/AddressMudBreadcrumbs.tsx

-import { HStack, useColorModeValue, chakra } from '@chakra-ui/react';
+import { Grid, Box, useColorModeValue, chakra, HStack } from '@chakra-ui/react';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
@@ -39,25 +39,39 @@ const BreadcrumbItem = ({ text, href, isLast, scrollRef }: BreadcrumbItemProps)
 
   if (isLast) {
     return (
-      <>
+      <HStack gap={ 2 } overflow="hidden">
+        <Box
+          overflow="hidden"
+          whiteSpace="nowrap"
+          textOverflow="ellipsis"
+        >
           { text }
+        </Box>
         <CopyToClipboard text={ href } type="link" mx={ 0 } color="text_secondary"/>
-      </>
+      </HStack>
     );
   }
 
   return (
-    <>
-      <LinkInternal href={ href } onClick={ onLinkClick }>{ text }</LinkInternal>
+    <HStack gap={ 2 } overflow="hidden">
+      <LinkInternal
+        href={ href }
+        onClick={ onLinkClick }
+        overflow="hidden"
+        textOverflow="ellipsis"
+        whiteSpace="nowrap"
+      >
+        { text }
+      </LinkInternal>
       { !isLast && <IconSvg name="arrows/east" boxSize={ 6 } color={ iconColor }/> }
-    </>
+    </HStack>
   );
 };
 
 const AddressMudBreadcrumbs = (props: TableViewProps | RecordViewProps) => {
   const queryParams = { tab: 'mud', hash: props.hash };
   return (
-    <HStack gap={ 2 } className={ props.className }>
+    <Grid templateColumns="20px auto auto auto" gap={ 2 } alignItems="center" className={ props.className }>
       <IconSvg name="MUD" boxSize={ 5 } color="green.500"/>
       <BreadcrumbItem
         text="MUD World"
@@ -72,14 +86,14 @@ const AddressMudBreadcrumbs = (props: TableViewProps | RecordViewProps) => {
       />
       { ('recordId' in props) && (
         <BreadcrumbItem
-          text={ props.tableName }
+          text={ props.recordName }
           href={ route({ pathname: '/address/[hash]', query: { ...queryParams, table_id: props.tableId, record_id: props.recordId } }) }
           isLast
           scrollRef={ props.scrollRef }
 
         />
       ) }
-    </HStack>
+    </Grid>
   );
 };
 

ui/address/mud/AddressMudRecord.tsx

@@ -45,7 +45,7 @@ const AddressMudRecord = ({ tableId, recordId, isQueryEnabled = true, scrollRef
         <AddressMudBreadcrumbs
           hash={ hash }
           tableId={ tableId }
-          tableName={ data?.table.table_name }
+          tableName={ data?.table.table_full_name }
           recordId={ recordId }
           recordName={ data.record.id }
           mb={ 6 }
@@ -53,16 +53,16 @@ const AddressMudRecord = ({ tableId, recordId, isQueryEnabled = true, scrollRef
         />
       ) }
 
-      <Table borderRadius="8px">
+      <Table borderRadius="8px" style={{ tableLayout: 'auto' }} width="100%">
         { data?.schema.key_names.length && data?.schema.key_names.map((keyName, index) => (
-          <Tr key={ keyName }>
-            <Td fontWeight={ 600 }>
+          <Tr key={ keyName } borderBottomStyle={ index === data.schema.key_names.length - 1 ? 'hidden' : 'solid' }>
+            <Td fontWeight={ 600 } whiteSpace="nowrap">
               { keyName } ({ data.schema.key_types[index] })
             </Td>
             <Td colSpan={ 2 }>
               <Flex justifyContent="space-between">
                 <TruncatedValue value={ data.record.decoded[keyName] } mr={ 2 }/>
-                { index === 0 && <Box color="text_secondary">{ dayjs(data.record.timestamp).format('llll') }</Box> }
+                { index === 0 && <Box color="text_secondary">{ dayjs(data.record.timestamp).format('lll') }</Box> }
               </Flex>
             </Td>
           </Tr>
@@ -72,13 +72,17 @@ const AddressMudRecord = ({ tableId, recordId, isQueryEnabled = true, scrollRef
             <Tr backgroundColor={ valuesBgColor } borderBottomStyle="hidden">
               <Td fontWeight={ 600 }>Field</Td>
               <Td fontWeight={ 600 }>Type</Td>
-              <Td fontWeight={ 600 }>Value</Td>
+              <Td fontWeight={ 600 } w="100%" wordBreak="break-all">Value</Td>
             </Tr>
             { data?.schema.value_names.map((valName, index) => (
               <Tr key={ valName } backgroundColor={ valuesBgColor } borderBottomStyle="hidden">
-                <Td>{ valName }</Td>
+                <Td whiteSpace="nowrap">{ valName }</Td>
                 <Td>{ data.schema.value_types[index] }</Td>
-                <Td>{ data.record.decoded[valName] }</Td>
+                <Td w="100%" wordBreak="break-all">
+                  <Box>
+                    { data.record.decoded[valName] }
+                  </Box>
+                </Td>
               </Tr>
             )) }
           </>

ui/address/mud/AddressMudRecordsTable.tsx

@@ -23,9 +23,20 @@ type Props = {
   toggleSorting: (key: AddressMudRecordsSorting['sort']) => void;
   setFilters: React.Dispatch<React.SetStateAction<AddressMudRecordsFilter>>;
   filters: AddressMudRecordsFilter;
+  toggleTableHasHorisontalScroll: () => void;
+  scrollRef?: React.RefObject<HTMLDivElement>;
 }
 
-const AddressMudRecordsTable = ({ data, top, sorting, toggleSorting, filters, setFilters }: Props) => {
+const AddressMudRecordsTable = ({
+  data,
+  top,
+  sorting,
+  toggleSorting,
+  filters,
+  setFilters,
+  toggleTableHasHorisontalScroll,
+  scrollRef,
+}: Props) => {
   const [ colsCutCount, setColsCutCount ] = React.useState<number>(0);
   const [ isOpened, setIsOpened ] = useBoolean(false);
   const [ hasCut, setHasCut ] = useBoolean(true);
@@ -33,13 +44,23 @@ const AddressMudRecordsTable = ({ data, top, sorting, toggleSorting, filters, se
   const tableRef = React.useRef<HTMLTableElement>(null);
 
   const router = useRouter();
+
+  const toggleIsOpen = React.useCallback(() => {
+    setIsOpened.toggle();
+    toggleTableHasHorisontalScroll();
+  }, [ setIsOpened, toggleTableHasHorisontalScroll ]);
+
   const onRecordClick = React.useCallback((e: React.MouseEvent) => {
     const newQuery = {
       ...router.query,
       record_id: e.currentTarget.getAttribute('data-id') as string,
     };
     router.push({ pathname: router.pathname, query: newQuery }, undefined, { shallow: true });
-  }, [ router ]);
+    window.setTimeout(() => {
+      // cannot do scroll instantly, have to wait a little
+      scrollRef?.current?.scrollIntoView({ behavior: 'smooth' });
+    }, 500);
+  }, [ router, scrollRef ]);
 
   const handleFilterChange = React.useCallback((field: keyof AddressMudRecordsFilter) => (val: string) => {
     setFilters(prev => {
@@ -88,9 +109,10 @@ const AddressMudRecordsTable = ({ data, top, sorting, toggleSorting, filters, se
   const values = (isOpened || !hasCut) ? data.schema.value_names : data.schema.value_names.slice(0, colsCutCount - data.schema.key_names.length);
 
   return (
-    <Box maxW="100%" overflowX="scroll" whiteSpace="nowrap">
+    // can't implement both horisontal table scroll and sticky header
+    <Box maxW="100%" overflowX={ isOpened ? 'scroll' : 'unset' } whiteSpace="nowrap">
       <Table variant="simple" size="sm" style={{ tableLayout: 'fixed' }} ref={ tableRef }>
-        <Thead top={ top } display="table" w="100%">
+        <Thead top={ isOpened ? 0 : top } display={ isOpened ? 'table' : 'table-header-group' } w="100%">
           <Tr >
             { keys.map((keyName, index) => {
               const text = getNameTypeText(keyName, data.schema.key_types[index]);
@@ -120,18 +142,18 @@ const AddressMudRecordsTable = ({ data, top, sorting, toggleSorting, filters, se
                 { capitalizeFirstLetter(valName) } ({ data.schema.value_types[index] })
               </Th>
             )) }
-            { hasCut && !isOpened && <Th width={ cutWidth }><Link onClick={ setIsOpened.on }>...</Link></Th> }
+            { hasCut && !isOpened && <Th width={ cutWidth }><Link onClick={ toggleIsOpen }>...</Link></Th> }
             <Th { ...thStyles }>Modified</Th>
-            { hasCut && isOpened && <Th width={ cutWidth }><Link onClick={ setIsOpened.off }>...</Link></Th> }
+            { hasCut && isOpened && <Th width={ cutWidth }><Link onClick={ toggleIsOpen }>...</Link></Th> }
           </Tr>
         </Thead>
-        <Tbody display="table" w="100%">
+        <Tbody display={ isOpened ? 'table' : 'table-row-group' } w="100%">
           { data.items.map((item) => (
             <Tr key={ item.id }>
               { keys.map((keyName, index) => (
                 <Td key={ keyName } backgroundColor={ keyBgColor } { ...tdStyles }>
                   { index === 0 ?
-                    <Link onClick={ onRecordClick } data-id={ item.id }>{ item.decoded[keyName].toString() }</Link> :
+                    <Link onClick={ onRecordClick } data-id={ item.id } fontWeight={ 700 }>{ item.decoded[keyName].toString() }</Link> :
                     item.decoded[keyName].toString()
                   }
                 </Td>
@@ -139,7 +161,7 @@ const AddressMudRecordsTable = ({ data, top, sorting, toggleSorting, filters, se
               { values.map((valName) =>
                 <Td key={ valName } { ...tdStyles }>{ item.decoded[valName].toString() }</Td>) }
               { hasCut && !isOpened && <Td width={ cutWidth }></Td> }
-              <Td { ...tdStyles }>{ dayjs(item.timestamp).format('llll') }</Td>
+              <Td { ...tdStyles } color="text_secondary">{ dayjs(item.timestamp).format('lll') }</Td>
               { hasCut && isOpened && <Td width={ cutWidth }></Td> }
             </Tr>
           )) }

ui/address/mud/AddressMudTable.tsx

-import { Box, HStack, Hide, Show, Tag, TagCloseButton, chakra } from '@chakra-ui/react';
+import { Box, HStack, Hide, Show, Tag, TagCloseButton, chakra, useBoolean } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -6,7 +6,7 @@ import type { AddressMudRecordsFilter, AddressMudRecordsSorting } from 'types/ap
 
 import { apos, nbsp } from 'lib/html-entities';
 import getQueryParamString from 'lib/router/getQueryParamString';
-import ActionBar from 'ui/shared/ActionBar';
+import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import ContentLoader from 'ui/shared/ContentLoader';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
@@ -31,6 +31,7 @@ const AddressMudTable = ({ scrollRef, tableId, isQueryEnabled = true }: Props) =
   const [ sorting, setSorting ] =
     React.useState<AddressMudRecordsSorting | undefined>(getSortParamsFromQuery<AddressMudRecordsSorting>(router.query, SORT_SEQUENCE));
   const [ filters, setFilters ] = React.useState<AddressMudRecordsFilter>({});
+  const [ tableHasHorisontalScroll, setTableHasHorisontalScroll ] = useBoolean(false);
 
   const hash = getQueryParamString(router.query.hash);
 
@@ -60,14 +61,20 @@ const AddressMudTable = ({ scrollRef, tableId, isQueryEnabled = true }: Props) =
     });
   }, []);
 
+  const hasActiveFilters = Object.values(filters).some(Boolean);
+
+  const actionBatHeight = React.useMemo(() => {
+    const heightWithoutFilters = pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 60;
+
+    return hasActiveFilters ? heightWithoutFilters + 44 : heightWithoutFilters;
+  }, [ pagination.isVisible, hasActiveFilters ]);
+
   if (isLoading) {
     return <ContentLoader/>;
   }
 
-  const hasActiveFilters = Object.values(filters).some(Boolean);
-
   const filtersTags = hasActiveFilters ? (
-    <HStack gap={ 3 }>
+    <HStack gap={ 3 } mb={ 1 }>
       { Object.entries(filters).map(([ key, value ]) => {
         const index = key as FilterKeys === 'filter_key0' ? 0 : 1;
         return (
@@ -87,7 +94,7 @@ const AddressMudTable = ({ scrollRef, tableId, isQueryEnabled = true }: Props) =
   ) : null;
 
   const actionBar = (
-    <ActionBar mt={ -6 } showShadow justifyContent="space-between">
+    <ActionBar mt={ -6 } showShadow={ tableHasHorisontalScroll } justifyContent="space-between" alignItems={ hasActiveFilters ? 'start' : 'center' }>
       <Box>
         { data && (
           <AddressMudBreadcrumbs
@@ -95,7 +102,7 @@ const AddressMudTable = ({ scrollRef, tableId, isQueryEnabled = true }: Props) =
             tableId={ tableId }
             tableName={ data?.table.table_full_name }
             scrollRef={ scrollRef }
-            mb={ 3 }
+            mb={ hasActiveFilters ? 4 : 0 }
           />
         ) }
         { filtersTags }
@@ -109,13 +116,13 @@ const AddressMudTable = ({ scrollRef, tableId, isQueryEnabled = true }: Props) =
       <Hide below="lg" ssr={ false }>
         <AddressMudRecordsTable
           data={ data }
-          // can't implement both horisontal table scroll and sticky header
-          // top={ pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 60 }
-          top={ 0 }
+          top={ actionBatHeight }
           sorting={ sorting }
           toggleSorting={ toggleSorting }
           setFilters={ setFilters }
           filters={ filters }
+          toggleTableHasHorisontalScroll={ setTableHasHorisontalScroll.toggle }
+          scrollRef={ scrollRef }
         />
       </Hide>
       <Show below="lg" ssr={ false }>
@@ -142,6 +149,7 @@ const AddressMudTable = ({ scrollRef, tableId, isQueryEnabled = true }: Props) =
       }}
       content={ content }
       actionBar={ actionBar }
+      showActionBarIfEmpty
     />
   );
 };

ui/address/mud/AddressMudTables.tsx

@@ -69,6 +69,7 @@ const AddressMudTables = ({ scrollRef, isQueryEnabled = true }: Props) => {
           items={ data.items }
           isLoading={ isPlaceholderData }
           top={ ACTION_BAR_HEIGHT_DESKTOP }
+          scrollRef={ scrollRef }
         />
       </Hide>
       <Show below="lg" ssr={ false }>

ui/address/mud/AddressMudTablesTable.tsx

@@ -11,10 +11,11 @@ type Props = {
   items: AddressMudTables['items'];
   isLoading: boolean;
   top: number;
+  scrollRef?: React.RefObject<HTMLDivElement>;
 }
 
 //sorry for the naming
-const AddressMudTablesTable = ({ items, isLoading, top }: Props) => {
+const AddressMudTablesTable = ({ items, isLoading, top, scrollRef }: Props) => {
   return (
     <Table variant="simple" size="sm" style={{ tableLayout: 'auto' }}>
       <Thead top={ top }>
@@ -31,6 +32,7 @@ const AddressMudTablesTable = ({ items, isLoading, top }: Props) => {
             key={ item.table.table_id + (isLoading ? String(index) : '') }
             item={ item }
             isLoading={ isLoading }
+            scrollRef={ scrollRef }
           />
         )) }
       </Tbody>

ui/address/mud/AddressMudTablesTableItem.tsx

@@ -10,9 +10,10 @@ import IconSvg from 'ui/shared/IconSvg';
 type Props = {
   item: AddressMudTableItem;
   isLoading: boolean;
+  scrollRef?: React.RefObject<HTMLDivElement>;
 };
 
-const AddressMudTablesTableItem = ({ item, isLoading }: Props) => {
+const AddressMudTablesTableItem = ({ item, isLoading, scrollRef }: Props) => {
   const [ isOpened, setIsOpened ] = useBoolean(false);
 
   const router = useRouter();
@@ -23,7 +24,11 @@ const AddressMudTablesTableItem = ({ item, isLoading }: Props) => {
       table_id: e.currentTarget.getAttribute('data-id') as string,
     };
     router.push({ pathname: router.pathname, query: newQuery }, undefined, { shallow: true });
-  }, [ router ]);
+    window.setTimeout(() => {
+      // cannot do scroll instantly, have to wait a little
+      scrollRef?.current?.scrollIntoView({ behavior: 'smooth' });
+    }, 500);
+  }, [ router, scrollRef ]);
 
   return (
     <>
@@ -62,13 +67,13 @@ const AddressMudTablesTableItem = ({ item, isLoading }: Props) => {
       </Tr>
       { isOpened && (
         <Tr>
-          <Td></Td>
-          <Td colSpan={ 3 }>
+          <Td pt={ 0 }></Td>
+          <Td colSpan={ 3 } pt={ 0 }>
             <Table>
               { Boolean(item.schema.key_names.length) && (
                 <Tr>
-                  <Td width="80px" fontSize="sm" fontWeight={ 600 }>Key</Td>
-                  <Td>
+                  <Td width="80px" fontSize="sm" fontWeight={ 600 } py={ 2 }>Key</Td>
+                  <Td py={ 2 }>
                     <VStack gap={ 1 } alignItems="start">
                       { item.schema.key_names.map((name, index) => (
                         <Tag key={ name }>
@@ -80,8 +85,8 @@ const AddressMudTablesTableItem = ({ item, isLoading }: Props) => {
                 </Tr>
               ) }
               <Tr borderBottomStyle="hidden">
-                <Td width="80px" fontSize="sm" fontWeight={ 600 }>Value</Td>
-                <Td fontSize="sm">
+                <Td width="80px" fontSize="sm" fontWeight={ 600 } py={ 2 }>Value</Td>
+                <Td fontSize="sm" py={ 2 }>
                   <VStack gap={ 1 } alignItems="start">
                     { item.schema.value_names.map((name, index) => (
                       <Text key={ name }>

ui/nameDomains/NameDomainsListItem.tsx

@@ -42,7 +42,7 @@ const NameDomainsListItem = ({
           <ListItemMobileGrid.Label isLoading={ isLoading }>Registered on</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
             <Skeleton isLoaded={ !isLoading }>
-              <div>{ dayjs(registrationDate).format('MMM DD YYYY HH:mm:ss A') }</div>
+              <div>{ dayjs(registrationDate).format('lll') }</div>
               <div> { dayjs(registrationDate).fromNow() }</div>
             </Skeleton>
           </ListItemMobileGrid.Value>
@@ -54,7 +54,7 @@ const NameDomainsListItem = ({
           <ListItemMobileGrid.Label isLoading={ isLoading }>Expiration date</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
             <Skeleton isLoaded={ !isLoading } whiteSpace="pre-wrap">
-              <div>{ dayjs(expiryDate).format('MMM DD YYYY HH:mm:ss A') } </div>
+              <div>{ dayjs(expiryDate).format('lll') } </div>
               <NameDomainExpiryStatus date={ expiryDate }/>
             </Skeleton>
           </ListItemMobileGrid.Value>

ui/nameDomains/NameDomainsTableItem.tsx

@@ -32,7 +32,7 @@ const NameDomainsTableItem = ({
       <Td verticalAlign="middle" pl={ 9 }>
         { registrationDate && (
           <Skeleton isLoaded={ !isLoading }>
-            { dayjs(registrationDate).format('MMM DD YYYY HH:mm:ss A') }
+            { dayjs(registrationDate).format('lll') }
             <chakra.span color="text_secondary"> { dayjs(registrationDate).fromNow() }</chakra.span>
           </Skeleton>
         ) }
@@ -40,7 +40,7 @@ const NameDomainsTableItem = ({
       <Td verticalAlign="middle">
         { expiryDate && (
           <Skeleton isLoaded={ !isLoading } whiteSpace="pre-wrap">
-            <span>{ dayjs(expiryDate).format('MMM DD YYYY HH:mm:ss A') } </span>
+            <span>{ dayjs(expiryDate).format('lll') } </span>
             <NameDomainExpiryStatus date={ expiryDate }/>
           </Skeleton>
         ) }

ui/shared/DataListDisplay.tsx

@@ -15,6 +15,7 @@ type Props = {
   items?: Array<unknown>;
   emptyText: string;
   actionBar?: React.ReactNode;
+  showActionBarIfEmpty?: boolean;
   content: React.ReactNode;
   className?: string;
   filterProps?: FilterProps;
@@ -35,7 +36,12 @@ const DataListDisplay = (props: Props) => {
   }
 
   if (!props.items?.length) {
-    return props.emptyText ? <Text className={ props.className }>{ props.emptyText }</Text> : null;
+    return (
+      <>
+        { props.showActionBarIfEmpty && props.actionBar }
+        { props.emptyText && <Text className={ props.className }>{ props.emptyText }</Text> }
+      </>
+    );
   }
 
   return (