fix: layouts that broke on phones, even form spacing and graphite-ui 0.4.2

app/frontend/package.json

@@ -28,7 +28,7 @@
     "@excalidraw/excalidraw": "0.18.1",
     "@hocuspocus/provider": "4.7.0",
     "@mozilla/readability": "0.6.0",
-    "@project-graphite/ui": "https://github.com/project-graphite/graphite-ui/releases/download/v0.4.0/project-graphite-ui-0.4.0.tgz",
+    "@project-graphite/ui": "https://github.com/project-graphite/graphite-ui/releases/download/v0.4.2/project-graphite-ui-0.4.2.tgz",
     "@tiptap/core": "3.31.4",
     "@tiptap/extension-collaboration": "3.31.4",
     "@tiptap/extension-collaboration-caret": "3.31.4",

app/frontend/src/components/EventEditor.tsx

@@ -79,7 +79,7 @@ export function EventEditor({
             options={spaceOptions(editable)}
           />
         )}
-        <div className="grid gap-x-4 gap-y-1 sm:grid-cols-2">
+        <div className="grid gap-4 sm:grid-cols-2">
           <DatePicker
             defaultValue={event?.startsOn ?? startsOn ?? ''}
             error={form.errors.startsOn}

app/frontend/src/components/Page.tsx

@@ -51,7 +51,7 @@ export function Toolbar({ actions, children }: { actions?: ReactNode; children?:
   return (
     <div className="flex flex-wrap items-center gap-3">
       <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">{children}</div>
-      {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+      {actions && <div className="flex flex-wrap items-center gap-2">{actions}</div>}
     </div>
   );
 }

app/frontend/src/components/StatementImport.tsx

@@ -56,7 +56,7 @@ export function StatementImport({ defaultCurrency, onClose, onAdded }: { default
         <input accept=".csv,text/csv" aria-label="Statement file" onChange={(event) => event.currentTarget.files?.[0] && void read(event.currentTarget.files[0])} type="file" />
         {rows && (
           <>
-            <div className="grid gap-3 sm:grid-cols-2">
+            <div className="grid gap-4 sm:grid-cols-2">
               {columnSelect('Date column', 'date')}
               {columnSelect('Description column', 'description')}
               {columnSelect('Amount column', 'amount')}
@@ -101,7 +101,7 @@ export function StatementImport({ defaultCurrency, onClose, onAdded }: { default
                 })}
               </ul>
             )}
-            <div className="grid gap-3 sm:grid-cols-2">
+            <div className="grid gap-4 sm:grid-cols-2">
               <Select label="Add to" onChange={setSpaceId} options={spaceOptions(editable)} value={target ?? ''} />
               <Select label="Currency" onChange={setCurrency} options={currencyOptions(allCurrencies)} searchable value={currency} />
             </div>

app/frontend/src/components/TaskEditor.tsx

@@ -104,7 +104,7 @@ export function TaskEditor({
             value={title}
             {...form.field('title')}
           />
-          <div className="grid gap-x-4 gap-y-1 sm:grid-cols-2">
+          <div className="grid gap-4 sm:grid-cols-2">
             <DatePicker defaultValue={task?.dueDate ?? ''} disabled={!editable} label="Due date" name="dueDate" />
             <TimePicker defaultValue={task?.dueTime ?? ''} disabled={!editable} label="Time" name="dueTime" />
             <Select defaultValue={task?.repeatRule ?? ''} disabled={!editable} label="Repeats" name="repeatRule" options={repeatOptions(task?.repeatRule)} />

app/frontend/src/dashboard/Dashboard.tsx

@@ -365,7 +365,7 @@ export function DashboardHome() {
         <Dialog onClose={() => setConfiguring(false)} title="Dashboard settings">
           <div className="mt-5 grid gap-4">
             <TextField label="Name" maxLength={40} onChange={(event) => setName(event.currentTarget.value)} value={name} />
-            <fieldset className="m-0 grid gap-x-4 border-0 p-0 sm:grid-cols-3">
+            <fieldset className="m-0 grid gap-4 border-0 p-0 sm:grid-cols-3">
               <legend className="field-label mb-1.5 p-0">Opens by itself</legend>
               <TimePicker emptyLabel="Any time" label="From" onChange={(from) => setSchedule({ ...schedule, from })} value={schedule.from} />
               <TimePicker emptyLabel="Any time" label="Until" onChange={(until) => setSchedule({ ...schedule, until })} value={schedule.until} />

app/frontend/src/pages/settings/ApiSettings.tsx

@@ -67,8 +67,10 @@ export function ApiSettings() {
           </p>
           {reference.data.scopes.map(({ scope, routes }) => (
             <details className="rounded-lg border border-line p-3" key={scope}>
-              <summary className="cursor-pointer text-ink">
-                <span className="mono-sm">{scope}</span> · {routes.length} endpoints
+              <summary className="text-ink">
+                <span>
+                  <span className="mono-sm">{scope}</span> · {routes.length} endpoints
+                </span>
               </summary>
               <ul className="m-0 mt-2 grid list-none gap-0.5 p-0">
                 {routes.map((route) => (

app/frontend/src/pages/settings/ProfileSettings.tsx

@@ -61,7 +61,7 @@ export function ProfileSettings() {
             }, 'Could not save your profile');
           }}
         >
-          <div className="grid gap-x-4 gap-y-1 sm:grid-cols-2">
+          <div className="grid gap-4 sm:grid-cols-2">
             <TextField
               autoComplete="name"
               defaultValue={current.displayName}

app/frontend/src/pages/spaces/SpaceMembers.tsx

@@ -55,7 +55,7 @@ export function SpaceMembers() {
       </Toolbar>
       <ul className="panel-rows">
         {members.data.map((member) => (
-          <li className="panel-row flex items-center justify-between gap-4" key={member.userId}>
+          <li className="panel-row flex flex-wrap items-center justify-between gap-x-4 gap-y-3" key={member.userId}>
             <div className="flex min-w-0 items-center gap-3">
               <Avatar name={member.displayName} />
               <div className="min-w-0">

app/frontend/src/pages/spaces/TidyRules.tsx

@@ -84,7 +84,7 @@ export function TidyRules({ tags }: { tags: Tag[] }) {
       ) : (
         <ul className="panel-rows">
           {rules.data.map((rule) => (
-            <li className="panel-row flex items-center justify-between gap-4" key={rule.id}>
+            <li className="panel-row flex flex-wrap items-center justify-between gap-x-4 gap-y-3" key={rule.id}>
               <div className="min-w-0">
                 <p className="m-0 flex flex-wrap items-center gap-2 text-ink">
                   {ruleText(rule)} → <TagChip color={rule.tag.color} label={rule.tag.name} />
@@ -145,7 +145,7 @@ export function TidyRules({ tags }: { tags: Tag[] }) {
           title="New rule"
         >
           <TextField autoFocus label="Title contains" maxLength={100} {...form.field('titleContains')} />
-          <div className="grid gap-x-4 sm:grid-cols-2">
+          <div className="grid gap-4 sm:grid-cols-2">
             <Select defaultValue="" label="File type" name="fileType" options={[{ value: '', label: 'Any' }, ...Object.entries(fileTypeNames).map(([value, label]) => ({ value, label }))]} />
             <Select
               defaultValue=""

app/frontend/src/spaces.tsx

@@ -111,7 +111,7 @@ export function NameAndColorFields({
   name?: string;
 }) {
   return (
-    <div className="grid gap-2">
+    <div className="grid gap-4">
       <TextField autoFocus defaultValue={name} label="Name" maxLength={maxLength} {...field} />
       <ColorSwatches defaultValue={color} label="Colour" name="color" />
     </div>