Styling for all forms.

scripts/build-prisma-client.js

@@ -2,7 +2,7 @@ import esbuild from 'esbuild';
 
 esbuild
   .build({
-    entryPoints: ['src/generated/prisma/client.ts'], // Adjust this to your entry file
+    entryPoints: ['src/generated/prisma/client.js'], // Adjust this to your entry file
     bundle: true, // Bundle all files into one (optional)
     outfile: 'dist/generated/prisma/client.js', // Output file
     platform: 'node', // For Node.js compatibility

src/app/(main)/admin/AdminLayout.tsx

@@ -45,7 +45,7 @@ export function AdminLayout({ children }: { children: ReactNode }) {
             <SideMenu items={items} selectedKey={value} />
           </Column>
           <Column>
-            <Panel>{children}</Panel>
+            <Panel minHeight="300px">{children}</Panel>
           </Column>
         </Grid>
       </Column>

src/app/(main)/admin/teams/AdminTeamsTable.tsx

@@ -46,7 +46,7 @@ export function AdminTeamsTable({
 
               return (
                 <MenuButton>
-                  <MenuItem href={`/admin/users/${id}`} data-test="link-button-edit">
+                  <MenuItem href={`/admin/teams/${id}`} data-test="link-button-edit">
                     <Row alignItems="center" gap>
                       <Icon>
                         <Edit />

src/app/(main)/admin/users/UserAddButton.tsx

@@ -23,7 +23,7 @@ export function UserAddButton({ onSave }: { onSave?: () => void }) {
         <Text>{formatMessage(labels.createUser)}</Text>
       </Button>
       <Modal>
-        <Dialog title={formatMessage(labels.createUser)}>
+        <Dialog title={formatMessage(labels.createUser)} style={{ width: 400 }}>
           {({ close }) => <UserAddForm onSave={handleSave} onClose={close} />}
         </Dialog>
       </Modal>

src/app/(main)/admin/users/UserDeleteButton.tsx

@@ -24,7 +24,7 @@ export function UserDeleteButton({
         <Text>{formatMessage(labels.delete)}</Text>
       </Button>
       <Modal>
-        <Dialog title={formatMessage(labels.deleteUser)}>
+        <Dialog title={formatMessage(labels.deleteUser)} style={{ width: 400 }}>
           {({ close }) => (
             <UserDeleteForm userId={userId} username={username} onSave={onDelete} onClose={close} />
           )}

src/app/(main)/admin/users/[userId]/UserEditForm.tsx

@@ -45,7 +45,7 @@ export function UserEditForm({ userId, onSave }: { userId: string; onSave?: () =
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={getMessage(error)} values={user} style={{ width: 300 }}>
+    <Form onSubmit={handleSubmit} error={getMessage(error)} values={user}>
       <FormField name="username" label={formatMessage(labels.username)}>
         <TextField data-test="input-username" />
       </FormField>

src/app/(main)/admin/users/[userId]/UserSettings.tsx

@@ -19,7 +19,7 @@ export function UserSettings({ userId }: { userId: string }) {
           <Tab id="details">{formatMessage(labels.details)}</Tab>
           <Tab id="websites">{formatMessage(labels.websites)}</Tab>
         </TabList>
-        <TabPanel id="details">
+        <TabPanel id="details" style={{ width: 500 }}>
           <UserEditForm userId={userId} />
         </TabPanel>
         <TabPanel id="websites">

src/app/(main)/boards/BoardAddButton.tsx

@@ -23,7 +23,7 @@ export function BoardAddButton() {
         <Text>{formatMessage(labels.addBoard)}</Text>
       </Button>
       <Modal>
-        <Dialog title={formatMessage(labels.addBoard)}>
+        <Dialog title={formatMessage(labels.addBoard)} style={{ width: 400 }}>
           {({ close }) => <BoardAddForm teamId={teamId} onSave={handleSave} onClose={close} />}
         </Dialog>
       </Modal>

src/app/(main)/settings/profile/PasswordChangeButton.tsx

@@ -29,7 +29,7 @@ export function PasswordChangeButton() {
         <Text>{formatMessage(labels.changePassword)}</Text>
       </Button>
       <Modal>
-        <Dialog title={formatMessage(labels.changePassword)}>
+        <Dialog title={formatMessage(labels.changePassword)} style={{ width: 400 }}>
           {({ close }) => (
             <Column width="300px">
               <PasswordEditForm onSave={handleSave} onClose={close} />

src/app/(main)/settings/teams/TeamAddForm.tsx

@@ -25,7 +25,7 @@ export function TeamAddForm({ onSave, onClose }: { onSave: () => void; onClose:
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error} style={{ minWidth: 300 }}>
+    <Form onSubmit={handleSubmit} error={error}>
       <FormField name="name" label={formatMessage(labels.name)}>
         <TextField autoComplete="off" />
       </FormField>

src/app/(main)/settings/teams/TeamJoinForm.tsx

@@ -25,7 +25,7 @@ export function TeamJoinForm({ onSave, onClose }: { onSave: () => void; onClose:
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error} style={{ minWidth: 300 }}>
+    <Form onSubmit={handleSubmit} error={error}>
       <FormField
         label={formatMessage(labels.accessCode)}
         name="accessCode"

src/app/(main)/settings/teams/TeamLeaveButton.tsx

@@ -24,7 +24,7 @@ export function TeamLeaveButton({ teamId, teamName }: { teamId: string; teamName
         <Text>{formatMessage(labels.leave)}</Text>
       </Button>
       <Modal>
-        <Dialog title={formatMessage(labels.leaveTeam)}>
+        <Dialog title={formatMessage(labels.leaveTeam)} style={{ width: 400 }}>
           {({ close }) => (
             <TeamLeaveForm
               teamId={teamId}

src/app/(main)/settings/teams/TeamsAddButton.tsx

@@ -24,7 +24,7 @@ export function TeamsAddButton({ onSave }: { onSave?: () => void }) {
         <Text>{formatMessage(labels.createTeam)}</Text>
       </Button>
       <Modal>
-        <Dialog title={formatMessage(labels.createTeam)}>
+        <Dialog title={formatMessage(labels.createTeam)} style={{ width: 400 }}>
           {({ close }) => <TeamAddForm onSave={handleSave} onClose={close} />}
         </Dialog>
       </Modal>

src/app/(main)/settings/teams/TeamsJoinButton.tsx

@@ -22,7 +22,7 @@ export function TeamsJoinButton() {
         <Text>{formatMessage(labels.joinTeam)}</Text>
       </Button>
       <Modal>
-        <Dialog title={formatMessage(labels.joinTeam)}>
+        <Dialog title={formatMessage(labels.joinTeam)} style={{ width: 400 }}>
           {({ close }) => <TeamJoinForm onSave={handleJoin} onClose={close} />}
         </Dialog>
       </Modal>

src/app/(main)/settings/teams/[teamId]/TeamDetails.tsx

@@ -41,7 +41,7 @@ export function TeamDetails({ teamId }: { teamId: string }) {
           <Tab id="websites">{formatMessage(labels.websites)}</Tab>
           {isTeamOwner && <Tab id="manage">{formatMessage(labels.manage)}</Tab>}
         </TabList>
-        <TabPanel id="details">
+        <TabPanel id="details" style={{ width: 500 }}>
           <TeamEditForm teamId={teamId} allowEdit={canEdit} />
         </TabPanel>
         <TabPanel id="members">

src/app/(main)/settings/teams/[teamId]/TeamEditForm.tsx

@@ -45,7 +45,7 @@ export function TeamEditForm({
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error} defaultValues={{ ...team }} style={{ width: 400 }}>
+    <Form onSubmit={handleSubmit} error={error} defaultValues={{ ...team }}>
       {({ setValue }) => {
         return (
           <>

src/app/(main)/settings/teams/[teamId]/TeamManage.tsx

@@ -22,7 +22,7 @@ export function TeamManage({ teamId }: { teamId: string }) {
       <DialogTrigger>
         <Button variant="danger">{formatMessage(labels.delete)}</Button>
         <Modal>
-          <Dialog title={formatMessage(labels.deleteTeam)}>
+          <Dialog title={formatMessage(labels.deleteTeam)} style={{ width: 400 }}>
             {({ close }) => <TeamDeleteForm teamId={teamId} onSave={handleLeave} onClose={close} />}
           </Dialog>
         </Modal>

src/app/(main)/settings/teams/[teamId]/TeamMemberEditButton.tsx

@@ -34,7 +34,7 @@ export function TeamMemberEditButton({
         </Row>
       </Button>
       <Modal>
-        <Dialog title={formatMessage(labels.editMember)}>
+        <Dialog title={formatMessage(labels.editMember)} style={{ width: 400 }}>
           {({ close }) => (
             <TeamMemberEditForm
               teamId={teamId}

src/app/(main)/settings/teams/[teamId]/TeamMemberEditForm.tsx

@@ -39,7 +39,7 @@ export function TeamMemberEditForm({
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error} defaultValues={{ role }} style={{ minWidth: 400 }}>
+    <Form onSubmit={handleSubmit} error={error} defaultValues={{ role }}>
       <FormField
         name="role"
         rules={{ required: formatMessage(labels.required) }}

src/app/(main)/settings/teams/[teamId]/TeamMemberRemoveButton.tsx

@@ -41,11 +41,11 @@ export function TeamMemberRemoveButton({
         </Icon>
       </Button>
       <Modal>
-        <Dialog title={formatMessage(labels.removeMember)}>
+        <Dialog title={formatMessage(labels.removeMember)} style={{ width: 400 }}>
           {({ close }) => (
             <ConfirmationForm
               message={formatMessage(messages.confirmRemove, {
-                target: <b key={messages.confirmRemove.id}>{userName}</b>,
+                target: userName,
               })}
               isLoading={isPending}
               error={error}

src/app/(main)/settings/websites/WebsiteAddButton.tsx

@@ -32,7 +32,7 @@ export function WebsiteAddButton({ teamId, onSave }: { teamId: string; onSave?:
         <Text>{formatMessage(labels.addWebsite)}</Text>
       </Button>
       <Modal>
-        <Dialog title={formatMessage(labels.addWebsite)}>
+        <Dialog title={formatMessage(labels.addWebsite)} style={{ width: 400 }}>
           {({ close }) => (
             <Column width="300px">
               <WebsiteAddForm teamId={teamId} onSave={handleSave} onClose={close} />

src/app/(main)/settings/websites/[websiteId]/WebsiteData.tsx

@@ -56,7 +56,7 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
         <DialogTrigger>
           <Button isDisabled={!canTransferWebsite}>{formatMessage(labels.transfer)}</Button>
           <Modal>
-            <Dialog title={formatMessage(labels.transferWebsite)}>
+            <Dialog title={formatMessage(labels.transferWebsite)} style={{ width: 400 }}>
               {({ close }) => (
                 <WebsiteTransferForm websiteId={websiteId} onSave={handleSave} onClose={close} />
               )}
@@ -72,7 +72,7 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
         <DialogTrigger>
           <Button>{formatMessage(labels.reset)}</Button>
           <Modal>
-            <Dialog title={formatMessage(labels.resetWebsite)}>
+            <Dialog title={formatMessage(labels.resetWebsite)} style={{ width: 400 }}>
               {({ close }) => (
                 <WebsiteResetForm websiteId={websiteId} onSave={handleReset} onClose={close} />
               )}
@@ -90,7 +90,7 @@ export function WebsiteData({ websiteId, onSave }: { websiteId: string; onSave?:
             {formatMessage(labels.delete)}
           </Button>
           <Modal>
-            <Dialog title={formatMessage(labels.deleteWebsite)}>
+            <Dialog title={formatMessage(labels.deleteWebsite)} style={{ width: 400 }}>
               {({ close }) => (
                 <WebsiteDeleteForm websiteId={websiteId} onSave={handleSave} onClose={close} />
               )}

src/app/(main)/settings/websites/[websiteId]/WebsiteEditForm.tsx

@@ -33,7 +33,7 @@ export function WebsiteEditForm({ websiteId, onSave }: { websiteId: string; onSa
   };
 
   return (
-    <Form onSubmit={handleSubmit} error={error} values={website} style={{ width: 400 }}>
+    <Form onSubmit={handleSubmit} error={error} values={website}>
       <FormField name="id" label={formatMessage(labels.websiteId)}>
         <TextField data-test="text-field-websiteId" value={website?.id} isReadOnly allowCopy />
       </FormField>

src/app/(main)/settings/websites/[websiteId]/WebsiteSettings.tsx

@@ -37,13 +37,13 @@ export function WebsiteSettings({
           <Tab id="share"> {formatMessage(labels.shareUrl)}</Tab>
           <Tab id="manage">{formatMessage(labels.manage)}</Tab>
         </TabList>
-        <TabPanel id="details">
+        <TabPanel id="details" style={{ width: 500 }}>
           <WebsiteEditForm websiteId={websiteId} />
         </TabPanel>
         <TabPanel id="tracking">
           <WebsiteTrackingCode websiteId={websiteId} />
         </TabPanel>
-        <TabPanel id="share">
+        <TabPanel id="share" style={{ width: 500 }}>
           <WebsiteShareForm websiteId={websiteId} shareId={website.shareId} />
         </TabPanel>
         <TabPanel id="manage">

src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx

@@ -42,7 +42,7 @@ const ShareButton = ({ websiteId, shareId }) => {
         <Text>Share</Text>
       </Button>
       <Modal>
-        <Dialog title={formatMessage(labels.share)} style={{ width: 600 }}>
+        <Dialog title={formatMessage(labels.share)} style={{ width: 400 }}>
           {({ close }) => {
             return <WebsiteShareForm websiteId={websiteId} shareId={shareId} onClose={close} />;
           }}

src/app/(main)/websites/[websiteId]/reports/breakdown/BreakdownPage.tsx

@@ -43,7 +43,7 @@ const FieldsButton = ({ value, onChange }) => {
           <Text>Fields</Text>
         </Button>
         <Modal>
-          <Dialog title={formatMessage(labels.fields)}>
+          <Dialog title={formatMessage(labels.fields)} style={{ width: 400 }}>
             {({ close }) => (
               <FieldSelectForm selectedFields={value} onChange={onChange} onClose={close} />
             )}

src/components/common/ConfirmationForm.tsx

@@ -25,9 +25,7 @@ export function ConfirmationForm({
 
   return (
     <Form onSubmit={onConfirm} error={error}>
-      <Row marginY="4" gap="2">
+      <Row marginY="4">{message}</Row>
-        {message}
-      </Row>
       <FormButtons>
         <Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
         <FormSubmitButton

src/components/common/DataGrid.tsx

@@ -5,6 +5,7 @@ import { useMessages, useNavigation } from '@/components/hooks';
 import { Pager } from '@/components/common/Pager';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { PageResult } from '@/lib/types';
+import { Empty } from '@/components/common/Empty';
 
 const DEFAULT_SEARCH_DELAY = 600;
 
@@ -46,6 +47,10 @@ export function DataGrid({
     [search],
   );
 
+  if (data?.data?.length === 0) {
+    return <Empty />;
+  }
+
   return (
     <Column gap="4" minHeight="300px">
       {allowSearch && (data || search) && (