Improve mobile ui

packages/ui/src/components/accounts/account-logout-screen.tsx

@@ -29,7 +29,7 @@ export const AccountLogoutScreen = () => {
             <h2 className="text-2xl font-semibold tracking-tight">Logout</h2>
             <Separator className="mt-3" />
           </div>
-          <div className="flex items-center justify-between gap-6">
+          <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
             <div className="flex-1 space-y-2">
               <h3 className="font-semibold">Sign out of your account</h3>
               <p className="text-sm text-muted-foreground">
@@ -38,11 +38,11 @@ export const AccountLogoutScreen = () => {
                 data will be re-synced.
               </p>
             </div>
-            <div className="flex-shrink-0">
+            <div className="w-full md:w-auto md:flex-shrink-0">
               <Button
                 variant="destructive"
                 disabled={isPending}
-                className="w-20 cursor-pointer"
+                className="w-full cursor-pointer md:w-20"
                 onClick={async () => {
                   mutate({
                     input: {

packages/ui/src/components/accounts/account-update.tsx

@@ -17,6 +17,7 @@ import {
 import { Input } from '@colanode/ui/components/ui/input';
 import { Spinner } from '@colanode/ui/components/ui/spinner';
 import { useAccount } from '@colanode/ui/contexts/account';
+import { useIsMobile } from '@colanode/ui/hooks/use-is-mobile';
 import { useMutation } from '@colanode/ui/hooks/use-mutation';
 import { openFileDialog } from '@colanode/ui/lib/files';
 import { cn } from '@colanode/ui/lib/utils';
@@ -31,6 +32,7 @@ const formSchema = z.object({
 export const AccountUpdate = () => {
   const accountId = useAccount().id;
   const account = useAppStore((state) => state.accounts[accountId]);
+  const isMobile = useIsMobile();
   const { mutate: uploadAvatar, isPending: isUploadingAvatar } = useMutation();
   const { mutate: updateAccount, isPending: isUpdatingAccount } = useMutation();
 
@@ -74,8 +76,13 @@ export const AccountUpdate = () => {
   return (
     <Form {...form}>
       <form className="flex flex-col" onSubmit={form.handleSubmit(onSubmit)}>
-        <div className="flex flex-row gap-1">
-          <div className="h-40 w-40 pt-3">
+        <div className={cn('flex gap-1', isMobile ? 'flex-col' : 'flex-row')}>
+          <div
+            className={cn(
+              'pt-3',
+              isMobile ? 'flex justify-center pb-4' : 'size-40'
+            )}
+          >
             <div
               className="group relative cursor-pointer"
               onClick={async () => {
@@ -117,11 +124,12 @@ export const AccountUpdate = () => {
                 id={account.id}
                 name={name}
                 avatar={avatar}
-                className="h-32 w-32"
+                className={isMobile ? 'size-24' : 'size-32'}
               />
               <div
                 className={cn(
-                  `absolute left-0 top-0 hidden h-32 w-32 items-center justify-center overflow-hidden bg-accent/50 group-hover:inline-flex`,
+                  `absolute left-0 top-0 hidden items-center justify-center overflow-hidden bg-accent/50 group-hover:inline-flex`,
+                  isMobile ? 'size-24' : 'size-32',
                   isUploadingAvatar ? 'inline-flex' : 'hidden'
                 )}
               >
@@ -133,7 +141,12 @@ export const AccountUpdate = () => {
               </div>
             </div>
           </div>
-          <div className="flex-grow space-y-4 py-2 pb-4">
+          <div
+            className={cn(
+              'space-y-4 py-2 pb-4',
+              isMobile ? 'w-full' : 'flex-grow'
+            )}
+          >
             <FormField
               control={form.control}
               name="name"

packages/ui/src/components/app/app-appearance-settings-screen.tsx

@@ -73,7 +73,7 @@ export const AppAppearanceSettingsScreen = () => {
           <Separator className="mt-3" />
         </div>
 
-        <div className="flex items-center gap-3">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
           {themeModeOptions.map((option) => {
             const isActive =
               option.value === null ? !themeMode : themeMode === option.value;
@@ -107,7 +107,7 @@ export const AppAppearanceSettingsScreen = () => {
                   }
                 }}
                 className={cn(
-                  'h-10 min-w-32 justify-center gap-2 relative',
+                  'h-10 w-full justify-start gap-2 relative',
                   isActive && 'ring-1 ring-ring border-primary'
                 )}
                 title={option.title}
@@ -126,7 +126,7 @@ export const AppAppearanceSettingsScreen = () => {
           <h2 className="text-2xl font-semibold tracking-tight">Color</h2>
           <Separator className="mt-3" />
         </div>
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 max-w-2xl">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-3 max-w-2xl">
           {themeColorOptions.map((option) => {
             const isDefault = option.value === 'default';
             const isActive = isDefault

packages/ui/src/components/workspaces/workspace-form.tsx

@@ -20,6 +20,7 @@ import { Input } from '@colanode/ui/components/ui/input';
 import { Spinner } from '@colanode/ui/components/ui/spinner';
 import { Textarea } from '@colanode/ui/components/ui/textarea';
 import { useAccount } from '@colanode/ui/contexts/account';
+import { useIsMobile } from '@colanode/ui/hooks/use-is-mobile';
 import { useMutation } from '@colanode/ui/hooks/use-mutation';
 import { openFileDialog } from '@colanode/ui/lib/files';
 import { cn } from '@colanode/ui/lib/utils';
@@ -50,6 +51,7 @@ export const WorkspaceForm = ({
   readOnly = false,
 }: WorkspaceFormProps) => {
   const account = useAccount();
+  const isMobile = useIsMobile();
 
   const id = useRef(generateId(IdType.Workspace));
   const { mutate, isPending } = useMutation();
@@ -69,8 +71,13 @@ export const WorkspaceForm = ({
   return (
     <Form {...form}>
       <form className="flex flex-col" onSubmit={form.handleSubmit(onSubmit)}>
-        <div className="flex flex-row gap-1">
-          <div className="h-40 w-40 pt-3">
+        <div className={cn('flex gap-1', isMobile ? 'flex-col' : 'flex-row')}>
+          <div
+            className={cn(
+              'pt-3',
+              isMobile ? 'flex justify-center pb-4' : 'size-40'
+            )}
+          >
             <div
               className="group relative cursor-pointer"
               onClick={async () => {
@@ -110,11 +117,12 @@ export const WorkspaceForm = ({
                 id={id.current}
                 name={name.length > 0 ? name : 'New workspace'}
                 avatar={avatar}
-                className="h-32 w-32"
+                className={isMobile ? 'size-24' : 'size-32'}
               />
               <div
                 className={cn(
-                  `absolute left-0 top-0 hidden h-32 w-32 items-center justify-center overflow-hidden bg-accent/70 group-hover:inline-flex`,
+                  `absolute left-0 top-0 hidden items-center justify-center overflow-hidden bg-accent/70 group-hover:inline-flex`,
+                  isMobile ? 'size-24' : 'size-32',
                   isPending ? 'inline-flex' : 'hidden',
                   readOnly && 'hidden group-hover:hidden'
                 )}
@@ -127,7 +135,12 @@ export const WorkspaceForm = ({
               </div>
             </div>
           </div>
-          <div className="flex-grow space-y-4 py-2 pb-4">
+          <div
+            className={cn(
+              'space-y-4 py-2 pb-4',
+              isMobile ? 'w-full' : 'flex-grow'
+            )}
+          >
             <FormField
               control={form.control}
               name="name"