GRIN/eranos
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

Use custom sidebar breakpoint (688px) for mobile/desktop toggle

Browse Source 
The mobile layout now activates the moment the left sidebar would need
to shrink — at 688px (72px sidebar + 600px feed + padding). Added a
custom `sidebar` Tailwind screen breakpoint and replaced all `md:`
references that control the sidebar/mobile toggle with `sidebar:`.

This ensures the bottom nav, top bar, drawer, FAB, and full-width feed
kick in precisely when the sidebar can no longer fit alongside the feed.

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy
2026-02-16 17:17:37 -06:00
parent be5cb2180f
commit 7740c63328
13 changed files with 23 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Feed.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ export function Feed() {
const { data: events, isLoading } = useFeed(activeTab);
return (
<main className="flex-1 min-w-0 md:max-w-[600px] md:border-x border-border min-h-screen">
<main className="flex-1 min-w-0 sidebar:max-w-[600px] sidebar:border-x border-border min-h-screen">
{/* Compose area */}
<ComposeBox compact />
src/components/FloatingComposeButton.tsx
+1 -1
View File
@@ -15,7 +15,7 @@ export function FloatingComposeButton() {
<>
<Button
onClick={() => setOpen(true)}
className="fixed bottom-20 right-4 z-30 md:hidden size-14 rounded-full shadow-lg bg-primary hover:bg-primary/90 text-primary-foreground"
className="fixed bottom-20 right-4 z-30 sidebar:hidden size-14 rounded-full shadow-lg bg-primary hover:bg-primary/90 text-primary-foreground"
size="icon"
>
<Pencil className="size-6" />
src/components/MainLayout.tsx
+3 -3
View File
@@ -27,8 +27,8 @@ export function MainLayout({ children, hideMobileTopBar }: MainLayoutProps) {
{/* Main layout - three column on desktop */}
<div className="flex justify-center min-h-screen">
{/* Desktop left sidebar - hidden on mobile */}
<div className="hidden md:block">
{/* Desktop left sidebar - hidden below sidebar breakpoint */}
<div className="hidden sidebar:block">
<LeftSidebar />
</div>
@@ -46,7 +46,7 @@ export function MainLayout({ children, hideMobileTopBar }: MainLayoutProps) {
<FloatingComposeButton />
{/* Bottom padding spacer for mobile bottom nav */}
<div className="h-16 md:hidden" />
<div className="h-16 sidebar:hidden" />
</>
);
}
src/components/MobileBottomNav.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export function MobileBottomNav() {
const location = useLocation();
return (
<nav className="fixed bottom-0 left-0 right-0 z-20 flex items-center bg-background/95 backdrop-blur-md border-t border-border md:hidden safe-area-bottom">
<nav className="fixed bottom-0 left-0 right-0 z-20 flex items-center bg-background/95 backdrop-blur-md border-t border-border sidebar:hidden safe-area-bottom">
<NavTab
to="/"
icon={<Home className={cn("size-5", location.pathname === '/' && "fill-foreground")} />}
src/components/MobileTopBar.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ export function MobileTopBar({ onAvatarClick }: MobileTopBarProps) {
const { user, metadata } = useCurrentUser();
return (
<header className="sticky top-0 z-20 flex items-center justify-between px-4 py-2 bg-background/80 backdrop-blur-md border-b border-border md:hidden">
<header className="sticky top-0 z-20 flex items-center justify-between px-4 py-2 bg-background/80 backdrop-blur-md border-b border-border sidebar:hidden">
{/* Left: user avatar or login */}
<div className="w-10">
{user ? (
src/pages/HashtagPage.tsx
+1 -1
View File
@@ -32,7 +32,7 @@ export function HashtagPage() {
return (
<MainLayout hideMobileTopBar>
<main className="flex-1 min-w-0 md:max-w-[600px] md:border-x border-border min-h-screen">
<main className="flex-1 min-w-0 sidebar:max-w-[600px] sidebar:border-x border-border min-h-screen">
<div className="flex items-center gap-4 px-4 py-3 sticky top-0 bg-background/80 backdrop-blur-md z-10 border-b border-border">
<Link to="/" className="p-2 rounded-full hover:bg-secondary transition-colors">
<ArrowLeft className="size-5" />
src/pages/NotFound.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ const NotFound = () => {
return (
<MainLayout hideMobileTopBar>
<main className="flex-1 min-w-0 md:max-w-[600px] md:border-x border-border min-h-screen flex items-center justify-center">
<main className="flex-1 min-w-0 sidebar:max-w-[600px] sidebar:border-x border-border min-h-screen flex items-center justify-center">
<div className="text-center px-8">
<h1 className="text-6xl font-bold mb-4 text-primary">404</h1>
<p className="text-xl text-muted-foreground mb-6">This page doesn't exist.</p>
src/pages/NotificationsPage.tsx
+1 -1
View File
@@ -41,7 +41,7 @@ export function NotificationsPage() {
return (
<MainLayout hideMobileTopBar>
<main className="flex-1 min-w-0 md:max-w-[600px] md:border-x border-border min-h-screen">
<main className="flex-1 min-w-0 sidebar:max-w-[600px] sidebar:border-x border-border min-h-screen">
<div className="flex items-center gap-4 px-4 py-3 sticky top-0 bg-background/80 backdrop-blur-md z-10 border-b border-border">
<Link to="/" className="p-2 rounded-full hover:bg-secondary transition-colors">
<ArrowLeft className="size-5" />
src/pages/PlaceholderPage.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ export function PlaceholderPage({ title, description }: PlaceholderPageProps) {
return (
<MainLayout hideMobileTopBar>
<main className="flex-1 min-w-0 md:max-w-[600px] md:border-x border-border min-h-screen">
<main className="flex-1 min-w-0 sidebar:max-w-[600px] sidebar:border-x border-border min-h-screen">
<div className="flex items-center gap-4 px-4 py-3 sticky top-0 bg-background/80 backdrop-blur-md z-10 border-b border-border">
<Link to="/" className="p-2 rounded-full hover:bg-secondary transition-colors">
<ArrowLeft className="size-5" />
src/pages/ProfilePage.tsx
+2 -2
View File
@@ -59,7 +59,7 @@ export function ProfilePage() {
if (!pubkey) {
return (
<MainLayout hideMobileTopBar>
<main className="flex-1 min-w-0 md:max-w-[600px] md:border-x border-border min-h-screen">
<main className="flex-1 min-w-0 sidebar:max-w-[600px] sidebar:border-x border-border min-h-screen">
<div className="p-8 text-center text-muted-foreground">
<p>Please log in to view your profile.</p>
</div>
@@ -72,7 +72,7 @@ export function ProfilePage() {
return (
<MainLayout hideMobileTopBar>
<main className="flex-1 min-w-0 md:max-w-[600px] md:border-x border-border min-h-screen">
<main className="flex-1 min-w-0 sidebar:max-w-[600px] sidebar:border-x border-border min-h-screen">
{/* Header */}
<div className="flex items-center gap-4 px-4 py-2 sticky top-0 bg-background/80 backdrop-blur-md z-10 border-b border-border">
<Link to="/" className="p-2 rounded-full hover:bg-secondary transition-colors">
src/pages/SearchPage.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ export function SearchPage() {
return (
<MainLayout hideMobileTopBar>
<main className="flex-1 min-w-0 md:max-w-[600px] md:border-x border-border min-h-screen">
<main className="flex-1 min-w-0 sidebar:max-w-[600px] sidebar:border-x border-border min-h-screen">
<div className="flex items-center gap-3 px-4 py-3 sticky top-0 bg-background/80 backdrop-blur-md z-10 border-b border-border">
<Link to="/" className="p-2 rounded-full hover:bg-secondary transition-colors shrink-0">
<ArrowLeft className="size-5" />
src/pages/SettingsPage.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export function SettingsPage() {
return (
<MainLayout hideMobileTopBar>
<main className="flex-1 min-w-0 md:max-w-[600px] md:border-x border-border min-h-screen">
<main className="flex-1 min-w-0 sidebar:max-w-[600px] sidebar:border-x border-border min-h-screen">
<div className="flex items-center gap-4 px-4 py-3 sticky top-0 bg-background/80 backdrop-blur-md z-10 border-b border-border">
<Link to="/" className="p-2 rounded-full hover:bg-secondary transition-colors">
<ArrowLeft className="size-5" />
tailwind.config.ts
+8
View File
@@ -18,6 +18,14 @@ export default {
'2xl': '1400px'
}
},
screens: {
'sm': '640px',
'sidebar': '688px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
},
extend: {
fontFamily: {
sans: ['Inter Variable', 'Inter', 'system-ui', 'sans-serif'],