diff --git a/src/views/Community/components/HeroPanel.js b/src/views/Community/components/HeroPanel.js
index 6663b4b9..fe446121 100644
--- a/src/views/Community/components/HeroPanel.js
+++ b/src/views/Community/components/HeroPanel.js
@@ -2044,12 +2044,25 @@ const DetailModal = ({ isOpen, onClose, selectedDate, ztDetail, events, loading
         <DrawerContent
           bg="linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(25,25,50,0.98) 100%)"
           borderLeft="1px solid rgba(255,215,0,0.2)"
+          maxH="100vh"
+          display="flex"
+          flexDirection="column"
         >
           <DrawerCloseButton color="whiteAlpha.600" />
-          <DrawerHeader borderBottom="1px solid rgba(255,215,0,0.2)" color="white">
+          <DrawerHeader borderBottom="1px solid rgba(255,215,0,0.2)" color="white" flexShrink={0}>
             {selectedContent?.title}
           </DrawerHeader>
-          <DrawerBody py={6} overflowY="auto">
+          <DrawerBody
+            py={6}
+            flex="1"
+            overflowY="auto"
+            sx={{
+              '&::-webkit-scrollbar': { width: '8px' },
+              '&::-webkit-scrollbar-track': { background: 'rgba(255,255,255,0.05)', borderRadius: '4px' },
+              '&::-webkit-scrollbar-thumb': { background: 'rgba(255,215,0,0.4)', borderRadius: '4px' },
+              '&::-webkit-scrollbar-thumb:hover': { background: 'rgba(255,215,0,0.6)' },
+            }}
+          >
             <Box
               className="markdown-content"
               color="whiteAlpha.900"