|  |  |  | 
|---|
|  |  |  | sx={{ zIndex: 100, opacity: 1 }} | 
|---|
|  |  |  | > | 
|---|
|  |  |  | {open && ( | 
|---|
|  |  |  | <Box pt={12} width={{ xs: '100vW', sm: width }} height={'calc(100vh - 200px);'} mt={{ xs: 2, sm: 1 }} sx={{ | 
|---|
|  |  |  | <Box pt={12} width={{ xs: '100vW', sm: width }} height={'calc(100vh - 100px);'} mt={{ xs: 2, sm: 1 }} sx={{ | 
|---|
|  |  |  | }}> | 
|---|
|  |  |  | <Stack direction="row" p={2}> | 
|---|
|  |  |  | <Typography variant="h6" flex="1"> | 
|---|
|  |  |  | 
|---|
|  |  |  | <CloseIcon /> | 
|---|
|  |  |  | </IconButton> | 
|---|
|  |  |  | </Stack> | 
|---|
|  |  |  | <Box p={2} pt={1}> | 
|---|
|  |  |  | <Box p={2} pt={1} height='100%'> | 
|---|
|  |  |  | <Card sx={{ | 
|---|
|  |  |  | height: '100%', | 
|---|
|  |  |  | transition: '0.3s', | 
|---|
|  |  |  | boxShadow: themeMode === 'light' | 
|---|
|  |  |  | ? '0px 2px 8px rgba(0, 0, 0, 0.1)' | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | borderRadius: '8px', | 
|---|
|  |  |  | }}> | 
|---|
|  |  |  | <CardContent> | 
|---|
|  |  |  | <CardContent sx={{ height: '100%' }}> | 
|---|
|  |  |  | {deviceType === DEVICE_TYPE.SHELF && ( | 
|---|
|  |  |  | <> | 
|---|
|  |  |  | <ShelfInsight | 
|---|