Snyk report fixes + offcanvas sidebar fix (#263)

Refactor:
- Improved consistency and robustness by standardizing file encoding arguments from 'utf-8' to 'utf8' across various file read/write operations.
- Simplified status mapping logic in billing components and services by replacing switch statements with direct mapping objects for clearer and more maintainable code.
- Enhanced type conversion and error handling in billing and internationalization components for improved reliability.
- Updated sorting logic in team member tables for more predictable member ordering.
- Improved error logging with sanitized output to prevent formatting issues.
- Adjusted environment variable whitelisting to use a more flexible matching pattern.
- Fix variables for sidebar style handling

Style:
- Refined spacing and layout in account selector and sidebar header components for better visual consistency.

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

@@ -100,7 +100,7 @@ export function AccountSelector({
             role="combobox"
             aria-expanded={open}
             className={cn(
-              'dark:shadow-primary/10 group w-full min-w-0 px-2 lg:w-auto lg:max-w-fit',
+              'dark:shadow-primary/10 group w-full min-w-0 px-2 lg:w-auto lg:max-w-fit mr-1',
               {
                 'justify-start': !collapsed,
                 'm-auto justify-center px-2 lg:w-full': collapsed,
@@ -114,7 +114,7 @@ export function AccountSelector({
                 <span
                   className={cn('flex max-w-full items-center', {
                     'justify-center gap-x-0': collapsed,
-                    'gap-x-4': !collapsed,
+                    'gap-x-2': !collapsed,
                   })}
                 >
                   <PersonalAccountAvatar />
@@ -133,7 +133,7 @@ export function AccountSelector({
                 <span
                   className={cn('flex max-w-full items-center', {
                     'justify-center gap-x-0': collapsed,
-                    'gap-x-4': !collapsed,
+                    'gap-x-2': !collapsed,
                   })}
                 >
                   <Avatar className={'rounded-xs h-6 w-6'}>
@@ -158,7 +158,7 @@ export function AccountSelector({
             </If>
 
             <CaretSortIcon
-              className={cn('ml-2 h-4 w-4 shrink-0 opacity-50', {
+              className={cn('ml-1 h-4 w-4 shrink-0 opacity-50', {
                 hidden: collapsed,
               })}
             />