feat: full responsive layout — mobile sidebar, stacked panels, fullscreen drawers

- AppShell: permanent sidebar on desktop, temporary drawer + hamburger on mobile (<md)
- TopBar: hamburger icon on mobile, AI-Assistent als Icon-Button auf kleinen Screens
- MatchDetail: Sidebar stacks below content on mobile, key facts wrap, px responsive
- Properties: Drawer fullscreen (100vw) on mobile, 650px on desktop
- ActiveInquiriesTab: mobile shows list → tap opens detail with back button
- LatentInquiriesTab: mobile sequential navigation (list → detail → own properties), tablet 2-col, desktop 3-col
- PublicNeedList: fullWidth prop for mobile layout
- InquiryDetailPanel: property card stacks below chat on mobile

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
2026-05-18 21:24:00 +02:00
parent 259b4e3c68
commit a75818b983
7 changed files with 220 additions and 105 deletions
@@ -7,18 +7,19 @@ import { EmptyState } from '../ui'
interface PublicNeedListProps {
selectedNeedId: string | null
onSelect: (id: string) => void
fullWidth?: boolean
}
export function PublicNeedList({ selectedNeedId, onSelect }: PublicNeedListProps) {
export function PublicNeedList({ selectedNeedId, onSelect, fullWidth }: PublicNeedListProps) {
const { data: needs = [], isLoading, error } = usePublicNeeds()
return (
<Box
sx={{
width: 280,
minWidth: 280,
width: fullWidth ? '100%' : 280,
minWidth: fullWidth ? 'unset' : 280,
flexShrink: 0,
borderRight: '1px solid #e2e8f0',
borderRight: fullWidth ? 'none' : '1px solid #e2e8f0',
bgcolor: 'white',
display: 'flex',
flexDirection: 'column',