Refactor Topic component to improve readability and maintainability

src/views/components/InputMessage/Topic.tsx

@@ -105,6 +105,7 @@ export default function Topic({ styleName }) {
           },
         }}
       >
+        <Box>
           {topicList.map((item: any, index) => (
             <Box>
               <Flex sx={{ width: "100%" }} gap="sm">
@@ -169,12 +170,7 @@ export default function Topic({ styleName }) {
               )}
             </Box>
           ))}
-        <LoadingOverlay
-          visible={loading}
-          overlayBlur={3}
-          overlayOpacity={0}
-          keepMounted={true}
-        />
+        </Box>
       </Drawer>
       <ActionIcon
         className={styleName}
@@ -184,6 +180,20 @@ export default function Topic({ styleName }) {
       >
         <IconClock size="1rem" />
       </ActionIcon>
+      <LoadingOverlay
+        style={{
+          height: "380px",
+          inset: "auto",
+          bottom: "0",
+          left: "0",
+          right: "0",
+          position: "fixed",
+        }}
+        visible={loading}
+        overlayBlur={3}
+        overlayOpacity={0}
+        keepMounted={true}
+      />
     </>
   );
 }