From 36c1656c2b435a0f662f9a2a6df57ded10343077 Mon Sep 17 00:00:00 2001
From: Noah Loomis <noah.loomis@me.com>
Date: Sun, 25 Oct 2026 09:47:18 -0400
Subject: [PATCH] fix: nav being clipped when browser width was between 1025
 and 1110px

---
 src/components/Layout/MainLayout.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Layout/MainLayout.tsx b/src/components/Layout/MainLayout.tsx
index 9a648baf9..8af29ae08 100644
--- a/src/components/Layout/MainLayout.tsx
+++ b/src/components/Layout/MainLayout.tsx
@@ -38,11 +38,11 @@ const MainLayout: React.FC<MainLayoutProps> = ({
       <div
         vaul-drawer-wrapper=""
         className={clsx(
-          'bg-background mx-auto flex h-full w-full flex-col lg:max-w-3xl lg:flex-row',
+          'bg-background flex h-full w-full flex-col lg:grid lg:grid-cols-3',
           hideAppBar ? '' : '',
         )}
       >
-        <nav className="item-center -ml-[170px] hidden w-[170px] px-4 py-4 lg:flex lg:flex-col lg:gap-2">
+        <nav className="item-center hidden px-4 py-4 lg:flex lg:flex-col lg:gap-2 lg:justify-self-end">
           <Link href="/balances" className="mb-8 flex items-center gap-2">
             <span className="text-xl font-medium">
               {t?.('meta.application_name') ?? 'SplitPro'}