fix: tweak (#664)

consolelabs · Jan 22, 2024 · 2795c29 · 2795c29
1 parent 01660ab
commit 2795c29
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 7 deletions.
diff --git a/apps/mochi-web/components/Feed/index.tsx b/apps/mochi-web/components/Feed/index.tsx
@@ -94,7 +94,7 @@ export default function Feed({ className = '' }: Props) {
       />
       <div
         style={{ maxWidth: 1500 }}
-        className="flex justify-between items-center px-4 pt-6 pb-4 mx-auto w-screen sm:px-8"
+        className="flex justify-between items-center px-4 pt-6 pb-4 mx-auto w-screen sm:px-6"
       >
         <Typography>Recent Transactions</Typography>
         <Button asChild className="!pr-0" variant="link" color="primary">
@@ -118,7 +118,7 @@ export default function Feed({ className = '' }: Props) {
           /* }} */
           className="overflow-hidden h-screen max-h-full"
         >
-          <div className="px-6 mx-auto" style={{ width: 1488 }}>
+          <div className="px-6 mx-auto">
             <TransactionTable
               enableColFilter={false}
               enableColSort={false}

diff --git a/apps/mochi-web/components/TransactionTable/TransactionTable.tsx b/apps/mochi-web/components/TransactionTable/TransactionTable.tsx
@@ -89,7 +89,7 @@ export const TransactionTable = (props: TransactionTableProps) => {
       {
         header: () => <TransactionHeaderWen disabled={!enableColSort} />,
         id: 'wen',
-        width: '9%',
+        width: '10%',
         // eslint-disable-next-line
         cell: (props) => {
           const tx = props.row.original
@@ -146,7 +146,7 @@ export const TransactionTable = (props: TransactionTableProps) => {
       {
         header: () => <TransactionHeaderTotalValue disabled={!enableColSort} />,
         id: 'amount',
-        width: '10%',
+        width: '20%',
         // eslint-disable-next-line
         cell: (props) => {
           const tx = props.row.original
@@ -230,7 +230,7 @@ export const TransactionTable = (props: TransactionTableProps) => {
     <>
       <ScrollArea>
         <ScrollAreaViewport ref={scrollRef}>
-          <div style={{ minWidth: 1400 }} className={className}>
+          <div className={clsx('w-max mx-auto', className)}>
             <Table
               {...rest}
               size="sm"

diff --git a/apps/mochi-web/components/TransactionTable/TransactionTime.tsx b/apps/mochi-web/components/TransactionTable/TransactionTime.tsx
@@ -37,7 +37,7 @@ export const TransactionTime = ({ date, raw: _raw }: Props) => {
   /*   ) */
   /* } */
   return (
-    <Typography level="p5" className="tabular-nums text-left">
+    <Typography level="p5" className="w-max tabular-nums text-left">
       {date}
     </Typography>
   )

diff --git a/packages/theme/src/components/table.ts b/packages/theme/src/components/table.ts
@@ -32,7 +32,7 @@ const tableHeaderClsx = ({
   size,
 }: { className?: string; stickyHeader?: boolean; size?: 'sm' | 'md' } = {}) =>
   clsx(
-    'py-3 text-xxs font-semibold tracking-tight uppercase min-w-[48px] text-text-secondary',
+    'whitespace-nowrap py-3 text-xxs font-semibold tracking-tight uppercase min-w-[48px] text-text-secondary',
     stickyHeader
       ? 'sticky top-0 bg-background-surface after:absolute after:inset-0 after:h-full after:w-full after:border-b after:border-neutral-outline-active'
       : 'border-b border-neutral-outline-active',