DONT MERGE Mobile responsive redesign: immersive feed, nav, dark theme#190
Draft
DONT MERGE Mobile responsive redesign: immersive feed, nav, dark theme#190
Conversation
Force dark theme on mobile/tablet (< 1024px) via media query for immersive video experience. Add new design tokens for mobile layout: fg-on-surface-variant, fg-on-surface-disabled, bg-scrim, top-bar-height, bottom-nav-height, and feed-height. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
… mode Move the sidebar/header/bottom-nav responsive breakpoint from md (768px) to lg (1024px) so tablets get the mobile chrome instead of the desktop sidebar. This prepares for ImmersiveTopBar and MobileDrawer components that will serve the < lg viewport. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- ImmersiveTopBar renders on mobile/tablet (< lg) with transparent mode on feed pages and solid mode on other pages - Route-based title: Home, Discover, Search, Notifications, Profile, etc. - Remove AppHeader from mobile (ImmersiveTopBar replaces it, sidebar handles desktop) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Deploying divine-web with
|
| Latest commit: |
b58b0f9
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://e5ecff88.divine-web.pages.dev |
| Branch Preview URL: | https://phase1-mobile-responsive-red.divine-web.pages.dev |
🚀 Preview Deployment
|
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
rabble
changed the title
Mobile dark mode is forced via CSS variable overrides at max-width 1023px, but Tailwind dark: variants only activate with the .dark class. Added max-lg: variants to mirror dark: styles on mobile for comment cards, reply previews, avatar rings, and delete dialog backgrounds/text. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Remove {user && ...} guards on Camera, Notifications, Profile
- Add useLoginDialog to prompt auth when logged-out users tap protected items
- Change Compass icon to Search to match Figma design
- Improve isActive matching for sub-paths
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
rabble
changed the title
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.
Summary
Full mobile/tablet responsive redesign matching the Figma mobile designs. Transforms the web experience at < 1024px into an immersive, dark-themed, TikTok-style video feed while leaving desktop completely untouched.
Phase 1: Nav Shell + Dark Theme
@media (max-width: 1023px)md:→lg:so tablets get immersive experiencePhase 2: Immersive Feed
snap-y snap-mandatory), keyboard nav (j/k, arrows), auto-load morePhase 3: Dark Mode Polish
What's NOT changed
Design reference
UI-Designframe1837:33066Test plan
🤖 Generated with Claude Code