refactor: replace split-panel with overlay Drawer on Properties and FutureAvailability

650px right Drawer overlays the list instead of compressing it — full list always visible, detail panel has adequate space.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/pages/supply/FutureAvailability.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Box, Chip, Paper, Typography } from '@mui/material'
+import { Box, Chip, Drawer, Typography } from '@mui/material'
 import { useFutureSignals } from '../../hooks/useFutureSignals'
 import {
   FutureSignalCard,
@@ -94,9 +94,7 @@ export default function FutureAvailability() {
         filteredCount={filtered.length}
       />
 
-      {/* Body */}
+      {/* Signal list — always full width */}
-      <Box sx={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
-        {/* Signal list */}
       <Box sx={{ flex: 1, overflowY: 'auto', bgcolor: '#f8fafc' }}>
         {isLoading ? (
           <Box sx={{ p: 3 }}>
@@ -107,7 +105,7 @@ export default function FutureAvailability() {
         ) : filtered.length === 0 ? (
           <FutureSignalEmptyState context={signals.length === 0 ? 'no-signals' : 'filtered-empty'} />
         ) : (
-            <Box sx={{ bgcolor: 'white', borderRight: '1px solid #e2e8f0' }}>
+          <Box sx={{ bgcolor: 'white' }}>
             {filtered.map(signal => (
               <FutureSignalCard
                 key={signal.id}
@@ -120,24 +118,20 @@ export default function FutureAvailability() {
         )}
       </Box>
 
-        {/* Detail panel */}
+      {/* Detail drawer */}
+      <Drawer
+        anchor="right"
+        open={!!selectedSignal}
+        onClose={() => setSelectedSignal(null)}
+        slotProps={{ paper: { sx: { width: 650, boxShadow: '-4px 0 24px rgba(0,0,0,0.10)' } } }}
+      >
         {selectedSignal && (
-          <Paper elevation={0} sx={{
-            width: 360,
-            flexShrink: 0,
-            display: 'flex',
-            flexDirection: 'column',
-            borderRadius: 0,
-            borderLeft: '1px solid #e2e8f0',
-            overflow: 'hidden',
-          }}>
           <FutureSignalDetailPanel
             signal={selectedSignal}
             onClose={() => setSelectedSignal(null)}
           />
-          </Paper>
         )}
-      </Box>
+      </Drawer>
     </Box>
   )
 }

src/pages/supply/Properties.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Box } from '@mui/material'
+import { Box, Drawer } from '@mui/material'
 import { PageHeader } from '../../components/layout'
 import { useProperties } from '../../hooks/useProperties'
 import { PropertyFilterBar, PropertyTable, PropertyDetailView } from '../../components/supply'
@@ -59,8 +59,6 @@ export default function Properties() {
       />
       <PropertyFilterBar filters={filters} onFiltersChange={setFilters} />
 
-      <Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
-        {/* Table */}
       <Box sx={{ flex: 1, overflowY: 'auto' }}>
         <PropertyTable
           properties={filtered}
@@ -73,22 +71,16 @@ export default function Properties() {
         />
       </Box>
 
-        {/* Detail panel */}
+      <Drawer
-        {selectedId && (
+        anchor="right"
-          <Box
+        open={!!selectedId}
-            sx={{
+        onClose={() => setSelectedId(null)}
-              width: 480,
+        slotProps={{ paper: { sx: { width: 650, boxShadow: '-4px 0 24px rgba(0,0,0,0.10)' } } }}
-              flexShrink: 0,
-              borderLeft: '1px solid #e2e8f0',
-              overflow: 'hidden',
-              display: 'flex',
-              flexDirection: 'column',
-            }}
       >
+        {selectedId && (
           <PropertyDetailView propertyId={selectedId} onClose={() => setSelectedId(null)} />
-          </Box>
         )}
-      </Box>
+      </Drawer>
     </Box>
   )
 }