Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): fix metadataviewer styling

Browse Source
This commit is contained in:
psychedelicious 2023-05-09 21:39:21 +10:00
parent fcf9c63049
commit 3d1470399c
1 changed files with 15 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx
View File

@ -35,6 +35,7 @@ import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaCopy } from 'react-icons/fa'; import { FaCopy } from 'react-icons/fa';
import { IoArrowUndoCircleOutline } from 'react-icons/io5'; import { IoArrowUndoCircleOutline } from 'react-icons/io5';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
type MetadataItemProps = { type MetadataItemProps = {
isLink?: boolean; isLink?: boolean;
@ -289,7 +290,7 @@ const ImageMetadataViewer = memo(({ image }: ImageMetadataViewerProps) => {
</Text> </Text>
</Center> </Center>
)} )}
<Flex gap={2} direction="column"> <Flex gap={2} direction="column" overflow="auto">
<Flex gap={2}> <Flex gap={2}>
<Tooltip label="Copy metadata JSON"> <Tooltip label="Copy metadata JSON">
<IconButton <IconButton
@ -303,22 +304,19 @@ const ImageMetadataViewer = memo(({ image }: ImageMetadataViewerProps) => {
</Tooltip> </Tooltip>
<Text fontWeight="semibold">Metadata JSON:</Text> <Text fontWeight="semibold">Metadata JSON:</Text>
</Flex> </Flex>
<Box <OverlayScrollbarsComponent defer>
sx={{ <Box
mt: 0, sx={{
mr: 2, padding: 4,
mb: 4, borderRadius: 'base',
ml: 2, bg: 'whiteAlpha.500',
padding: 4, _dark: { bg: 'blackAlpha.500' },
borderRadius: 'base', w: 'max-content',
overflowX: 'scroll', }}
wordBreak: 'break-all', >
bg: 'whiteAlpha.500', <pre>{metadataJSON}</pre>
_dark: { bg: 'blackAlpha.500' }, </Box>
}} </OverlayScrollbarsComponent>
>
<pre>{metadataJSON}</pre>
</Box>
</Flex> </Flex>
</Flex> </Flex>
); );