align connect button to edge

components/Layout.tsx

@@ -70,7 +70,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
               isCollapsed ? 'md:pl-[64px]' : 'md:pl-44 lg:pl-48 xl:pl-52'
             }`}
           >
-            <div className="flex h-16 items-center justify-between border-b border-th-bkg-3 bg-th-bkg-1 px-6 md:px-8">
+            <div className="flex h-16 items-center justify-between border-b border-th-bkg-3 bg-th-bkg-1 pl-6 md:pl-8">
               <img
                 className="mr-4 h-8 w-auto md:hidden"
                 src="/logos/logo-mark.svg"

components/TopBar.tsx

@@ -49,7 +49,7 @@ const TopBar = () => {
           ) : null}
         </span>
         {connected ? (
-          <div className="flex items-center space-x-4">
+          <div className="flex items-center space-x-4 pr-4 md:pr-6">
             <MangoAccountsList mangoAccount={mangoAccount} />
             <ConnectedMenu />
           </div>

components/wallet/ConnectedMenu.tsx

@@ -34,9 +34,9 @@ const ConnectedMenu = () => {
         {({ open }) => (
           <div className="relative">
             <Menu.Button
-              className={`flex h-12 w-12 items-center rounded-full hover:bg-th-bkg-2 focus:outline-none`}
+              className={`flex h-10 w-10 items-center rounded-full hover:bg-th-bkg-2 focus:outline-none`}
             >
-              <ProfileImage imageSize="48" placeholderSize="28" />
+              <ProfileImage imageSize="40" placeholderSize="24" />
             </Menu.Button>
             <Transition
               appear={true}