make app usable on smaller breakpoints

bleu · Jul 19, 2024 · 5ad1232 · 5ad1232
1 parent 621962d
commit 5ad1232
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 10 deletions.
diff --git a/src/app/[chainId]/[safeAddress]/page.tsx b/src/app/[chainId]/[safeAddress]/page.tsx
@@ -6,11 +6,11 @@ export default function Page() {
   return (
     <>
       <TxPendingDialog />
-      <div className="grid grid-cols-3 p-8 gap-4">
-        <div className="col-span-1">
+      <div className="grid grid-cols-1 md:grid-cols-3 p-8 gap-4">
+        <div className="md:col-span-1">
           <SwapCard />
         </div>
-        <div className="col-span-2">
+        <div className="md:col-span-2">
           <ConsolidatedOrdersTable />
         </div>
       </div>

diff --git a/src/components/ConsolidatedOrdersTable/columns.tsx b/src/components/ConsolidatedOrdersTable/columns.tsx
@@ -197,7 +197,9 @@ export function getColumns(): ColumnDef<ConsolidatedOrderType>[] {
       header: ({ column }) => (
         <DataTableColumnHeader column={column} title="Order" />
       ),
-      cell: ({ row }) => getOrderDescription(row.original),
+      cell: ({ row }) => (
+        <div className="min-w-32">{getOrderDescription(row.original)}</div>
+      ),
     },
     {
       accessorKey: "strikePrice",
@@ -260,8 +262,7 @@ export function getColumns(): ColumnDef<ConsolidatedOrderType>[] {
       },
     },
     {
-      accessorKey: "details",
-      header: "",
+      id: "details",
       cell: ({ row }) => {
         if (isStopLossOrder(row.original) && "id" in row.original) {
           const { safeAddress, chainId } = useSafeApp();

diff --git a/src/components/ConsolidatedOrdersTable/index.tsx b/src/components/ConsolidatedOrdersTable/index.tsx
@@ -63,7 +63,7 @@ export function ConsolidatedOrdersTable() {
 
   return (
     <div>
-      <div className="-mt-10">
+      <div className="md:-mt-10">
         <div className="flex items-center space-x-2 mb-2">
           <span className="text-2xl font-semibold ">Your orders</span>
           {isUpdating ? (

diff --git a/src/components/ConsolidatedOrdersTable/toolbar-actions.tsx b/src/components/ConsolidatedOrdersTable/toolbar-actions.tsx
@@ -83,7 +83,7 @@ export function ConsolidatedOrdersTableToolbarActions({
 
   return (
     <>
-      <div className="flex items-center gap-2">
+      <div className="grid gap-2 md:grid-flow-col justify-items-end">
         <TooltipWrapper
           showTooltip={draftOrderActionsDisabled}
           tooltipText={DRAFT_ORDER_ACTIONS_DISABLED_TOOLTIP}

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -24,7 +24,7 @@ export function Header({ linkUrl, imageSrc, onLinkClick }: IHeader) {
   };
 
   return (
-    <div className="flex h-20 w-full items-center bg-background p-4">
+    <div className="flex h-20 w-full items-center bg-background p-8">
       <div className="mr-auto flex justify-start">
         <Link
           href={linkUrl}

diff --git a/src/components/ReviewOrdersDialog.tsx b/src/components/ReviewOrdersDialog.tsx
@@ -86,7 +86,7 @@ export function ReviewOrdersDialog({
           "data-[state=open]:animate-contentShow rounded-lg focus:outline-none bg-muted w-[90vw] max-w-[450px] py-6 px-2",
         )}
       >
-        <div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thumb-primary scrollbar-track-background scrollbar-w-2 max-h-[85vh] px-3">
+        <div className="flex flex-col gap-2 w-full overflow-y-auto scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thumb-primary scrollbar-track-background scrollbar-w-2 max-h-[85vh] px-3">
           <div className="text-2xl font-medium ">
             Review Stop Loss order{multipleOrders ? "s" : ""}
           </div>