From 685e208212f9ebc77aa75dfba767a7247de1116e Mon Sep 17 00:00:00 2001
From: Amr Mohammed El-Sheraey <141947355+AmrMsCLL@users.noreply.github.com>
Date: Sun, 11 Oct 2026 15:09:31 +0300
Subject: [PATCH] fix: layouts that broke on phones, even form spacing and
 graphite-ui 0.4.2

---
 app/frontend/package.json                           | 2 +-
 app/frontend/src/components/EventEditor.tsx         | 2 +-
 app/frontend/src/components/Page.tsx                | 2 +-
 app/frontend/src/components/StatementImport.tsx     | 4 ++--
 app/frontend/src/components/TaskEditor.tsx          | 2 +-
 app/frontend/src/dashboard/Dashboard.tsx            | 2 +-
 app/frontend/src/pages/settings/ApiSettings.tsx     | 6 ++++--
 app/frontend/src/pages/settings/ProfileSettings.tsx | 2 +-
 app/frontend/src/pages/spaces/SpaceMembers.tsx      | 2 +-
 app/frontend/src/pages/spaces/TidyRules.tsx         | 4 ++--
 app/frontend/src/spaces.tsx                         | 2 +-
 app/package-lock.json                               | 8 ++++----
 12 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/app/frontend/package.json b/app/frontend/package.json
index 46f098c..f2143e7 100644
--- a/app/frontend/package.json
+++ b/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",
diff --git a/app/frontend/src/components/EventEditor.tsx b/app/frontend/src/components/EventEditor.tsx
index 873960a..efa4402 100644
--- a/app/frontend/src/components/EventEditor.tsx
+++ b/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}
diff --git a/app/frontend/src/components/Page.tsx b/app/frontend/src/components/Page.tsx
index ea9f4d6..99369a5 100644
--- a/app/frontend/src/components/Page.tsx
+++ b/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>
   );
 }
diff --git a/app/frontend/src/components/StatementImport.tsx b/app/frontend/src/components/StatementImport.tsx
index ec0f6fb..d47fb4a 100644
--- a/app/frontend/src/components/StatementImport.tsx
+++ b/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>
diff --git a/app/frontend/src/components/TaskEditor.tsx b/app/frontend/src/components/TaskEditor.tsx
index 49ea232..53c95b8 100644
--- a/app/frontend/src/components/TaskEditor.tsx
+++ b/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)} />
diff --git a/app/frontend/src/dashboard/Dashboard.tsx b/app/frontend/src/dashboard/Dashboard.tsx
index a2c753a..37fa237 100644
--- a/app/frontend/src/dashboard/Dashboard.tsx
+++ b/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} />
diff --git a/app/frontend/src/pages/settings/ApiSettings.tsx b/app/frontend/src/pages/settings/ApiSettings.tsx
index 51989de..76cad1f 100644
--- a/app/frontend/src/pages/settings/ApiSettings.tsx
+++ b/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) => (
diff --git a/app/frontend/src/pages/settings/ProfileSettings.tsx b/app/frontend/src/pages/settings/ProfileSettings.tsx
index 5e4030e..adfd4fd 100644
--- a/app/frontend/src/pages/settings/ProfileSettings.tsx
+++ b/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}
diff --git a/app/frontend/src/pages/spaces/SpaceMembers.tsx b/app/frontend/src/pages/spaces/SpaceMembers.tsx
index 9361d08..317fcf4 100644
--- a/app/frontend/src/pages/spaces/SpaceMembers.tsx
+++ b/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">
diff --git a/app/frontend/src/pages/spaces/TidyRules.tsx b/app/frontend/src/pages/spaces/TidyRules.tsx
index ff7e654..106ae33 100644
--- a/app/frontend/src/pages/spaces/TidyRules.tsx
+++ b/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=""
diff --git a/app/frontend/src/spaces.tsx b/app/frontend/src/spaces.tsx
index da59f75..f383d05 100644
--- a/app/frontend/src/spaces.tsx
+++ b/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>
diff --git a/app/package-lock.json b/app/package-lock.json
index 052aa31..405410d 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -24,7 +24,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",
@@ -2086,9 +2086,9 @@
       }
     },
     "node_modules/@project-graphite/ui": {
-      "version": "0.4.0",
-      "resolved": "https://github.com/project-graphite/graphite-ui/releases/download/v0.4.0/project-graphite-ui-0.4.0.tgz",
-      "integrity": "sha512-Yr61VvTfOI8SLjDhpL/Vzm0FI5HVTTwFMETVHSG5kC3GjiAFOYFK2/53injnKPsd9NyPiFFmESJGlv7kIshX8A==",
+      "version": "0.4.2",
+      "resolved": "https://github.com/project-graphite/graphite-ui/releases/download/v0.4.2/project-graphite-ui-0.4.2.tgz",
+      "integrity": "sha512-A3J6EPvHiLvo0kxHYBhoEFLq8SnCyAMwlaTKRb4Uxb/Udv35sGJuU/t8NbS8NchBf3LPR22ZXXV5KgUbtNQvsg==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^19.0.0",