chore: improve overlapping code actions/content

Author: dastrong-codiga

src/renderer/components/SearchResults/SearchResults.tsx

@@ -30,14 +30,22 @@ export default function SearchResults({ results }: SearchResultsProps) {
           />
         ))}
       </SearchResultsList>
-      <Flex position="relative" flex={1} h="full" w="full" overflowX="scroll">
+      <Flex
+        position="relative"
+        flex={1}
+        h="full"
+        w="full"
+        overflowX="auto"
+        overflowY="scroll"
+      >
         <Box
           position="absolute"
           top="0"
           left="0"
           minHeight="full"
           minWidth="full"
           h="full"
+          w="full"
         >
           {results[0] ? <SearchResultsCode recipe={snippetInFocus} /> : null}
         </Box>

src/renderer/components/SearchResults/SearchResultsCode.tsx

@@ -70,6 +70,7 @@ export default function SearchResultsCode({ recipe }: SearchResultsCodeProps) {
       <Code
         border={0}
         borderRadius={0}
+        pt="space_48"
         pos="relative"
         sx={{
           'code[class*="language-"] > span:first-child > .linenumber:first-child':
@@ -135,7 +136,7 @@ export default function SearchResultsCode({ recipe }: SearchResultsCodeProps) {
         <CodeContent
           customStyle={{
             background: bg,
-            overflow: 'hidden',
+            overflowX: 'auto',
           }}
           codeTagProps={{
             style: {

src/renderer/components/SearchResults/SearchResultsCodeActionsLoading.tsx

@@ -0,0 +1,18 @@
+import { Flex, Skeleton } from '@chakra-ui/react';
+
+export default function SearchResultsCodeActionsLoading() {
+  return (
+    <Flex
+      pos="absolute"
+      alignItems="center"
+      gridGap="space_8"
+      top="space_8"
+      right="space_8"
+      zIndex="docked"
+    >
+      <Skeleton h="28px" w="100px" />
+      <Skeleton h="32px" w="32px" />
+      <Skeleton h="32px" w="43px" />
+    </Flex>
+  );
+}

src/renderer/components/SearchResults/SearchResultsCodeLoading.tsx

@@ -4,7 +4,7 @@ export default function SearchResultsCodeLoading() {
   return (
     <VStack
       p="space_16"
-      pt="7px"
+      pt="space_56"
       w="full"
       spacing="space_8"
       alignItems="flex-start"

src/renderer/components/SearchResults/SearchResultsLoading.tsx

@@ -1,4 +1,5 @@
 import { Flex } from '@chakra-ui/react';
+import SearchResultsCodeActionsLoading from './SearchResultsCodeActionsLoading';
 import SearchResultsCodeLoading from './SearchResultsCodeLoading';
 import SearchResultsList from './SearchResultsList';
 import SearchResultsListItemLoading from './SearchResultsListItemLoading';
@@ -11,7 +12,8 @@ export default function SearchResultsLoading() {
           <SearchResultsListItemLoading key={num} />
         ))}
       </SearchResultsList>
-      <Flex flex={1}>
+      <Flex flex={1} pos="relative">
+        <SearchResultsCodeActionsLoading />
         <SearchResultsCodeLoading />
       </Flex>
     </Flex>