Improve the mobile experience (post editor + app-wide polish) - #187
Merged
Conversation
- TabsList scrolls horizontally instead of overflowing the page - DialogContent caps height with internal scroll; DialogScrollContent gets the mobile width gutter - SidebarTrigger tap target bumped to 36px
- Top switcher (Compose / Channels / Preview / Comments) reveals the panel that was hidden below lg - Sticky bottom action bar puts schedule/publish/delete within thumb reach - Composer media actions and comment toolbar are visible on touch (no hover needed); media grid is 3-up - Clamp media picker and emoji picker widths to the viewport
Uploads/Unsplash/Giphy card actions are visible on touch instead of hover-only, without the dark scrim on small screens.
Non-wrapping justify-between headers now stack below sm; fixed-width searches go full-width. Calendar header wraps and seeds isMobile at setup to avoid the month-grid flash.
The node builder is gated to lg+ (its fixed side panels no longer overflow a phone); below lg it shows a 'works best on a larger screen' notice. Automation tabs scroll instead of cutting off.
PageHeader downscales on phones; workspace switcher opens within the viewport; OAuth page-selects go icon-only + truncate; invite info rows truncate.
- NotificationBell panel was fixed at left-[17rem] w-[22rem] and ran off-screen on a phone; now full-width-with-margins below sm - Reserve top space for the floating sidebar trigger so page headings no longer sit under the hamburger on mobile - automations/Index header stacks on mobile (was the one index page the first pass missed) - Contain the preview phone mockup horizontally so it never breaks the page on narrow screens - Comment bodies wrap long unbroken tokens (break-words)
- Restore desktop tab spacing (lg:gap-6) on the automation tabs - break-words / viewport width caps on the AI review chips, lightbox alt overlay, and pick-time popover - Remove the now-unused hoveredCommentId state after the comment toolbar became touch-visible
…ckup fits pixel-perfect
…dding The 380px mockup frame is wider than a phone viewport, so it sat edge-to-edge. Scale it to 90% below lg (origin top-center keeps it centered) so there's clean symmetric padding to the screen edges. Reverts the now-redundant px-2 container tweak back to px-4.
- AutomationHeader reserves space for the floating hamburger on mobile (its full-width pages had the back button under the trigger) - AlertDialogContent caps height + scrolls like DialogContent - AiGenerateDialog preview wraps long tokens (break-words) - Enlarge notification panel action buttons on the full-width mobile panel (max-sm:size-9) - min-w-0 so the billing processing title-bar label can truncate
The mobile grid column was implicit (auto), so it sized to content — a long workspace name (truncate = nowrap, wide intrinsic size) stretched the form column to its max-w-lg (512px) and overflowed a 375px viewport by ~31px on the workspaces list. Make the column an explicit minmax(0,1fr) track and give the grid item min-w-0 so it stays within the viewport and the name truncates. Found by a runtime horizontal-overflow check; adds MobileOverflowTest guarding it across the layout variants (AuthLayout, default, full-width editor, detail).
overflow-x-auto forces overflow-y to auto too, so the tab triggers' border and shadow were clipped at the list edges (visible on the editor Preview/Channels/ Comments tabs). Drop the fixed h-10 and pad the list (p-1) so the scroll container has room around the buttons on all sides.
The scheduled and editable states each rendered their own copy; the actions component already decides internally what to show, so it only needs one instance pushed right with ml-auto.
- Show/hide the date picker and view switcher with Tailwind (lg:hidden / hidden lg:block) instead of the isMobile ref; isMobile now only drives effectiveView (which changes navigation behavior, not just visibility) - Full-width buttons on mobile: prev / Today (fills) / next, and the date picker fills the row next to New post
Matches the date-range picker below it instead of sitting content-width.
Search, label filter, and New post each take their own full-width row below sm (inline on desktop). The label filter trigger goes full-width to match.
Split the header into a dedicated mobile layout (< lg) and the desktop grid. Mobile is two clean rows: prev / date picker (fills) / next, then Today + full-width New post. Fixes the stretched, styleless Today button. Each header owns its own controls, so the date picker and view switcher no longer need lg:hidden / hidden lg:block toggles.
…l-width New post below Move Today up with prev/next, keep the date picker compact on the right instead of full-width, and give New post its own full-width row.
The floating hamburger was size-9 (36px) next to size-10 (40px) icon buttons, so it read as too small. Bump it to size-10 to match.
Move the floating hamburger from left-2/top-2 to left-4/top-3 so it lines up with the header's content padding (and the calendar's nav buttons); bump the non-header page top reserve to pt-14 to clear the taller trigger.
Stack it into a clean back-button row and a date + status row (date left, badge right) instead of cramming everything into one line where the date wrapped and the badge floated.
On mobile the header was a whole bar showing only the Draft/Saving/Saved status. Move that status into the switcher bar (right side) and hide the header on mobile (the scheduled banner still shows), reclaiming a row. The switcher clears the floating hamburger when it's the top bar.
… button Match the switcher tab height to the sidebar trigger (h-10), and let the primary publish button fill the footer (flex-1) on mobile while staying auto-width on desktop.
Use py-3 so the tabs sit at the same vertical position as the top-3 hamburger, and rounded-md so the tab corners match the trigger.
It's only the autosave indicator (Draft/Saving/Saved) and it crowded the tabs. Drop it from the mobile switcher (the desktop header still shows it) so the tabs get the full bar.
- automations: minimal back-only header on mobile for the workflow builder and detail tabs (extracted AutomationMobileBackHeader); open live automations on the metrics tab (drafts still open on workflow); full-width status filter + refresh on the invocations toolbar; use IconMenu2 for the mobile sidebar trigger - dialogs: stack DialogFooter primary-on-top / cancel-at-bottom on mobile - workspaces: bring the workspace picker cards into the neo-brutalist design - posts: left-align the label filter content; wrap the post-view date/status header so a long status badge no longer squeezes the date; add hamburger clearance to the editor's mobile tab bar
…editor banner The scheduled-post banner in the editor now clears the floating sidebar trigger on mobile (pl-12 md:pl-0), aligns its calendar icon to the top of the text, and matches the hamburger's size (size-10 md:size-9). Desktop is unchanged.
…atching icon The workspace switcher now opens to the right on desktop (like the user menu) and stays below the trigger on mobile, via useSidebar()'s isMobile. The trigger icon follows the direction: chevron-right on desktop, an up/down selector on mobile — for both the workspace switcher and the user menu.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #184
Makes TryPost comfortable on a phone, with the post editor as the priority. Desktop (
lg+) is unchanged.Highlights
Post editor (the priority)
Compose · Channels · Preview · Comments) surfaces the right-hand panel that was previouslyhidden lg:block— on a phone you can now pick platforms, preview each network, and read/leave comments. On mobile it's one aligned bar (hamburger + tabs); the autosave status stays on the desktop header.App-wide
lg+(fixed side panels no longer overflow a phone) with a "works best on a larger screen" notice; automation tabs scroll; the detail header clears the mobile hamburger.PageHeader, in-viewport workspace & notifications panels, floating-hamburger clearance, truncation polish, and anAuthLayoutthat no longer overflows with wide content.Out of scope (deliberate)
Automated testing
php artisan test --parallel).pintandeslintclean.✅ Manual QA checklist — test on a real phone before merge
Post editor (the priority)
Post view (a published / scheduled post)
Media gallery (Assets)
Lists, calendar & navigation
[<] Today [>]+ a compact date picker; row 2 = full-width New post; day view is usable; the hamburger lines up with the nav buttonsSettings
Automations
Accounts & OAuth
Auth (guest, logged out)
Sanity (every page)
main