Task #514: Align note composer with folders rail
Original task: On the Notes page the "اكتب ملاحظة" composer sat alone in a full-width row above the content row, while the "المجلدات" FoldersRail started in the row below. Composer appeared high, rail visibly lower with empty space between them. Change: - Switched the folders+content row in `artifacts/tx-os/src/pages/notes.tsx` from flex to CSS grid: `grid md:grid-cols-[14rem_minmax(0,1fr)]`. Composer is placed in col 2 row 1, FoldersRail in col 1 (row-span-2 when composer is shown), content in col 2 row 2. Result: composer's top edge aligns with the rail's top edge on desktop and the empty gap is gone. - On mobile (`grid-cols-1`), `order-1 / order-2 / order-3` give the exact original mobile reading order: composer → rail → content. - Added a `className?: string` prop to `FoldersRail` (`artifacts/tx-os/src/components/notes/folders-rail.tsx`) appended to its root `<aside>`, so the page can pass grid placement classes. - Hidden-composer views (Inbox / Sent / Archived / Shared-with-me) collapse cleanly via conditional `md:row-span-2` on the rail and conditional `md:row-start-1 / md:row-start-2` on the content column — desktop becomes a simple two-cell row and mobile stays rail → content, matching the original behavior. - Grid-cols template, `md:col-start-2` on composer, and `md:col-start-2`/`md:row-start-*` on the content column are all GATED on `showFolders`. In views where the folders rail is hidden (Received/Inbox, Sent), the wrapper is a single-column grid with no left gutter and content takes the full width — preserving the original full-width layout for those views. Behavior preserved: - `showTopComposer` gating unchanged. - `data-testid="notes-top-composer"` preserved. - FoldersRail's existing internal classes unchanged; new className prop is purely additive. - Mobile reading order in active/non-shared view: composer → rail → content (same as before this task, when composer was a standalone block above the row). - Mobile reading order in hidden-composer views: rail → content (unchanged). Verification: `pnpm --filter @workspace/tx-os exec tsc --noEmit` passes. No test files reference the composer block by structural selectors that the move would break. No deviations from the plan.
This commit is contained in:
@@ -790,10 +790,16 @@ export default function NotesPage() {
|
||||
(Inbox / Sent / Archived / Shared-with-me) collapse cleanly
|
||||
to the original two-cell layout via conditional row-span
|
||||
/ row-start. */}
|
||||
<div className="flex-1 px-4 py-6 max-w-6xl w-full mx-auto grid gap-4 md:gap-x-6 md:gap-y-4 md:grid-cols-[14rem_minmax(0,1fr)]">
|
||||
<div
|
||||
className={`flex-1 px-4 py-6 max-w-6xl w-full mx-auto grid gap-4 md:gap-x-6 md:gap-y-4${
|
||||
showFolders ? " md:grid-cols-[14rem_minmax(0,1fr)]" : ""
|
||||
}`}
|
||||
>
|
||||
{showTopComposer && (
|
||||
<div
|
||||
className="order-1 md:order-none md:col-start-2 md:row-start-1"
|
||||
className={`order-1 md:order-none md:row-start-1${
|
||||
showFolders ? " md:col-start-2" : ""
|
||||
}`}
|
||||
data-testid="notes-top-composer"
|
||||
>
|
||||
<Composer
|
||||
@@ -818,8 +824,10 @@ export default function NotesPage() {
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className={`min-w-0 order-3 md:order-none md:col-start-2 ${
|
||||
showTopComposer ? "md:row-start-2" : "md:row-start-1"
|
||||
className={`min-w-0 order-3 md:order-none${
|
||||
showFolders
|
||||
? ` md:col-start-2 ${showTopComposer ? "md:row-start-2" : "md:row-start-1"}`
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{view === "active" && folderSelection.kind === "shared-folder" && (
|
||||
|
||||
Reference in New Issue
Block a user