New Layout (#22)

New layout

packages/features/accounts/src/components/account-selector.tsx

@@ -98,7 +98,7 @@ export function AccountSelector({
             variant="ghost"
             role="combobox"
             aria-expanded={open}
-            className={cn('dark:shadow-primary/10 group w-full border px-4', {
+            className={cn('dark:shadow-primary/10 group px-2', {
               'justify-between': !collapsed,
               'justify-center': collapsed,
             })}
@@ -144,11 +144,11 @@ export function AccountSelector({
               )}
             </If>
 
-            <CaretSortIcon className="h-4 w-4 shrink-0 opacity-50" />
+            <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
           </Button>
         </PopoverTrigger>
 
-        <PopoverContent className="w-full p-0">
+        <PopoverContent className="w-full p-0" collisionPadding={20}>
           <Command>
             <CommandInput placeholder={t('searchAccount')} className="h-9" />
 

packages/features/accounts/src/components/personal-account-dropdown.tsx

@@ -115,15 +115,15 @@ export function PersonalAccountDropdown({
           </div>
 
           <EllipsisVertical
-            className={'text-muted-foreground hidden h-8 group-hover:flex'}
+            className={'text-muted-foreground mr-1 hidden h-8 group-hover:flex'}
           />
         </If>
       </DropdownMenuTrigger>
 
       <DropdownMenuContent
-        className={'!min-w-[15rem]'}
+        className={'xl:!min-w-[15rem]'}
         collisionPadding={{ right: 20, left: 20 }}
-        sideOffset={20}
+        sideOffset={10}
       >
         <DropdownMenuItem className={'!h-10 rounded-none'}>
           <div

packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-list.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useCallback, useState } from 'react';
 
 import type { Factor } from '@supabase/supabase-js';
@@ -25,7 +27,7 @@ import {
 import { Badge } from '@kit/ui/badge';
 import { Button } from '@kit/ui/button';
 import { If } from '@kit/ui/if';
-import Spinner from '@kit/ui/spinner';
+import { Spinner } from '@kit/ui/spinner';
 import {
   Table,
   TableBody,