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,50 +94,44 @@ export default function FutureAvailability() {
         filteredCount={filtered.length}
       />
 
-      {/* Body */}
+      {/* Signal list — always full width */}
-      <Box sx={{ flex: 1, display: 'flex', overflow: 'hidden' }}>
+      <Box sx={{ flex: 1, overflowY: 'auto', bgcolor: '#f8fafc' }}>
-        {/* Signal list */}
+        {isLoading ? (
-        <Box sx={{ flex: 1, overflowY: 'auto', bgcolor: '#f8fafc' }}>
+          <Box sx={{ p: 3 }}>
-          {isLoading ? (
+            {[0, 1, 2, 3].map(i => (
-            <Box sx={{ p: 3 }}>
+              <Box key={i} sx={{ p: 2, mb: 1, bgcolor: 'white', borderRadius: 1, height: 120 }} />
-              {[0, 1, 2, 3].map(i => (
+            ))}
-                <Box key={i} sx={{ p: 2, mb: 1, bgcolor: 'white', borderRadius: 1, height: 120 }} />
+          </Box>
-              ))}
+        ) : filtered.length === 0 ? (
-            </Box>
+          <FutureSignalEmptyState context={signals.length === 0 ? 'no-signals' : 'filtered-empty'} />
-          ) : filtered.length === 0 ? (
+        ) : (
-            <FutureSignalEmptyState context={signals.length === 0 ? 'no-signals' : 'filtered-empty'} />
+          <Box sx={{ bgcolor: 'white' }}>
-          ) : (
+            {filtered.map(signal => (
-            <Box sx={{ bgcolor: 'white', borderRight: '1px solid #e2e8f0' }}>
+              <FutureSignalCard
-              {filtered.map(signal => (
+                key={signal.id}
-                <FutureSignalCard
+                signal={signal}
-                  key={signal.id}
+                isSelected={selectedSignal?.id === signal.id}
-                  signal={signal}
+                onSelect={handleSelect}
-                  isSelected={selectedSignal?.id === signal.id}
+              />
-                  onSelect={handleSelect}
+            ))}
-                />
+          </Box>
-              ))}
-            </Box>
-          )}
-        </Box>
-
-        {/* Detail panel */}
-        {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>
+
+      {/* 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 && (
+          <FutureSignalDetailPanel
+            signal={selectedSignal}
+            onClose={() => setSelectedSignal(null)}
+          />
+        )}
+      </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,36 +59,28 @@ export default function Properties() {
       />
       <PropertyFilterBar filters={filters} onFiltersChange={setFilters} />
 
-      <Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
+      <Box sx={{ flex: 1, overflowY: 'auto' }}>
-        {/* Table */}
+        <PropertyTable
-        <Box sx={{ flex: 1, overflowY: 'auto' }}>
+          properties={filtered}
-          <PropertyTable
+          isLoading={isLoading}
-            properties={filtered}
+          isError={isError}
-            isLoading={isLoading}
+          selectedId={selectedId}
-            isError={isError}
+          onSelect={setSelectedId}
-            selectedId={selectedId}
+          filters={filters}
-            onSelect={setSelectedId}
+          onFiltersChange={setFilters}
-            filters={filters}
+        />
-            onFiltersChange={setFilters}
-          />
-        </Box>
-
-        {/* Detail panel */}
-        {selectedId && (
-          <Box
-            sx={{
-              width: 480,
-              flexShrink: 0,
-              borderLeft: '1px solid #e2e8f0',
-              overflow: 'hidden',
-              display: 'flex',
-              flexDirection: 'column',
-            }}
-          >
-            <PropertyDetailView propertyId={selectedId} onClose={() => setSelectedId(null)} />
-          </Box>
-        )}
       </Box>
+
+      <Drawer
+        anchor="right"
+        open={!!selectedId}
+        onClose={() => setSelectedId(null)}
+        slotProps={{ paper: { sx: { width: 650, boxShadow: '-4px 0 24px rgba(0,0,0,0.10)' } } }}
+      >
+        {selectedId && (
+          <PropertyDetailView propertyId={selectedId} onClose={() => setSelectedId(null)} />
+        )}
+      </Drawer>
     </Box>
   )
 }