MED-140: ui fixes (#69)

* MED-140: ui fixes

* make accountid optional in hook

packages/ui/src/makerkit/language-selector.tsx

@@ -40,7 +40,7 @@ export function LanguageSelector({
   }, [currentLanguage]);
 
   const userId = user?.id;
-  const updateAccountMutation = useUpdateAccountData(userId!);
+  const updateAccountMutation = useUpdateAccountData(userId);
   const revalidateUserDataQuery = useRevalidatePersonalAccountDataQuery();
 
   const updateLanguagePreference = async (
@@ -52,6 +52,10 @@ export function LanguageSelector({
       onChange(locale);
     }
 
+    if (!userId) {
+      return i18n.changeLanguage(locale);
+    }
+
     const promise = updateAccountMutation
       .mutateAsync({
         preferred_locale: locale,

packages/ui/src/makerkit/marketing/header.tsx

@@ -1,5 +1,7 @@
-import { cn } from '../../lib/utils';
 import { LanguageSelector } from '@kit/ui/language-selector';
+
+import { cn } from '../../lib/utils';
+
 interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   logo?: React.ReactNode;
   navigation?: React.ReactNode;
@@ -22,11 +24,16 @@ export const Header: React.FC<HeaderProps> = function ({
       {...props}
     >
       <div className="container">
-        <div className="grid h-14 grid-cols-3 items-center">
-          <div className={'mx-auto md:mx-0'}>{logo}</div>
-          <div className="order-first md:order-none">{navigation}</div>
-          
-          <div className="flex items-center justify-end gap-x-2"><div className="max-w-[100px]"><LanguageSelector /></div>{actions}</div>
+        <div className="2xs:h-14 2xs:grid-cols-3 grid h-24 w-full items-center">
+          <div className={'mx-auto flex'}>{logo}</div>
+          <div className="2xs:order-none order-first">{navigation}</div>
+
+          <div className="2xs:justify-end 2xs:gap-x-2 flex items-center justify-evenly">
+            <div className="max-w-[100px]">
+              <LanguageSelector />
+            </div>
+            {actions}
+          </div>
         </div>
       </div>
     </div>

packages/ui/src/makerkit/page.tsx

@@ -42,7 +42,7 @@ function PageWithSidebar(props: PageProps) {
       >
         {MobileNavigation}
 
-        <div className={'bg-background flex flex-1 flex-col px-4 lg:px-0 pb-8'}>
+        <div className={'bg-background flex flex-1 flex-col px-4 pb-8 lg:px-0'}>
           {Children}
         </div>
       </div>
@@ -58,7 +58,7 @@ export function PageMobileNavigation(
   return (
     <div
       className={cn(
-        'flex w-full items-center border-b px-4 py-2 lg:hidden lg:px-0',
+        'flex w-full items-center px-4 py-2 lg:hidden lg:px-0',
         props.className,
       )}
     >