/* ViewGems Mobile Edge-to-Edge Feed (mep5) — 2026-11-11 * * Feed post cards AND the composer, stories row and filter bar go * edge-to-edge ONLY on mobile browsers (< 640px, the theme's `sm` * breakpoint), Facebook-style: the cards/media bleed to the viewport * edges while the header / text / stats keep their 16px inset. * Desktop is untouched — everything below lives inside the media query. * (mep1 covered only the post cards; mep2 adds the composer, stories * row and filter bar per Jonathan: "it's fine, it all can go * full-width"; mep3 extends the composer and filter bar to the * profile / page / group / event timelines; mep4 extends edge-to-edge * to the four header cards — profile, group, page and event; mep5 * extends edge-to-edge to the Messages page — full-width AND * full-height on mobile.) * * Mechanism: the mobile inset comes from
* (_header.tpl), NOT from the elements themselves, so each element * cancels it with -1rem horizontal margins.
itself is NOT * touched. The three new elements sit in the same content panel as the * post cards (index.newsfeed.tpl:
, no padding of its own), so the same -1rem works * with no leftover side margin from any nested element. * * - `article.post` only (mep1, unchanged): the composer shares utility * classes but has no `.post` class. Reels, stories and the lightbox * use their own markup, not `article.post`. * - Radius is zeroed on the card AND on its rounded inner bars * (.post-footer, .post-approval, .post-top-alert, * .post-collaborative-alert) or the square card would keep rounded * inner corners top/bottom. * - Shadow: only the drop-shadow layer is zeroed, via --tw-shadow. * Tailwind v4 builds box-shadow from var(--tw-inset-shadow), * var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), * var(--tw-ring-shadow), var(--tw-shadow), so overriding --tw-shadow * keeps the pending-post dashed ring (which lives in * --tw-ring-shadow) intact. A `box-shadow: none` here would have * killed that ring. * - Boosted posts use rounded-3xl + squircle, not rounded-box, so a * rounded-box override would miss them — `border-radius: 0` on the * article covers both variants. * - Unlayered author CSS beats Tailwind v4's `@layer utilities`, and * `article.post` (0,1,1) beats the single-class utilities (0,1,0), * so this wins regardless of load order (the link also loads after * the theme CSS, via _js_files.tpl in the footer). * * Composer (`#publisher-trigger` + `div:has(> button.js_publisher-trigger)`): * - __publisher_trigger.tpl gives the trigger div id="publisher-trigger" * ONLY when $page == "index" (the feed). The same box on profile / * page / group / event timelines has no id, so mep3 pins those boxes * with :has() on the trigger button: js_publisher-trigger occurs * exactly once in the whole theme, as a direct child of this div. * The :has() rule also matches the feed box, which is already * covered — no visual change there. * - The box is `rounded-box bg-base-100 p-3 shadow-surface sm:px-4`: * border-radius 0 covers rounded-box; --tw-shadow 0 covers * shadow-surface (verified in the compiled theme CSS: shadow-surface * sets --tw-shadow and builds box-shadow from it, with no ring * layer of its own, so there is no ring to preserve here). * - Its own p-3 / sm:px-4 padding stays, so the avatar and the * "What's on your mind?" pill keep their inset, like post text. * * Stories row (`.js_stories`): * - The class exists ONLY in index.newsfeed.tpl (the feed stories * strip), so there is no side effect on any other surface. The * stories viewer is a separate modal built by stories.js and is * untouched; the story cards inside the strip keep their rounded-2xl * shape — only the strip itself bleeds to the edges. * - The strip is a bare scroll container (no background, radius or * shadow), so only the -1rem margins are needed. Its prev/next * arrows are absolute start-0/end-0 and hidden on coarse pointers, * so they are unaffected on mobile. * * Filter bar — feed (`div.flex.items-center.gap-3:has(> div.dropdown...)`): * - The feed filter row is the bare `
` rendered from the `_feed_filters` capture * (index.newsfeed.tpl:113, output at :368) for the '', 'popular' and * 'discover' views. It has no id or distinctive class of its own, * so it is pinned with :has(): its first child is the Recent / * Popular / Discover switcher, `div.dropdown.relative.inline-flex * .min-w-0` — a class combination that exists nowhere else in the * theme templates (verified by grep). The selector therefore matches * exactly two rows: this one and the identical boosted-views filter * row (index.newsfeed.tpl:73), which is the same kind of bar on the * same page and goes full-width with it. Guests get the same row * (without the posts-filter select), so the selector deliberately * does NOT depend on select.js_posts-filter. * - The row has no background, radius or shadow, so only the -1rem * margins are needed; the pill buttons inside keep their own shape. * * Timeline filter bar (`div.posts-filter.flex`, mep3): * - _posts.tpl:3 renders `
` on profile / page / group / event * timelines. The selector uses `.posts-filter.flex` (NOT bare * `.posts-filter`) so the "Pinned Post" / "Promoted Posts" label * divs in _pinned_post.tpl / _boosted_post.tpl are NOT matched. * It also covers the group/event Pending Posts bar, which is the * same kind of bar. Feed/search never render this bar * (_no_filter=true). * - The bar has no background, radius or shadow, so only the -1rem * margins are needed; its border-b bleeds edge-to-edge with it. * * Header cards — profile / group / page / event (mep4): * - All four header cards share the identical outer structure: a bare * `
` (no id, no shadow) * whose first child is `.profile-cover-wrapper`: * __profile_header.tpl:5 (profile-name), __group_profile_header.tpl:2 * (group-name), __page_profile_header.tpl:2 (page-name), * __event_profile_header.tpl:2 (event-name). * - The card has no margin of its own; its parent * `
` has no * padding, so the whole inset is
's px-4 and the same -1rem * trick applies. border-radius 0 covers rounded-3xl. * - The cover wrapper keeps its own `rounded-t-3xl`, so it is zeroed * too or the square card would keep rounded top corners. * - Selector is `section:has(> .profile-cover-wrapper)` — NOT bare * `section.rounded-3xl` / `.rounded-3xl`, which would also match the * generic __page_header.tpl listing banner (games / directory / * started pages), the page/event tab navs, and `section.card * .rounded-3xl` sub-view panels. profile-cover-wrapper occurs in * exactly those four templates in the whole theme, always as the * direct first child of the outer section (verified by grep). * - No shadow handling: these sections carry no shadow class, so no * --tw-shadow override and NO `box-shadow: none` anywhere. * - Deliberately untouched: inner px-4 content containers (text inset, * Facebook pattern), .profile-avatar-wrapper (avatar/logo + ring + * story ring), .profile-buttons-wrapper and all buttons, the zodiac * badge (.vg-name-slot / .vg-name-badge), the Life Path circle * (.vg-cover-slot / .vg-cover-badge), the Thoughts bubble mount * (#vg-tht-profile), cover edit controls (.profile-cover-change, * #profile-cover-menu / #group-cover-menu / #page-cover-menu / * #event-cover-menu), the event date tile (time.rounded-2xl), pills, * tab navs (__page_nav.tpl, __event_nav.tpl), the generic * __page_header.tpl banner. No template changes — CSS-only. * * Messages page — full-width + full-height (mep5): * - The whole page (inbox list AND thread) lives in one template, * messages.tpl: outer wrapper `div.sg-offcanvas.group/offcanvas` * (:5) and the visible card `div.card` (:6, DaisyUI --radius-box * 12px). The wrapper cancels main's px-4/pt-4/pb-4 with -1rem on * all four sides; the card loses its radius and its 1px outer * border so no frame line shows at the viewport edges. * - The sidebar's border-e is the threads/conversation divider on * desktop; below 640px the other pane is hidden, so it would be a * stray 1px line at the screen edge — zeroed here. * - Height already comes from the shell's dvh calc * (_header.tpl:30, h-[calc(100dvh-4.75rem-...)]) — no viewport * units, no 100vh; the 4.75rem bottom-bar reserve is kept so the * composer never slides under the fixed pill bar. Card height * gains the 32px of main padding; the gap below the card shrinks * 24px → 8px (shell bottom to bar top). * - Selector is `main.site-content > div.sg-offcanvas.group\/offcanvas` * — NOT bare `.sg-offcanvas` / `.card`: `group/offcanvas` occurs * in exactly one place theme-wide (messages.tpl:5); other * sg-offcanvas openers are old Bootstrap status pages whose .card * is a GRANDCHILD, excluded by the `> .card` child combinator. * - The large empty area below a short thread list is INSIDE the * card (the scroller already fills the card height) — no height * change can fill it; the bleed makes it read as a full-screen * messenger surface instead of a floating card. * - Caveat: size_messages_scroller() (core/chat.js:678–699) sizes * the thread scroller with an INLINE pixel height and reads * main's paddingBottom, so zeroing main's pb-4 self-corrects in * its math — but the inline height goes stale until the next * resize / thread-open / pin event. No JS changed here. * - Inner insets stay (Facebook pattern): sidebar header px-4, * list px-2, conversation header px-4 sm:px-5, message area px-4 * sm:px-6, composer — all untouched. */ @media (max-width: 639px) { article.post { margin-left: -1rem; margin-right: -1rem; border-radius: 0; --tw-shadow: 0 0 #0000; } article.post .post-footer, article.post .post-approval, article.post .post-top-alert, article.post .post-collaborative-alert { border-radius: 0; } /* composer — feed + all timelines. Every timeline renders the same __publisher_trigger.tpl box, but only the feed ($page == "index") gets id="publisher-trigger", so pin the timeline boxes with :has() on the trigger button (js_publisher-trigger occurs exactly once in the theme, as a direct child of this div). Also matches the feed box, which is already covered — no visual change there. Its own p-3/sm:px-4 padding stays; --tw-shadow zeroing is safe (shadow-surface sets only --tw-shadow, no ring layer). */ #publisher-trigger, div:has(> button.js_publisher-trigger) { margin-left: -1rem; margin-right: -1rem; border-radius: 0; --tw-shadow: 0 0 #0000; } /* stories row — feed only (class exists only in index.newsfeed.tpl) */ .js_stories { margin-left: -1rem; margin-right: -1rem; } /* filter bar — feed + boosted-views filter rows (see header comment) */ div.flex.items-center.gap-3:has(> div.dropdown.relative.inline-flex.min-w-0) { margin-left: -1rem; margin-right: -1rem; } /* timeline filter bar — _posts.tpl:3. .posts-filter.flex (NOT bare .posts-filter) so the "Pinned Post" / "Promoted Posts" label divs in _pinned_post.tpl / _boosted_post.tpl are NOT matched. No background/radius/shadow on this bar, so margins only; its border-b bleeds edge-to-edge with it. Also covers the group/event Pending Posts bar. Feed/search never render this bar (_no_filter=true). */ div.posts-filter.flex { margin-left: -1rem; margin-right: -1rem; } /* header cards — profile / group / page / event (mep4). The outer section is pinned with :has() on its first child .profile-cover-wrapper (occurs in exactly those four templates, always as the direct first child). The cover wrapper's own rounded-t-3xl is zeroed too. No shadow on these sections, so no shadow handling. Inner px-4 content, avatar, buttons, badges, Thoughts mount and cover controls are untouched (see header). */ section:has(> .profile-cover-wrapper) { margin-left: -1rem; margin-right: -1rem; border-radius: 0; } section:has(> .profile-cover-wrapper) > .profile-cover-wrapper { border-radius: 0; } /* messages — full-width + full-height on mobile (mep5). Outer wrapper (messages.tpl:5) cancels main's px-4/pt-4/pb-4 with -1rem on all four sides; the card (messages.tpl:6) loses its 12px radius (DaisyUI --radius-box) and its 1px outer border so no frame line shows at the viewport edges. The sidebar's border-e is the threads/conversation divider on desktop; below 640px the other pane is hidden, so it would be a stray 1px line at the screen edge. Stops at the shell bottom: the 4.75rem bottom-bar reserve is kept, so the composer never slides under the fixed bottom bar. */ main.site-content > div.sg-offcanvas.group\/offcanvas { margin-left: -1rem; margin-right: -1rem; margin-top: -1rem; margin-bottom: -1rem; } main.site-content > div.sg-offcanvas.group\/offcanvas > .card { border-radius: 0; border-width: 0; } main.site-content > div.sg-offcanvas.group\/offcanvas .sg-offcanvas-sidebar { border-inline-end-width: 0; } }